Google Maps error: Oops! Something went wrong. This page didn't load Google Maps correctly

浪尽此生 提交于 2019-11-30 23:50:35

问题


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', 'fastdirectlink@legalmail.com <br /> g.manzo@fastdirectlink.com', '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', 'albe.fiocchi@gmail.com', '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', 'i.tammaro@fastdirectlink.com', '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', 'jerryyocum835@yahoo.com', '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', 'italia@optimconsulting.net', '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"/>

回答1:


Quick F12 to developer console and reload gives:

MissingKeyMapError and points to https://developers.google.com/maps/documentation/javascript/error-messages for reference.




回答2:


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.




回答3:


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



来源:https://stackoverflow.com/questions/38160006/google-maps-error-oops-something-went-wrong-this-page-didnt-load-google-maps

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!