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?
