[Plugin Advanced Custom Fields] Display Google map on your theme

This really helped – much clearer than the ACF docs.

Thank you SO SO much for sharing this!

Dear LeRedac

THANK YOU so much for the help. I am setting up an easy backend to add events via post(Event Category) and with 2 ACF fields.. Event endDate and Map..

As long as event enddate is less than today’s date, i display the event.

Wanted the map to be displayed on home page as well, and struggled. In my test code, i got an output of “array” for the map field.. Went to ACF site and got completely lost.

Your code above allowed me to display a map! I am SO excited..

Merci Beaucoup!

Thank you. ACF Docs could use this!

Dear LeRedac,
I am a PHP developer, somewhat new to WP. I tried your code, spiced it up with an if statement to see why it won’t show the map. The field name is: “laama_map”.
I don’t know where i have got it wrong, but it always executes the else part of the if statement. Thanks for your help in advance!

Here is my code:

get_header();
$postReceivedID='36';
$foundPost=get_post($postReceivedID);
global  $foundPost;
echo  $foundPost->post_title;
echo   $foundPost->post_content;
echo   $foundPost->the_date;
/* $location = get_field('laama_map'); */
?>
<div id="view1" style="background-color:red; height:600px; width:700px; margin-left:300px;">
<?php
$location = get_field('laama_map');
if( ! empty($location) ){
?>
<div id="map" style="width: 100%; height: 350px;"></div>
<script src='https://maps.googleapis.com/maps/api/js?sensor=false' type='text/javascript'></script>

<script type="text/javascript">
  //<![CDATA[
	function load() {
	var lat = <?php echo $location['lat']; ?>;
	var lng = <?php echo $location['lng']; ?>;
// coordinates to latLng
	var latlng = new google.maps.LatLng(lat, lng);
// map Options
	var myOptions = {
	zoom: 9,
	center: latlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
   };
//draw a map
	var map = new google.maps.Map(document.getElementById("map"), myOptions);
	var marker = new google.maps.Marker({
	position: map.getCenter(),
	map: map
   });
}
// call the function
   load();
//]]>
</script>
<?php
}
else { echo "map not found"; }
?> 

</div>
<?php

//Display the footer
get_footer();
?>

[Moderator Note: Please post code or markup between backticks or use the code button. Or better still – use a pastebin. Your posted code may now have been permanently damaged by the forum’s parser.]

Hi James,

are you sure the value get_field(‘laama_map’); is not empty ?

Try this code for testing return value :

echo '<pre>';
    print_r( get_field('laama_map')  );
echo '</pre>';

The code works perfect. I’d like to know if there is a way to make it so when you click the marker it opens up options like directions.

Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks!

Thank you so much to LeRedac & jamesfirass!
And +1 to joshmaxrubinstein (I don’t why ACF documentation is not using this code example).

Thanks! ??

You guys are more than welcome!

Hey,

thank you so much for this code… So helpfull !!

Maybe you know how I could display multiple markers on a single map ?

txs

Thank you so much ??

Bacon saved – thanks!!

Ok this exemple if you whant display on a wordpress page, a Google Maps whith Multiple Markers (working whith WordPress 4.0 )

This is my method, not sur it’s the best ! Trie.

Is working if you make a custom post type like “Map” and add custom field google map white ACF

1- Make a new templates page >> Exemple PAGE name >> MAP in your theme >> page-map.php
2 – Create a new page in WordPress dashboard >> Exemple >> MAP
3- d’ont forget put on your header google map script

<script src="https://maps.google.com/maps/api/js?sensor=false"
          type="text/javascript"></script>

4 – Choice your template page >> MAP
5 – Publish your page and see result

This is exemple off MAP page (put your <div> inside)

<?php
/*
Template Name: MAP
*/
get_header();
?>
<h1><?php the_title(); ?></h1>

<section>

<?php
  $args = array(
	  'post_type'		=> 'YOUR_CUSTOM_POST_TYPE',
	  'posts_per_page'	=> -1
  );
// query
$wp_query = new WP_Query( $args );
$NUM = 0;
?>

  <div id="map" style="width: 500px; height: 400px;"></div>

<script type="text/javascript">
    var locations = [<?php while( $wp_query->have_posts() ){
	$wp_query->the_post();
    $location = get_field('carte_google'); // IMPORTANT << Change this for your Google map field name !!!!!!
?>

['<?php the_title(); ?>', <?php echo $location['lat']; ?>, <?php echo $location['lng'];?>, <?php $NUM++ ?>],
   <?php } ?> ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 9, /*Here you change zoom for your map*/
      center: new google.maps.LatLng(-21.1, 55.6), /*Here you change center map first location*/
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
 </script>
</section>
<?php get_footer(); ?>