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
– Cerbrus, Commented May 22, 2015 at 14:38
Wouldn't this work: if(!google){scriptNode = document.createElement('script'); //...} ?¿ — A. Wolff
– A. Wolff, Commented May 22, 2015 at 14:39
You could try getJSON() jQuery function, similar to this question: load google maps api via ajax — mk117
– mk117, Commented May 22, 2015 at 14:44
Or this: $.getScript(MyGMap.GMapScriptURL + CurrentKey + "&callback=MyGMap.InitializeMaps");, question answered here — mk117
– mk117, Commented May 22, 2015 at 14:45
LOL. Good catch A Wolff. @benmandv, better get a new API key because it's still in the edit history — mydoglixu
– mydoglixu, Commented May 22, 2015 at 15:29

Community · Accepted Answer · 2017-05-23 11:58:10Z

0

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

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered May 22, 2015 at 19:40

benmandv

298 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ajax Wordpress and Google Maps

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related