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

Merci infiniment leRedac !!!
Thank you so much !!

how do you do this if it’s not a custom post type but just advanced custom fields on a single page?

selfagency it’s same, just put a code in your single.php and d’ont forget add this directly inside or in your header.php >>

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

If you whant display map on a specific single page , use Function Reference/is single

Sorry people, my english is bad ??

LeRedac, grand merci! Thank you very much!

Hey LeRedac, thanks a bunch for this code, looks like everyone is getting great use of it.

I’m having trouble however. Please help me to resolve this, I’ve been plugging away all morning to no avail.

The page I’m working on is: https://dev.captiv8.co.nz/contact/

Here’s all my code from my PHP:

<?php /* Template Name: 1.4. Contained Width - Contact */

get_header(); ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

        	<div id="custom-fields-full-width">   

  				<p class="custom-fields-page-heading">
					<?php the_field('page_heading'); ?>
				   	</p>	

            	<p class="custom-fields-intro-text">
					<?php the_field('intro_paragraph'); ?>
					</p>

				<p class="custom-fields-body-text">
					<?php the_field('body_text'); ?>
     				</p>       

              <div id="view1">
                 	<?php $location = get_field('google-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 endif; ?>    

              	</div> <!--view1 div--> 

			</div> <!--custom-fields-full-width div-->

		</main><!-- .site-main -->

	</div><!-- .content-area -->

<?php get_footer(); ?>

I’ve also dropped the correct script code into the header.php file.

Thanks in advance for your help,

James

Hi James, are you sure the value >> get_field(‘google-map’); is not empty ?

Try this code for testing return value :

echo '<pre>';
    print_r( get_field('google-map')  );
echo '</pre>';

Inside ACF are you make a field whith name “google-map” ?

And for if you put :

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

directly on the page template , is not nescesery put this in header.php

Or

if you put script on the header.php is not nescesery put this in your template page

Hey LeRedac,

Thanks for helping me out so quickly! I’ll have a play and see what I can do.

Appreciate your good work with helping everyone ??

J

Bonjour LeRedac ,

Do you know how to use this same method to show all icons/locations from each custom post on one google map?

For example, I have a custom post type “Listings”. Each listing post has a google map location added using advanced custom fields “Google Map” field. When viewing the listings page on the frontend showing all listings, I want a single Google Map to show locations from all listings.

Thanks in advance for having a look

Hello Brianj , is it not the second method that could solve your problem ? The one I proposed in the above post ? >> Google Maps whith Multiple Markers

Or if you whant display Google Maps whith Multiple Markers from multiple custom post type, try use wp-query with array

$args = array(
          'post_type' => array('YOUR_CUSTOM_POST_TYPE_NAME', 'SECOND_CUSTOM_POST_TYPE_NAME'),
	  'posts_per_page'	=> -1
  );

I missed that code you posted, worked perfectly, thanks!

I’m trying to add a list below the map so that links are clickable to open the bubble of the clicked location. Any idea how to get it working? Here’s my code

<div class="catlistingsmap">

<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('google_map');
						?>

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

		gmarkers = [];

		var map = new google.maps.Map(document.getElementById('map'), {
			zoom: 9, /*Here you change zoom for your map*/
			center: new google.maps.LatLng(26.4336571, -81.9250167), /*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>

<a href="javascript:google.maps.event.trigger(gmarkers['<?php the_title(); ?>'],'click');" class="button3"><?php the_title(); ?></a>

</div>

Found this jsfiddle with clickable links, but the trigger isn’t working for me. https://jsfiddle.net/RASG/X5mhL/

UPDATE: Got it working , just had to move gmarkers[locations[i][0]] =

Thanks

Try to see and use Google map API >>

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

I try the make same fonction for the futur ??
I’m come back here if is work for me

By

Geat job LeRedac!!!

If you want to add links to your posts in the multiple markers, just replace this line:

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

with this new one:

['<?php echo("<a href=\"".get_the_permalink()."\" >".get_the_title()."</a>"); ?>', <?php echo $location['lat']; ?>, <?php echo $location['lng'];?>, <?php $NUM++ ?>],
   <?php } ?> ];

Fabio

Nice, thank you Fabio ??