Home Forums Front-end Issues Google Map – How to display?


Google Map – How to display?

  • Posting this is my last resort; I have read the documentation, searched the forums and Googled extensively but I am still missing something…

    I have created a set of Custom Fields for a restaurant page and they are working beautifully, I just can’t get my Google Map to display. I am using a Magazine Pro child theme on the Genesis framework.

    I have created it in the back-end successfully with a Field Label of ‘Location’ and a Field Name of ‘restaurant_googlemap’. I have then gone into a Post and selected the location – all good so far.

    What I am struggling with is what code to add where to get the map to display. Where does the CSS/JS need to go? Everytime I add the code from the documentation to my function.php page I save it and the website white screens when I refresh.

    The existing code for the other fields is shown below and the page I want the map to display on is here:

    This is the final piece in the puzzle in this website development and I would be really grateful for any help. Thank you!

    //* [All Restaurant pages] Function to display values of custom fields (if not empty)
    function sk_display_custom_fields() {
    $restaurant_address    = get_field( 'restaurant_address' );
    $restaurant_website    = get_field( 'restaurant_website' );
    $restaurant_rating     = get_field( 'restaurant_rating' );
    $restaurant_phone      = get_field( 'restaurant_phone' );
    $restaurant_twitter    = get_field( 'restaurant_twitter' );
    $restaurant_facebook   = get_field( 'restaurant_facebook' );
    $restaurant_bittensays = get_field( 'restaurant_bittensays' );
    if ( $restaurant_address || $restaurant_website || $restaurant_rating || $restaurant_phone || $restaurant_twitter || $restaurant_facebook || $restaurant_bittensays ) {
    echo '<div class="restaurant-meta">';
    if ( $restaurant_address ) {
    echo '<p><strong>Address</strong>: <br />' . $restaurant_address . '</p>';
    if ( $restaurant_website ) {
    echo '<p><strong>Website</strong>: ' . $restaurant_website . '</p>';
    if ( $restaurant_rating ) {
    echo '<p><strong>Rating</strong>: ' . $restaurant_rating . '</p>';
    if ( $restaurant_phone ) {
    echo '<p><strong>Phone</strong>: ' . $restaurant_phone . '</p>';
    if ( $restaurant_twitter ) {
    echo '<p><strong>Twitter</strong>: ' . $restaurant_twitter . '</p>';
    if ( $restaurant_facebook ) {
    echo '<p><strong>Facebook</strong>: ' . $restaurant_facebook . '</p>';
    if ( $restaurant_bittensays ) {
    echo '<p><strong>Bitten Says</strong>: ' . $restaurant_bittensays . '</p>';
  • I think you can add this code in your function.

    $location = get_field('location');
    if( !empty($location) ){
    echo '<div class="acf-map">
    	<div class="marker" data-lat="'.$location['lat'].'" data-lng="'.$location['lng'].'"></div>

    Then with regards to your script and styles you can add it using wp_enqueue_script() a wordpress core function on adding css and js.

    Source for ACF Google Map:

    Source for WP Enqueue Script:

    Thats it definitely you can display the map on the frontend.

  • Thanks for the reply but I have already tried the code from the support resources. I am looking for help on the forums as I have already tried everything suggested and need advice.

  • I did try that code and its working fine on my part.


    .acf-map {
        width: 100%;
        height: 400px;
        border: 1px solid #80d3f1;
        margin: 20px 0;
    .acf-map .gmnoprint img {
        max-width: none; 

    `jQuery(‘.acf-map’).each(function () {

    HTML / PHP

    `function get_location_map($loc) {
    $str_ret =”;
    $str_ret .='<div class=”acf-map”>’;
    $str_ret .='<div class=”marker” data-lat=”‘.$loc[‘lat’].'” data-lng=”‘.$loc[‘lng’].'”></div>’;
    $str_ret .='</div>’;
    return $str_ret;

    $loc = will be your google map field.

    echo get_location_map(get_field('map'));

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Google Map – How to display?’ is closed to new replies.