Display Maps on Front-End

• serviceweb

• December 14, 2016 at 8:08 am

I’ve create a field with name “travel” and i need to display Google Maps with all point insert on each post using ACF Field and, if is it possibile, link the point to post url.

I put this on functions.php

/* API Maps */
/* API Maps */
function my_theme_add_scripts() {
	wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?key=myapi', array(), '3', true );
	wp_enqueue_script( 'google-map-init', get_template_directory_uri() . '/library/js/google-maps.js', array('google-map', 'jquery'), '0.1', true );
}
 
add_action( 'wp_enqueue_scripts', 'my_theme_add_scripts' );
 
function my_acf_google_map_api( $api ){
	
	$api['key'] = 'myapi';
	
	return $api;
	
}
 
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

And then create this custom page template:

<?php
/* Template Name: Travel */
get_header(); ?>
<?php theworld_popular_posts_carousel(); ?>
<div id=”primary” class=”clearfix”>
<div class=”container”>
<div id=”more-content”>
<main id=”main” class=”site-main” role=”main” <?php hybrid_attr( ‘content’ ); ?>>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( ‘content’, ‘page’ ); ?>

<?php

$location = get_field(‘travel’);

if( !empty($location) ):
?>
<div class=”acf-map”>
<div class=”marker” data-lat=”<?php echo $location[‘lat’]; ?>” data-lng=”<?php echo $location[‘lng’]; ?>”></div>
</div>
<?php endif; ?>

<?php endwhile; // end of the loop. ?>
</main><!– #main –>
</div><!– #primary –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>`

(Also add this on style.css)

/* Maps ACF */
.acf-map {
	width: 100%;
	height: 400px;
	border: #ccc solid 1px;
	margin: 20px 0;
}

/* fixes potential theme css conflict */
.acf-map img {
   max-width: inherit !important;
}

I’ve create a google-maps.js with this code

// JavaScript Document
(function($) {
/*
*  render_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	$el (jQuery element)
*  @return	n/a
*/
function render_map( $el ) {
	// var
	var $markers = $el.find('.marker');
	// vars
	var args = {
		zoom		: 16,
		center		: new google.maps.LatLng(0, 0),
		mapTypeId	: google.maps.MapTypeId.ROADMAP
	};
	// create map	        	
	var map = new google.maps.Map( $el[0], args);
	// add a markers reference
	map.markers = [];
	// add markers
	$markers.each(function(){
    	add_marker( $(this), map );
	});
	// center map
	center_map( map );
}
/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	$marker (jQuery element)
*  @param	map (Google Map object)
*  @return	n/a
*/
function add_marker( $marker, map ) {
	// var
	var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
	// create marker
	var marker = new google.maps.Marker({
		position	: latlng,
		map			: map
	});
	// add to array
	map.markers.push( marker );
	// if marker contains HTML, add it to an infoWindow
	if( $marker.html() )
	{
		// create info window
		var infowindow = new google.maps.InfoWindow({
			content		: $marker.html()
		});
		// show info window when marker is clicked
		google.maps.event.addListener(marker, 'click', function() {
			infowindow.open( map, marker );
		});
	}
}
/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	map (Google Map object)
*  @return	n/a
*/
function center_map( map ) {
	// vars
	var bounds = new google.maps.LatLngBounds();
	// loop through all markers and create bounds
	$.each( map.markers, function( i, marker ){
		var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
		bounds.extend( latlng );
	});
	// only 1 marker?
	if( map.markers.length == 1 )
	{
		// set center of map
	    map.setCenter( bounds.getCenter() );
	    map.setZoom( 16 );
	}
	else
	{
		// fit to bounds
		map.fitBounds( bounds );
	}
}
/*
*  document ready
*
*  This function will render each map when the document is ready (page has loaded)
*
*  @type	function
*  @date	8/11/2013
*  @since	5.0.0
*
*  @param	n/a
*  @return	n/a
*/
$(document).ready(function(){
	$('.acf-map').each(function(){
		render_map( $(this) );
	});
});
})(jQuery);

If i go on my page front-end i see nothing maps. Where wrong? Thanks

• James

• December 14, 2016 at 1:56 pm

Hi @serviceweb

Could you please share the JSON or XML export file of your field group so I can test it out on my installation?

Also, could you please let me know what did you mean by “see nothing maps?” Did you see the map but not the markers or the map is completely grayed out? Could you please share the screenshots of the issue?

Thanks 🙂

• serviceweb

• December 14, 2016 at 8:33 pm

Hello..sorry i wrong put “resolve” on my post 🙁

Thanks to your reply.

I not display the maps….attach the export file.

advanced-cus....xml

• James

• December 15, 2016 at 11:18 am

Hi @serviceweb

In that case, maybe there’s something wrong with your configuration. Could you please share the URL where you put the map? You can set your reply visibility to private if you don’t want to show it to public.

Also, could you please check the console tab of your developer tools to see if there are any error messages on the page?

Thanks 🙂

• serviceweb

• December 15, 2016 at 6:14 pm

This reply has been marked as private.

• James

• December 16, 2016 at 11:12 am

Hi @serviceweb

I’ve just tried to fix the map on your site, but I created a mistake there. I’m really sorry about that.

The issue you had was that you were trying to get the maps from the current page (luoghi-padre-pio) by using this code:

$location = get_field('mappa_santo');

But your Google Map field is located in posts with a category of “I luoghi di Padre Pio”. The correct way to get the markers for this situation is to loop through the posts and get the Google Map values like this:

$map_posts = get_posts(array(
    'post_type' => 'post',
    'cat' => '8'
));

if( $map_posts ): ?>
    <div class="acf-map">
        <?php foreach( $map_posts as $map_post ) : 

            $location = get_sub_field('location', $map_post->ID);

            ?>
            <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
                <h4><?php the_sub_field('title'); ?></h4>
                <p class="address"><?php echo $location['address']; ?></p>
                <p><?php the_sub_field('description'); ?></p>
            </div>
    <?php endforeach; ?>
    </div>
<?php endif; ?>

With that code, I successfully made the maps and the location show up on the page. But the map only shows a blue background. When I checked the source, the script somehow has the wrong encoding:

<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=XXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&#038;ver=3'></script>

As you can see it uses “&#038;” instead of “?”. So I tried to add the script manually like this:

/* API Maps */
function my_theme_add_scripts() {

    <script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=XXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX?ver=3'></script>
    <script type='text/javascript' src='http://padrepio.hellonetlab.it/wp-content/themes/theworld-child/library/js/google-maps.js?ver=0.1'></script>

}
add_action( 'wp_enqueue_scripts', 'my_theme_add_scripts' );

Unfortunately, I forgot the PHP opening and closing tag there. Could you please access the functions.php file using FTP client and change it to:

/* API Maps */
function my_theme_add_scripts() {
    ?>
    <script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=XXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX?ver=3'></script>
    <script type='text/javascript' src='http://padrepio.hellonetlab.it/wp-content/themes/theworld-child/library/js/google-maps.js?ver=0.1'></script>
    <?php
}
add_action( 'wp_enqueue_scripts', 'my_theme_add_scripts' );

Once again, I’m sorry about that.

Thanks 🙂

• serviceweb

• January 31, 2017 at 9:15 pm

Hello and sorry for delay..i continue to have a problem on Maps. So if i go on front-end i not see a maps with location and list of post but see the map in the ocean.

Is possibile to fix it?

• BeeOnLion

• June 28, 2017 at 6:19 pm

Hi @James

it looks like you solved this issue above and I was wondering if you could assist with mine its along the same lines when you have a chance.

I have created a custom field with map loaction this is attached to a category in of posts.
Ideally what i want to happen is elements of the post display on the map inside the pointer window when clicked.

Im building out a wordpress site that plots custom data on a google map using Advanced Custom Fields Pro but can’t get it to generate the map using the custom page I have created.

I have created a Google Map Picker with ACF which I have assigned to a post category type ID 4. This is functioning as expected and I can pick the location for each post

In my custom template for wordpress site I have entered the below code to call any location information from the Category in question in this case its ID is 4

This Section pulls and displays the location as expected on the page ( I will be hiding it in the final build)

<?php
$catquery = new WP_Query( 'cat=4&posts_per_page=10' );
while($catquery->have_posts()) : $catquery->the_post();
?>

  <?php the_field('location'); ?>

<?php endwhile; ?>
 </div>

However the map just pulls the first blog and does not display the other Below is the code im using to call the location and pass it into the map

<?php if( have_rows('sdg_location') ): ?>
    <div class="acf-map">
        <?php while ( have_rows('sdg_location') ) : the_row(); 

            $location = get_field('location');

            ?>
            <div class="marker" data-lat="<?php echo $location['lat']; ?>" 
    data-lng="<?php echo $location['lng']; ?>">

            </div>
    <?php endwhile; ?>
    </div>
<?php endif; ?>

Can you advise of a better method of doing this? Is there a way to pass the location from the categories directly into the map call?

Thanks a million for your help in advance

dddddd.png.png

• thecodeguy

• June 5, 2018 at 3:30 pm

Hi,

Using this code:

$map_posts = get_posts(array(
    'post_type' => 'post',
    'cat' => '8'
));

if( $map_posts ): ?>
    <div class="acf-map">
        <?php foreach( $map_posts as $map_post ) : 

            $location = get_sub_field('location', $map_post->ID);

            ?>
            <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
                <h4><?php the_sub_field('title'); ?></h4>
                <p class="address"><?php echo $location['address']; ?></p>
                <p><?php the_sub_field('description'); ?></p>
            </div>
    <?php endforeach; ?>
    </div>
<?php endif; ?>

Is there a way to show nearby locations? Like by a radius of 20 miles, for example?

P.s. Thank you so much for the code, it works great!

• woody

• October 22, 2018 at 3:28 am

Hi @serviceweb ,
Did you fix the problem in your code?

Thanks