Support

Account

Home Forums Front-end Issues how to implement google maps.

Solved

how to implement google maps.

  • i’m having some problems getting google maps to work. It’s working fine on the backend. but i can’t figure the front end out at all.

    Here’s what I did:
    in my functions.php:

    function rudtek_load_acf_map()
    {
        // Register the script like this for a theme:
        wp_register_script( 'map-script', get_stylesheet_directory_uri() . '/js/acf-map.js', array( 'jquery' ) );
        wp_register_script( 'googlemap', 'MYAPIKEY', true);
     
        // For either a plugin or a theme, you can then enqueue the script:
        wp_enqueue_script( 'map-script' );
        wp_enqueue_script( 'googlemap' );
    }
    add_action( 'wp_enqueue_scripts', 'rudtek_load_acf_map' );

    And then on in my template i loaded this:

    if (get_field('shop_address_map')){
    	$shopmapaddress= get_field('shop_address_map');
    	$shopmap = '<div class="acf-map"><div class="marker" data-lat="'.$shopmapaddress['lat'].'" data-lng="'.$shopmapaddress['lng'].'"></div>
    </div>';
    }
    echo $shopmap;

    and i placed this css in my template stylesheet:

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

    and placed a file in my template directory called: acf-map.js
    with the script noted in the map documentation.

    WHen the page loads i get a white box where my map should be but get this error in the console:

    ReferenceError: google is not defined. referring to here:

    // vars
    var args = {
    zoom : 16,
    center : new google.maps.LatLng(0, 0),
    mapTypeId : google.maps.MapTypeId.ROADMAP
    };

    what did i do wrong?

  • got it figured out. Thanks.

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

You must be logged in to reply to this topic.