Create Multiple Marker Map from ACF Google Map Location Field from a CPT

Here is a rundown on how to get a multiple marker Google map on a page that contains markers for a business dealer that has it’s own Custom Post Type (CPT). Each dealer has it’s own CPT with an individual map location marker and also another agnostic page that has all the dealers map markers in a multimarker map.

The guide uses Genesis hooks to insert content but can easily be adapted to other themes by using native theme hooks or shortcode I have added a shortcode alternative in the code snippets that can be added anywhere.

 

Set Up Your CPT

Create your CPT this example uses dealer. I use a CPT code gist I am familiar with for CPTs, a plugin alternative option which is excellent is WebDev CPTui.

Create ACF Field Group

Get ACF Pro and create a new field group, in the group add your required fields for the CPT and include the location field as a Google Map field type.

Set the ACF field group to appear on the dealer CPT.

Get Your Google Map API

Get a Google API Map Key – click on Get a Key

Once you have the API add it via your functions.php

add_action('acf/init', 'my_acf_init');
/* Google Maps API */

function my_acf_init() {

acf_update_setting('google_api_key', 'xxxxxxx');
}

This is for ACF PRO – if you have regular ACF use this function instead.

Create your ACF Google Map Javascript Code

Add a JS file in your /js theme folder – this example uses dealer.js

Original JS from ACF here. Mine is slightly modified.

Set Up ACF JS and API Dependencies

You need to enqueue the ACF JS and Goole Map API files for output to render.

Add a bit of CSS

.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;
}

 

Display Single CPT Map Field

So first if you are also displaying the Google Map as a single map on the dealer CPT you’ll need to output the custom location map field and fire the JS and API files – here I am adding this code directly in the CPT template – so in my single-dealer.php

 

Display Multiple Markers in one map for all CPT dealer posts

I have created a custom page page-all-dealers.php which I am outputting one map with all the markers using a while loop

The cool thing here is you can add what you want in between the .marker div and this will appear in the pop up when you click the marker, here I have added the_permalink() so when clicked will go to the original post!

Having a Zoomed out Map with Multiple Markers

If you have a more localised spread of locations, you may want to set the zoom level a bit more zoomed in. This is controlled in the javascript Google map code previously enqueued in the center_map function under the else statement for multiple markers – try a value between 10 – 14

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.setCenter( bounds.getCenter() );
	   	map.setZoom( 11 ); // Change the zoom value as required
		//map.fitBounds( bounds ); // This is the default setting which I have uncommented to stop the World Map being repeated
	}

}

Shortcodes for Map Output

Single shortcode [themeprefix_single_marker]

 

Multiple shortcode [themeprefix_multiple_marker]