Support

Account

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

Solving

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: http://teasandkeys.com/restaurants/atomic-pizza

    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>
    </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: http://www.advancedcustomfields.com/resources/google-map/

    Source for WP Enqueue Script: http://codex.wordpress.org/Function_Reference/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.

    CSS

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

    JS
    `jQuery(‘.acf-map’).each(function () {
    render_map($(this));
    });`

    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.

    USE FUNCTION
    echo get_location_map(get_field('map'));

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

You must be logged in to reply to this topic.