La première fois demander sur stackoverflow, alors soyez patient si je casse une règle, a essayé de mon mieux pour résoudre par moi-même la recherche d'une solution, mais n'a pas eu de chance.
J'ai utilisé un outil pour me aider découper une carte google avec plusieurs marqueurs emplacement et styles (code ci-dessous). Je le tester local et sur mon propre domaine et bon travail de lui. Quand je publie sur le site de production, il montre pendant un certain temps alors un message d'erreur apparaît p>
"Oops! Quelque chose a mal tourné. Cette page n'a pas été chargé correctement Google Maps. Voir la> Console JavaScript pour plus de détails techniques" p> Blockquote>
console Javascript sur Firefox signaler juste une erreur, je ne crois pas lié: "API Fullscreen est dépréciée" p>
J'ai essayé aussi en obtenant un (nouveau) API KEY de Google Developer Console et l'insérer dans le lien de requête API comme décrit dans la documentation Google (pas de chance). J'ai vérifié la propriété du site sur Google Search Console. Quoi qu'il en soit, je pense que ce n'est pas mon cas, la cause est récente domaine et la console ne signalent aucune erreur sur les API KEY. P>
me demandais vraiment ce qui ne va pas. Voici une démo ne fonctionne pas: http://www.fastdirectlink.com/map.html Voici un travail de démonstration: http://tiikeridesign.com/map.html p>
Voici le code je p>
<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"/>
5 Réponses :
Console de développement rapide F12 à Developer donne:
mancheKeymaperror et pointe vers https://developers.google.com/maps/documentation/javascript/error-mesages pour référence.
Merci pour la réponse. Oui, c'était le problème, je l'ai compris uniquement avec Google Chrome Console. Ainsi en faisait un autre essai en insérant à nouveau la clé dans la demande de lien API Google Maps et cela a fonctionné. Vraiment, ne comprends pas pourquoi, quand j'ai essayé cela avant, ça n'a pas fonctionné ...
Pas de probs - pourriez-vous cocher cela comme la réponse! Il y a de temps que j'ai utilisé Firefox plus récemment sur un Ubuntu devbox, récemment, Chrome semble geler la machine entière parfois lorsqu'il y a eu une erreur de codage
J'ai rencontré le même problème. Ma page a soudainement commencé à montrer une fenêtre grise et de l'erreur au lieu de la carte qui fonctionnait bien jusqu'au bout de temps.
J'ai cherché la solution. Il s'est avéré que l'API Google Map a besoin de la clé de développeur depuis quelques jours. Inscrivez-vous à la touche API Google et mentionnez-la dans votre code. P>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap" async defer></script>
C'était la solution à mon problème. Merci!
Dans Google Dernate Update, vous devez ajouter votre clé pour chaque script pour googleapis.com (sinon Google Map ne fonctionnera pas) IE
<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>
Dans mon cas, c'était une question liée à la restriction. J'avais utilisé des caractères génériques comme suggéré par l'exemple dans les "restrictions de site Web" dans la console Google La carte générique n'a pas fonctionné!
J'ai dû utiliser l'adresse complète de la page sur laquelle l'API a été mise en œuvre. P> mysite.com/contact-page/
J'ai une touche API, les cartes ne chargent toutes bien avec les pages Web de l'ordinateur ... mais pas lors du chargement des mêmes pages et des mêmes cartes sur un mobile, cela va pour les cartes de page Web normales et des cartes de page Web mobiles .. . Ordinateur bien mais mobile retourne le désolé! Quelque chose s'est mal passé. Cette page n'a pas chargé correctement Google Maps! Voir la console JavaScript .... Mais la console JavaScript ne renvoie aucune erreur! J'ai vérifié les pages Web qui chargent les cartes sur iPhone et Samsung et renvoient l'erreur, mêmes pages à partir d'un navigateur d'ordinateur et ils se chargent sans erreur, mêmes URL!
Alors, j'ai fini par découvrir l'erreur: J'ai ajouté l'URL dans le compte de l'API Google Maps avec www.domain .... Bien que cela ne soit pas semblable à être un problème avec les navigateurs sur mon ordinateur, il a fait sur les téléphones mobiles ... Donc j'ai constaté que l'ajout de 2 URL dans le API www.domain.com/page et domaine.com/page corrigé l'erreur et les cartes chargées sur des appareils mobiles ainsi que sur les ordinateurs!