Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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"/>
like image 606
Tiikeri Design Avatar asked Jul 02 '16 12:07

Tiikeri Design


People also ask

Why this page can't load Google Maps correctly?

Unless a valid API key is present, the map will be displayed in a lower resolution and will have a watermark on it. If the credit card linked to the account is invalid or the number of free map views is surpassed, the "This Page Can't Load Google Maps Correctly" error will show up.

Why does Google Maps say something went wrong?

This error means that one or more of the required Google Maps APIs have not been enabled in your Google console. Usually this isn't needed as they are enabled when you create an API key but sometimes they have to be enabled manually.


1 Answers

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.

like image 83
ashish Avatar answered Sep 20 '22 23:09

ashish