Ajax Wordpress and Google Maps

Question

I'm using a ajax plugin (Ajaxify Wordpress Site) for my Wordpress site and I've managed to get Google maps to work but I'm getting the error "You have included the Google Maps API multiple times on this page".

I've enqueued the Google Maps script in my functions file and included the following code in my js file:

var map;
function initialize() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644)
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
} 
google.maps.event.addDomListener(window, 'load', initialize);

To get the Ajax plugin to reload the Google Maps script I added this code to the plugin js, which is where I think the problem is:

scriptNode = document.createElement('script');
contentNode.appendChild(scriptNode);
scriptNode.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' +
    '&signed_in=true&callback=initialize');
scriptNode = document.createElement('script');

Any ideas?

I hope you didn't just post your own google api key in there... — Cerbrus, May 22 '15 at 14:38
Wouldn't this work: `if(!google){scriptNode = document.createElement('script'); //...}` **?¿** — A. Wolff, May 22 '15 at 14:39
You could try getJSON() jQuery function, similar to this question: [load google maps api via ajax](http://stackoverflow.com/questions/2811787/jquery-how-can-i-load-the-google-maps-api-via-ajax) — mk117, May 22 '15 at 14:44
Or this: `$.getScript(MyGMap.GMapScriptURL + CurrentKey + "&callback=MyGMap.InitializeMaps");`, question answered [here](http://stackoverflow.com/questions/2965898/jquery-getscript-and-google-maps-api-error-message) — mk117, May 22 '15 at 14:45
LOL. Good catch A Wolff. @benmandv, better get a new API key because it's still in the edit history — mydoglixu, May 22 '15 at 15:29
Thanks for the replies. Still can't get it working, I tried the suggestion from A Wolff so far (Apologies I'm still learning jquery and javascript!) The only way so far I can get the map to load is with my original script but obviously it keeps reloading the maps API unnecessarily. — benmandv, May 22 '15 at 18:14

score 0 · Answer 1 · edited May 23 '17 at 11:58

In the end, I went for a variation of this from How to check if Google Maps API is loaded?:

function appendBootstrap() {
if (typeof google === 'object' && typeof google.maps === 'object') {
    handleApiReady();
} else {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=handleApiReady";
    document.body.appendChild(script);
}
}

function handleApiReady() {
var myLatlng = new google.maps.LatLng(39.51728, 34.765211);
var myOptions = {
  zoom: 6,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 }

Ajax Wordpress and Google Maps

1 Answers1