Loading Google Maps API via AJAX, console error
I am creating a fully dynamic website using jquery / javascript, ajax and php.
When I click on the navigation link, the browser opens that page with ajax.
So basically all pages are loaded within the same index.php.
If I go to the Location tab where I have a google map, it will dynamically load Google Maps script (adding a script tag to the body).
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initialize"></script>
This script is loaded automatically by the previous script
<script src="https://maps.gstatic.com/maps-api-v3/api/js/19/1/intl/hr_ALL/main.js"></script>
When I leave the Location page, I check for the scripts and their removal.
If I go back to Location without refreshing the page, I thought the map would have a clean start, but I get this error in the console:
You have enabled the Google Maps API several times on this page. This can cause unexpected errors.
Even though the scripts were removed previously and the map and content were changed to something else, I am getting this error.
Since I know I only have one instance of the map, should I just ignore it?
Or it does have some kind of link to an old map and removing the two scripts just isn't enough.
Thanks for any information!
source to share
Removing script elements will not delete the objects created by those scripts (it will generally have no effect).
Check if the maps API is already loaded:
<script>
jQuery(function(){
if(!window.google||!window.google.maps){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3&' +
'callback=initialize';
document.body.appendChild(script);
}
else{
initialize();
}});
</script>
source to share