8
La prima volta che chiedi a StackOverflow, quindi sii paziente se infrango qualche regola, ho fatto del mio meglio per risolvere da solo la ricerca di una soluzione, ma non ho avuto fortuna.Errore di Google Maps: Oops! Qualcosa è andato storto. Questa pagina non ha caricato correttamente Google Maps
Ho utilizzato uno strumento per aiutarmi a personalizzare una mappa di google con più indicatori di posizione e stili (codice di seguito). Lo collaudo localmente e sul mio dominio e funziona bene. Quando pubblico sul sito di produzione, mostra per un po 'poi compare un messaggio di errore
"Oops! Something went wrong. This page didn't load Google Maps correctly. See the >JavaScript console for technical details"
console JavaScript su Firefox solo segnala un errore, non credo CORRELATI: "API a schermo intero è deprecato"
Ho provato anche a ottenere una (nuova) API KEY dalla Google Developer Console e inserirla nel link di richiesta API come descritto nella documentazione di Google (senza fortuna). Ho verificato la proprietà del sito su Google Search Console. Comunque penso che non sia il mio caso, perché il dominio è recente e la console non riporta alcun errore su API KEY.
Davvero chiedendosi cosa c'è che non va. Ecco una demo non funziona: http://www.fastdirectlink.com/map.html Ecco un lavoro demo: http://tiikeridesign.com/map.html
Qui è il codice che ho usato
<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"/>
Grazie per la risposta. Sì, questo era il problema, l'ho capito solo con la console di Google Chrome, così ho fatto un altro tentativo inserendo nuovamente la chiave nella richiesta di collegamento API di google maps e ha funzionato. Davvero non capisco perché, quando ho provato prima, non ha funzionato ... –
no probs - potresti spuntare questa come risposta!Incidentalmente ho usato Firefox più recentemente su un devbox di Ubuntu, poiché recentemente Chrome sembra congelare l'intera macchina a volte quando c'è stato un errore di codifica – Datadimension