Displaying A Google Map On Front-End

• mpridham

• November 26, 2015 at 2:45 am

Hello,

Does anyone have a straight-forward explanation of how to display a Google Map on a custom post type?

I’ve read through the documentation but I am a bit lost.

I am creating a website for an apartment property management company and have created a custom post type of “Properties”. I have ACFs for each of the items (Address, number of bedrooms, paerking, gallery, etc) and have them all working. But I can’t seem to get the map to display.

Any help would be appreciated.

Thanks

• gummi

• November 26, 2015 at 6:33 pm

Suggest you to use the google map field for the address.

ACF will also return you the longitude and latitude along with the address. With the longitude and latitude, then you are able to work with google map. Because to add a pin(marker) on google map, it requires a longlat value.

take a look at the google map field documentation.

http://www.advancedcustomfields.com/resources/google-map/

• Jonathan

• November 26, 2015 at 6:35 pm

Hi @mpridham

The documentation for the google maps field gives you everything you need to get it working.. You can basically copy the entire example and just switch out the field name.
http://www.advancedcustomfields.com/resources/google-map/

All the JS goes in your themes script.js file (or similar) and the PHP/HTML in the template file you want the map to be displayed in. It would need to be inside the loop of the page where the field is applied in admin just like any other ACF field (Or set the second parameter which is the post ID).

• eadwig

• March 28, 2018 at 9:21 pm

Hello

I got Google Maps showing gray (https://ibb.co/mhsPs7) after copying all the required code given at https://www.advancedcustomfields.com/resources/google-map/
into an single post template, entering an address in the map field and replacing every $location value to the one set in the ACF edit screen.

The Console tab of Chrome/Firefox returns no error. Would someone please shed some light on this? I spent two days and am not getting anywhere….

Thank you,

Ead

• tylerlwsmith

• April 11, 2018 at 9:19 pm

This is a pretty old thread so I apologize for bringing it back from the dead. I was also pretty confused by the maps documentation and it seemed like a lot of work and JavaScript to generate just one map, so I came up with a work around that uses the Google Maps Embed API in addition to the Google Maps JS API.

Code is below, and also available as a gist here. Because it uses both the JS API and Embed API, you’ll need to generate keys for both.

To make the map, all you’ll need to do is call acf_make_map( get_field( ‘your_google_map_field_name’ ) );

<?php
/**
 * Set constants for Google Maps JS API key--used for ACF's backend map--and Google Maps
 * Embed API Key, used for generating maps on the site front end.
 *
 * @link https://developers.google.com/maps/documentation/javascript/get-api-key
 * @link https://developers.google.com/maps/documentation/embed/get-api-key
 */
const GOOGLE_MAPS_JS_API_KEY = 'MAPS-JS-API-KEY';
const GOOGLE_MAPS_EMBED_API_KEY = 'MAPS-EMBED-API-KEY';
/**
 * Hook Maps JS API into ACF intialization.
 */
function add_google_map_to_acf_init() {
    acf_update_setting( 'google_api_key', GOOGLE_MAPS_JS_API_KEY );
}
add_action( 'acf/init', 'add_google_map_to_acf_init' );
/**
 * Pass in ACF Google Map field to generate HTML for
 * Google maps embed on the front end of the site.
 *
 * @param array  $acf_map_field  The array generated by ACF Google Maps field.
 *
 * @link https://developers.google.com/maps/documentation/embed/guide
 */
function acf_make_map( $acf_map_field ){
    $address_field = $acf_map_field['address'];
    $encoded_address = urlencode( $address_field );
    echo '
        <iframe
            width="600"
            height="450"
            frameborder="0" style="border:0"
            src="https://www.google.com/maps/embed/v1/place?key=' . GOOGLE_MAPS_EMBED_API_KEY . '&q=' . $encoded_address . '" allowfullscreen>
        </iframe>';
}

• bertusdeleeuw

• April 8, 2020 at 11:01 pm

Hi there,
How do I put the acf_make_map( get_field( ‘your_google_map_field_name’ ) ); in my page?
Thanks,
Bertus.