Say "Hello!"

  • This field is for validation purposes and should be left unchanged.

What We’ll Cover in the Google Maps with Multiple Markers Tutorial

  • Custom script to render the google map with unique thumbnail markers and a detailed/custom information box upon click
  • Custom WordPress page template to populate Google Maps with multiple markers
  • Custom WordPress functions to generate image sizes and enqueue scripts
  • Custom CSS to style map and markers

Here’s the GitHub repository to download the files.

I am going to assume you have WordPress installed and the ACF plugin. This tutorial uses:

Google Maps *Update 7/12/16*

Changes have been made to the Google Maps API plugin. You may now be required to generate and API key with your Google account. Please refer to the following articles to generate and set your Google Maps API keys.

  1. Get a Google Maps JavaScript API browser key
  2. Get a Google Maps Geocoding server key

Make A WordPress Page Template

Make a new folder within your theme called page-templates and add a new php file google-map.php with the following code. (When you start adding more page templates, this is a good way to organize them.)

Make a Page in WordPress with the New Template

Make a new page and select the Google Map page template. Once the template is selected, the Google Map field group will load below the WYSIWYG editor (unless specified to display elsewhere).

WordPress-Page-Template-for-ACF-Google-Map

Using Advanced Custom Fields (ACF)

Advanced Custom Fields is by far one of the best and my favorite WordPress plugins. I highly recommend purchasing the PRO version. (Note: I am using the PRO repeater field in this example, but I plan to update this for non-PRO users) You can purchase a one-time single ($25) or developer license ($100). I promise – it’s worth it!

If you’d like to render only one marker on a map or review the documentation for the Google map field, here’s an overview.

Create a Google Map ACF Field Group

This example uses the PRO Repeater field. I’ll have to update this for free ACF users. Make sure your Image sub field is an Image Array. Select the rule for your Google Map field group to show only on Google Map template pages.

ACF-Google-Map-Field

Google Maps with Advanced Custom Fields JavaScript

Make a new folder in your theme called js and add a new file acf-map.js with the following code.

Register and Enqueue Google Map Scripts

In functions.php, register the Google Maps API and the acf-map.js we just created. The following code shows how we’ll enqueue the Google Map scripts only on our page template.

Add Custom Image Sizes

In functions.php, Lines 3-4 adds an image size for WordPress to generate a smaller thumbnail for unique marker thumbnails to be generated on the map. You will also need to make sure your theme supports post thumbnails. Any new images uploaded will generate this custom image size automatically. Images already uploaded to your media library will need to be regenerated. I suggest using the plugin Force Regenerate Thumbnails.

ACF Map CSS

Add these styles to your style.css or make a new stylesheet and register and enqueue it respectively.

Customize Your Google Map with Styles

Using Snazzy Maps or another Google Map theme creator, copy the generated styles and replace the styles: on line 28 of acf-map.js. Here’s our final map.

Final-ACF-Google-Map-Example

You can change the width and height as you wish, in the ACF Group field or with CSS.

Enjoy your beautiful and complex Google Map! Please message me if this documentation left out any critical information.

Ashley Cameron logo
Blog