Menu
I have a Google Maps application that works perfectly on multiple developer machines but fails to run when deployed to an Internet facing Web server.
The developer machines all access the application using
http://localhost
However on the Internet facing web server the application is of course accessed via a valid domain
http://<Some Domain>/<application>
Debugging on the browser side I see that the last call made from the browser is
https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1shttp://<the proper domain>/corpsuser/User_Page.html&callback=_xdc_._9p58yx&token=125651
(Domain name masked)
The Maps application code where things hang seems to be the javascript:
map = new google.maps.Map(document.getElementById('map'), mapOptions);
The element 'map' and object mapOptions are properly defined (after all, app works fine on dev machines)
I am guessing this is a licensing/Key issue.
I logged in to the Google Account used for enabling the Google Maps API and generated browser key and also added/associated the domain to the key but that didn't work. Noticed that there is a message that said it could take up to 5 minutes for changes to reflect. So waited for some time and still no luck.
Digging deeper, I saw that some of the calls, for example the snapToRoads API take in the Server API Key as a parameter.
However the call where the application hangs is the first call to setup the map and does not take in the API key.
The google documentation says I need to use this tag somewhere
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>
Where should I add it? and Do I have to define the initMap function? or should it be used as-is?
Any help would be greatly appreciated.
313
Here is a sample code in where you need to place the line <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
</html>
You will notice that all example in these documentation uses that line, because you need this to load the Google Maps JavaScript API.
For the callback parameter, it explains here that when the async attributes lets the browser render the website while the Maps JavaScript API loads, when the API is ready, it will call the function specified using the callback parameter.
61
I had this problem and it turned out be related to caching. Some of the code involved in the loading and display of maps was in an external .js file that was being cached by Cloudflare. When I deployed to production, it was still using the old js. I needed to manually purge the cache within Cloudflare.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
