php 带有Marker Spiderfier for ACF的基本Google Maps结构

Posted 2021-05-05

<?php 
/*
 *
 *  Template Name: Map
 *
 */
?>
<style>
#map_canvas { height: 500px; max-width: none; }
#map_canvas img { max-width: none !important; }
</style>

<div id="map_canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.js"></script>

<script>
jQuery(document).ready(function($) {
	
	var center = new google.maps.LatLng(65.346251, 26.300100);
	var infowindow = new google.maps.InfoWindow();
	var markers = [];
	
	<?php 
	$markers = new QP_Query([]);

	if ( $markers->have_posts() ): 
		while ( $markers->have_posts() ): $markers->the_post(); 

		if (!get_field('google_map')) continue;

		$location = get_field('google_map'); ?>

		markers.push({
			position: new google.maps.LatLng(<?php echo $location['lat']; ?>, <?php echo $location['lng']; ?>),
			//icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
			content: '<h3><?php echo $post->post_title; ?></h3>'
		});
	<?php 
		endwhile; 
	endif; ?>
			
	var map = new google.maps.Map(document.getElementById('map_canvas'), {
		zoom: 5,
		center: center
	});	
	
	oms = new OverlappingMarkerSpiderfier(map,
        {markersWontMove: true, markersWontHide: true, keepSpiderfied: true, circleSpiralSwitchover: 40 });
		
	$.each(markers, function( index, map_marker ) {
		
		var marker = new google.maps.Marker({
			position: map_marker.position,
			map: map,
			icon: map_marker.icon,
			content: map_marker.content
		});		
		
		google.maps.event.addListener(marker,'spider_click', (function(marker, content, infowindow){ 
		    return function() {
		        infowindow.setContent(content);
		        infowindow.open(map, marker);
		    };
		})(marker, marker.content, infowindow));
		
		oms.addMarker(marker); 
		
	});
	
    $(window).resize(function() {
        google.maps.event.trigger(map, 'resize');
    });
    
    google.maps.event.trigger(map, 'resize');
});
</script>