This article is for you if you’re trying to figure out how to render a Google map in your WordPress website, with multiple markers where the coordinates are coming from the posts or custom post types.
Scenario: Let’s say you’ve created a custom post type called “Restaurants”. You have custom fields in that post where you enter the restaurant’s coordinates and you want to mark in a Google map the location of each restaurant using those coordinates.
You can use a plugin called Advanced Custom Fields to add a “Map” group field that accepts the latitude and longitude coordinates of the restaurant in its sub fields.
We will be able to use these coordinates to create a marker for each restaurant and plot them on a Google map.
You can use both PHP and JavaScript to do this. The sample code we have below uses PHP to create the post loop and uses JavaScript to render the map and the markers.
<!-- Your map will be rendered here. Apply css for width and height. -->
<div id="map"></div>
<script>
<!-- Create variable "map" -->
var map;
<!-- Initiate/render map with this function -->
function initMap() {
<!-- Edit latitude and longitude coordinates to focus on a specific region on the map -->
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 35.7932977, lng: -78.6551929 },
scrollwheel: false,
zoom: 11
});
}
<!-- This is the function to add markers for each post. This includes the marker, the information window, and a function to show info when clicked -->
function addMarker(props) {
var marker = new google.maps.Marker({
position: props.coords,
map: map
});
var infoWindow = new google.maps.InfoWindow({
content: props.content
});
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
}
</script>
<script>
<!-- Loop the posts and get their coordinates for the markers -->
<?php
$args = array(
'post_type' => 'restaurants',
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'DESC',
'posts_per_page' => -1,
);
$all_maps_loop = new WP_Query( $args ); ?>
function renderTheMarkers() {
<?php if ( $all_maps_loop->have_posts() ) : while ( $all_maps_loop->have_posts() ) : $all_maps_loop->the_post(); ?>
<?php if ( have_rows('map') ): while ( have_rows('map') ): the_row();
$map_lat = get_sub_field('latitude');
$map_lng = get_sub_field('longitude');
?>
addMarker({coords:{lat: <?php echo $map_lat; ?>, lng: <?php echo $map_lng; ?>},
content:'<?php the_post_thumbnail('thumbnail'); ?><h5><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h5>'});
<?php endwhile; endif; ?>
}
</script>
<!-- Your Google Maps API -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<script>
<!-- Call the function that renders all the markers on the map -->
jQuery(document).ready(function() {
renderTheMarkers();
});
</script>Here’s what’s happening:
1.) First create/initiate the map using the initMap() function of Google Maps (Line 8). You’ll need a Google Maps API key first from Google to be able to call this function and make use of its other properties (Line 59). This is done in Javascript.
2.) Next is to create a function that generates the marker when coordinates are passed to it as its parameter (Line 17). This is done in JavaScript as well.
This function that we called addMarker() will add the markers on the map and will open a pop up or info window when clicked.
3.) Next is to loop the Restaurants post but in this case we will only get the contents of the Maps field from those posts (Line 31). We will use PHP to create a new query for the loop which will be generated within the renderTheMarkers() JavaScript function.
The loop will create a list of addMarker() functions that takes the latitude and longitude coordinates of each post and uses them for the “position” property for the marker.
We’ve also used a “content” property where the title of the post, its featured image, and permalink are also being called to be added in the info windows.
4.) Last, since all of these looped addMarker() functions are only encapsulated within another parent function called renderTheMarkers() (Line 43), we still need to call that function to finally render all those markers on the map. We called that function on Line 63.