Home › Forums › Front-end Issues › Display Maps on Front-End
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
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 🙂
Hello..sorry i wrong put “resolve” on my post 🙁
Thanks to your reply.
I not display the maps….attach the export file.
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 🙂
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&ver=3'></script>
As you can see it uses “&” 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 🙂
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?
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
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!
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.