php ACF谷歌地图单标记

Posted 2021-05-04

<?php

/*
1) 
ACF Fields:
- map_title
- map_address
*/

// 2 Get ACF Data:
// Google Map
// Get latitude and longitude by address         
$map_title = get_field('map_title') ;
$address   = get_field('map_address') ;  
$prepAddr  = str_replace(' ','+',$address);
$geocode   = file_get_contents('https://maps.google.com/maps/api/geocode/json?address='.$prepAddr.'&sensor=false&key=AIzaSyCUxfTg4ataPFmGeTUHu4aHkweJr17UeD0');
$output    = json_decode($geocode);
$latitude  = $output->results[0]->geometry->location->lat;
$longitude = $output->results[0]->geometry->location->lng;
?>


HTML:
<div class="col-md-8 presenting_right">
  <div id="map" style="height: 250px;"></div>
</div>





FOOTER:
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUxfTg4ataPFmGeTUHu4aHkweJr17UeD0"></script>


<script>
jQuery(document).ready( function() {
showMap() ; 

	// ############# SHOW MAP ###############
	function showMap() {
		var latlng = new google.maps.LatLng(<?php echo $latitude ; ?>, <?php echo $longitude ; ?>);
		var myOptions = {
			zoom: 13,  // create a custom field to let the user override this value
			scrollwheel: false, // disable scrollwheel zoom, this should always be the default  >_<
			center: latlng,
			styles:
			[
				... gmaps style options here
			],
			zoomControl: false,
  			mapTypeControl: false,
			streetViewControl: false,
			mapTypeId: google.maps.MapTypeId.ROADMAP,

		}; // END options
		
		
			var map = new google.maps.Map(document.getElementById("map") ,  myOptions );
			
			var marker = new google.maps.Marker({
				icon: "<?php echo get_stylesheet_directory_uri(); ?>/img/custom_marker.png",
				position: new google.maps.LatLng(<?php echo $latitude ; ?>, <?php echo $longitude ; ?>),
				map: map,
				title: `<?php the_field('map_title') ; ?>`,
				clickable: true
			});
			
			
			var infowindow = new google.maps.InfoWindow({
				content: `
				<a target="_blank" href="https://www.google.com/maps/place/<?php echo $prepAddr ; ?>">
				<?php the_field('map_title') ; ?>
				</a>
				`
			});
		
			google.maps.event.addListener(marker, 'click', function () {
				infowindow.open(map, marker);
			});
			
			geocoder = new google.maps.Geocoder();
			directionsService = new google.maps.DirectionsService();
			directionsDisplay = new google.maps.DirectionsRenderer({
				suppressMarkers: false
			});
			
			directionsDisplay.setMap(map);
			//directionsDisplay.setPanel(document.getElementById("directionsPanel"));
    
	} // END showMap()

  
}) ; 


</script>