<?php

/**
 * Provide a public-facing view for the plugin
 *
 * This file is used to markup the public-facing aspects of the plugin.
 *
 * @link       https://orbicular.media
 * @since      1.0.0
 *
 * @package    Cemetery_Sexton
 * @subpackage Cemetery_Sexton/public/partials
 */
?>

<!-- This file should primarily consist of HTML with a little bit of PHP. -->
<!--The div element for the map -->
<div id="cemetery-sexton-map">
<script>
    // Initialize and add the map
    function initMap() {
    	var aerialTileUrl = '<?php echo $options['mapoverlay_aerial']; ?>';
    	var sectionTileUrl = '<?php echo $options['mapoverlay_section']; ?>';
    	var Lat = 32.78063585961151;
    	var Lng = -83.53797912597656;
        
        // The location of Uluru
        var uluru = {lat: Lat, lng: Lng};

     	// The map, centered at Uluru
        var map = new google.maps.Map(
          document.getElementById('cemetery-sexton-map'), {
              zoom: 12, 
              center: uluru,
              streetViewControl: false,
              mapTypeControl: true,
              rotateControl: false,
              fullscreenControl: false,
              scaleControl: false,
              zoomControl: true,
              mapTypeControlOptions: {
                  mapTypeIds: ['Sections','Aerial']
              }
              });

        var aerialLayer = new google.maps.ImageMapType({
            name: 'Aerial',
            getTileUrl: function(coord,zoom) {
                //console.log(coord);
                var url = aerialTileUrl+zoom+"_"+coord.x+"_"+coord.y+".jpg";
                return url;
            },
            tileSize: new google.maps.Size(256,256),
            minZoom: 12,
            maxZoom: 17
        });

        var sectionLayer = new google.maps.ImageMapType({
            name: 'Sections',
            getTileUrl: function(coord,zoom) {
                //console.log(coord);
                var url = sectionTileUrl+zoom+"_"+coord.x+"_"+coord.y+".png";
                return url;
            },
            tileSize: new google.maps.Size(256,256),
            minZoom: 12,
            maxZoom: 17,
            isPng: true
        });

        map.mapTypes.set('Sections', sectionLayer);
        map.overlayMapTypes.insertAt(0, sectionLayer);
        map.mapTypes.set('Aerial', aerialLayer);
        map.setMapTypeId('Sections');
        
    }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<?php echo $options['google_map_key'];?>&callback=initMap">
</script>
</div>