Adding google maps api to a wordpress theme

3 Views

I’ve searching all morning and not wanting to ask this questions, i’m stuck and I can’t waste anymore time on this so I apologise in advance for this question but I need help.

I’m trying to implement google maps into my wordpress theme, i’ve been following the attached link

Read More

https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map#the_basic_html_page

This was pretty basic and I done this in about 2 minutes but i’m trying to add a location marker, you know the one, a red marker with the name besides it.

I also do not know who to speed the loading time up.

I load the google api in the functions.php using the following 

wp_enqueue_script('google_maps_api', 'https://maps.googleapis.com/maps/api/js');
wp_enqueue_script( 'google_maps_api' );

And here’s the query that’s in my footer at the moment 

jQuery(document).ready(function($) {
function initialize() {
    var map_canvas = document.getElementById('map_canvas');
    var myLatlng = new google.maps.LatLng(51.7710638, -0.44211749999999483);

    var map_options = {
        center: myLatlng,
        zoom: 16,
        scrollwheel: false,
        navigationControl: false,
        mapTypeControl: false,
        scaleControl: false,
        draggable: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Hello World!'
    });
    var map = new google.maps.Map(map_canvas, map_options, marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
});

the maps shows although slow to load but the marker does not show at all

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. You must first define the map and only then add the marker. As for speeding up the loading I don’t think this is possible. You could take your code out of the jQuery(document).ready(function ($) { function as you are adding your own listener via google.maps.event.addDomListener(window, 'load', initialize);

    jQuery(document).ready(function ($) {
    function initialize() {
        var map_canvas = document.getElementById('map_canvas');
        var myLatlng = new google.maps.LatLng(51.7710638, -0.44211749999999483);

        var map_options = {
            center: myLatlng,
            zoom: 16,
            scrollwheel: false,
            navigationControl: false,
            mapTypeControl: false,
            scaleControl: false,
            draggable: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        // First define the map and then add the marker.
        var map = new google.maps.Map(map_canvas, map_options);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Hello World!'
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
});