Vikas Kumar:

In my page, I have at least 3 Ajax calls and all of them call separate functions that create some new markers on same Google map.

On the top of script, I have defined initMap function that creates a basic map in global map variable.

But now, sometimes everything works, but sometimes it shows following error when a function is called from at least one of Ajax methods.

InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama

I believe this may be because of Async nature of jQuery Ajax method.

To fix this, I tried checking if map is defined or not, whenever response came in Ajax methods. All of them never show like map is undefined. But still there's issue.

So I can't even check if map doesn't exists, call initMap() again. Further, I can't call map again and again because it will replace all markers for other functions.

Here's basic code structure that will help you understand:

var map;

function initMap(){
}
initMap();

$.ajax({
 //FUNCTION 1 IS CALLED HERE
});


$.ajax({
 //FUNCTION 2 IS CALLED HERE
});


$.ajax({
 //FUNCTION 3 IS CALLED HERE
});

function Func1(){
}

function Func2(){
}

function Func3(){
}

One more important thing: This issue is observed more in Chrome browser.

Is there any way to do this successfully?

EDIT:

I got the real issue. Everything is fine in my code. The problem is that Google map is loaded twice, 1 is by default (by PrestaShop) and one I'm adding. Now I could use the default loaded map but it shows error that Google map API Key is missing. So how can I append that key without loading map twice?