Reputation: 119
Google Maps error: Oops! Something went wrong. This page didn't load Google Maps correctly
First time asking on stackoverflow, so be patient if I break some rule, tried my best to solve by myself searching for a solution, but had no luck.
I used a tool to help me customize a google map with multiple markers location and styles (code below). I test it local and on my own domain and it's working good. When I publish it on the production site, it shows for a while then an error message appear
"Oops! Something went wrong. This page didn't load Google Maps correctly. See the >JavaScript console for technical details"
Javascript console on Firefox just report an error, I think not related: "API Fullscreen is deprecated"
I tried also by getting a (new) API KEY from Google Developer Console and insert it in the API request link as described in Google documentation (no luck). I verified the ownership of the site on Google Search Console. Anyway I think this is not my case, cause domain is recent and console don't report any error about API KEY.
Really wondering what's wrong. Here is a demo not working: http://www.fastdirectlink.com/map.html Here is a demo working: http://tiikeridesign.com/map.html
Here is the code I used
<script src='https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js'></script>
<script>
google.maps.event.addDomListener(window, 'load', init);
var map;
function init() {
var mapOptions = {
center: new google.maps.LatLng(45.0735671,7.67406040000003),
zoom: 2,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
},
disableDoubleClickZoom: false,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
},
scaleControl: true,
scrollwheel: true,
panControl: true,
streetViewControl: true,
draggable : true,
overviewMapControl: true,
overviewMapControlOptions: {
opened: true,
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#d3d3d3" }
]
},{
"featureType": "transit",
"stylers": [
{ "color": "#808080" },
{ "visibility": "off" }
]
},{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{ "visibility": "on" },
{ "color": "#b3b3b3" }
]
},{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#ffffff" },
{ "weight": 1.8 }
]
},{
"featureType": "road.local",
"elementType": "geometry.stroke",
"stylers": [
{ "color": "#d7d7d7" }
]
},{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#ebebeb" }
]
},{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{ "color": "#a7a7a7" }
]
},{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#efefef" }
]
},{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{ "color": "#696969" }
]
},{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#737373" }
]
},{
"featureType": "poi",
"elementType": "labels.icon",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road.arterial",
"elementType": "geometry.stroke",
"stylers": [
{ "color": "#d6d6d6" }
]
},{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
{ "visibility": "off" }
]
},{
},{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#dadada" }
]
}
],
}
var mapElement = document.getElementById('map-canvas');
var map = new google.maps.Map(mapElement, mapOptions);
var locations = [
['Headquarter', '<address>Via Ottavio Assarotti, 10 - Torino <br /> 10122 Italy</address>', 'Phone: +39 011 549444', 'undefined', 'undefined', 45.0735671, 7.67406040000003, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png'],['Offices - Europe', 'Str. del Redentore Alto, 157 Moncalieri TO\"<br />10024 Italy', 'Phone: +39 011 0603933 <br /> Mobile: +39 335 8291680', '[email protected] <br /> [email protected]', 'undefined', 45.026912, 7.735915, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png'],['Russia', 'Alberto Fiocchi<br />16, Teterinskiy Pereulok <br />109004 Moscow (Russia)', 'Mobile: +7 985 8546283', '[email protected]', 'undefined', 55.7453888, 37.65318679999996, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png'],['China', 'Ines Tammaro<br />Yangtze river international garden phase II<br />Shanghai China', 'Phone: +86 158 9648 1992 Mobile: +86 331 2166946', '[email protected]', 'undefined', 31.104447, 121.432655, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png'],['USA', 'Jerry Yocum<br />835, Bunty Station Road,<br />43015 Delaware, OH – USA', 'Phone: +1 (614) 7361111', '[email protected]', 'undefined', 40.250594, -83.07493899999997, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png'],['ASIAN', 'Hubert Fournier<br />116, Middle Road, ICB Enterprise House,<br />#08-03/04, 188972 Singapore', 'Phone: (65) 63339833', '[email protected]', 'undefined', 1.2992375, 103.7835042, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png']
];
for (i = 0; i < locations.length; i++) {
if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];}
marker = new google.maps.Marker({
icon: markericon,
position: new google.maps.LatLng(locations[i][5], locations[i][6]),
map: map,
title: locations[i][0],
desc: description,
tel: telephone,
email: email,
web: web
});
link = ''; bindInfoWindow(marker, map, locations[i][0], description, telephone, email, web, link);
}
function bindInfoWindow(marker, map, title, desc, telephone, email, web, link) {
var infoWindowVisible = (function () {
var currentlyVisible = false;
return function (visible) {
if (visible !== undefined) {
currentlyVisible = visible;
}
return currentlyVisible;
};
}());
iw = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
if (infoWindowVisible()) {
iw.close();
infoWindowVisible(false);
} else {
var html= "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><h4>"+title+"</h4><p>"+desc+"<p><p>"+telephone+"<p><a href='mailto:"+email+"' >"+email+"<a></div>";
iw = new google.maps.InfoWindow({content:html});
iw.open(map,marker);
infoWindowVisible(true);
}
});
google.maps.event.addListener(iw, 'closeclick', function () {
infoWindowVisible(false);
});
}
}
</script>
<style>
#map-canvas {
height:400px;
width:1024px;
}
.gm-style-iw * {
display: block;
width: 100%;
}
.gm-style-iw h4, .gm-style-iw p {
margin: 0;
padding: 0;
}
.gm-style-iw a {
color: #4272db;
}
</style>
<div id="map-canvas"/>
Upvotes: 10
Views: 88311
Answers (5)
Reputation: 1
I have an api key, the maps all load fine with web pages on the computer... but not while loading the same pages and maps on a mobile, this goes for normal web page maps and mobile web page maps... computer fine but mobile returns the Sorry! Something went wrong. This page didn't load Google Maps correctly! See Javascript console.... but javascript console doesn't return any errors! I have checked the web pages that load the maps on iPhone and Samsung and they return the error, same pages from a computer browser and they load without error, same urls!
So eventually I discovered the error: I added the url in the Google maps api account with www.domain.... while this did not appear to be an issue with browsers on my computer, it did on mobile phones... so I found that adding 2 URL's in the api www.domain.com/page and domain.com/page fixed the error, and the maps loaded on mobile devices as well as on computers!
Upvotes: 0
Reputation: 370
In my case, it was a restriction related issue. I had used wildcards as suggested by the example in the "Website restrictions" in the Google console
*example.com/*
the wildcard did not work! I had to use the complete address of the page on which the API was implemented.
mysite.com/contact-page/
I hope this is of help for someone.
Upvotes: 0
Reputation: 7130
in google latest update you should add your key for each script for googleapis.com (otherwise google map will not working)i.e
<script src="http://maps.googleapis.com/maps/api/js?key=your_key"></script>
and if you want to use other features like places,geoloaction then add below line also
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&key=your_key" async="" defer="defer" type="text/javascript"></script>
Note:for places,geolocation and other features you should enable it from google console for more detail about features enabling check this out
https://stackoverflow.com/a/41079098/6295712
Upvotes: 3
Reputation: 435
I encountered the same problem. My page suddenly started showing grey window and the error instead of the map which was working fine till some time back.
I looked for the solution. It turned out that the the google map API requires developer key since few days ago. Register for the Google Api key and mention it in your code.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap" async defer></script>
Get YOUR_KEY from google api console. My map works good now.
Upvotes: 15
Reputation: 1055
Quick F12 to developer console and reload gives:
MissingKeyMapError and points to https://developers.google.com/maps/documentation/javascript/error-messages for reference.
Upvotes: 9
Related Questions
- Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details
- How to fix "this page can't load google maps correctly" error
- Google Maps API - Map Is Not Loaded
- Google maps v3 Error
- Google Maps Javascript API not loading correctly
- google maps api does not load the map
- Google maps API not loading properly
- Google Maps API Loading Issue
- google maps not loading, showing just a '
- Problem Loading Google Maps API