<?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
 */
?>
<!--The div element for the map -->
<div id="cemetery-sexton-lot-map">
<script>
// Initialize and add the map
function initMap() {
    var aerialTileUrl = '<?php echo $options['mapoverlay_aerial']; ?>';
    var sectionTileUrl = '<?php echo $options['mapoverlay_section']; ?>';
    var DataX = <?php echo $rsLot['MapX']; ?>;
    	var DataY = <?php echo $rsLot['MapY']; ?>;
    	var LotLocation = '<?php echo $lotLocation; ?>';
    	var DataLat = <?php echo $rsLot['Latitude']; ?>;
    	var DataLng = <?php echo $rsLot['Longitude']; ?>;
        
        // The location of Uluru
        var uluru = {lat: DataX, lng: DataY};

     	// The map, centered at Uluru
        var map = new google.maps.Map(
          document.getElementById('cemetery-sexton-lot-map'), {
              zoom: 17, 
              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');
        

		// Info window
        var infowindow = new google.maps.InfoWindow({
            content: LotLocation
          });
        // The marker, positioned at Uluru
		var marker = new google.maps.Marker({position: uluru, map: map});
		// On marker click, open info window
		marker.addListener('click', function() {
		    infowindow.open(map, marker);
		  });
		infowindow.open(map, marker);
    }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<?php echo $options['google_map_key'];?>&callback=initMap">
</script>
</div>