Google maps api: callback=Initialisierung fehlschlägt?
So, das grundlegende problem, das ich versuche zu lösen ist, dass beim platzieren meiner google-Karte in das CMS, das ich verwende, bekomme ich eine "nicht erfasste Referenz-Fehler: google ist nicht definiert".
Nach dieser Antwort:
dies ist, weil ich brauche, um das laden der maps-api asyncronously. Aber diese Lösung scheint zu scheitern für mich.
Wie ich es verstehe, muss ich Anhängen "&callback=initialize" zu meinem api-url, so dass es wird:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=${KEY}&sensor=false&language=da&callback=initialize">
</script>sowie entfernen Sie die Zeile
google.maps.event.addDomListener(window, 'load', initialize);. Allerdings, wenn ich das Tue, meine Infoboxen Pause, ich bekomme Fehler wie
Uncaught TypeError: undefined is not a function VM344:1
Uncaught TypeError: Object #<InfoBox> has no method 'open' test1.html:112
Uncaught TypeError: Object #<InfoBox> has no method 'close' Ich fürchte, ich kann nicht herausfinden, wie man erstellen Sie ein jsFiddle für diese, aber bei http://www.kaarebmikkelsen.dk/wp-content/uploads/2014/06/test1.html ist die funktionierende version, die ich auch hier:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 500px;width:800px; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=${KEY}&sensor=false&language=da">
</script>
<script src="http://www.kaarebmikkelsen.dk/wp-content/uploads/2014/05/infobox_packed.js" type="text/javascript"></script>
<script type="text/javascript">
getTextWidth = function(text, font) {
//re-use canvas object for better performance
var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
var context = canvas.getContext("2d");
context.font = font;
var metrics = context.measureText(text);
return metrics.width;
};
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(56.3,11.266724),
zoom: 7,
mapTypeControl: false,
streetViewControl:false
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var yellowCircle={
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
fillColor: '#faeadd',
strokeColor: 'black',
fillOpacity: 1.0,
strokeWeight: 0.5,
zIndex:-10
};
var yellowBlackCircle={
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
fillColor: '#faeadd',
strokeColor: 'black',
fillOpacity: 1.0,
strokeWeight: 1.5
};
function createMarker(Lat,Lng, name,url) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(Lat,Lng),
map: map,
icon:yellowCircle,
url:url
});
google.maps.event.addListener(marker, 'mouseover', function() {
marker.setIcon(yellowBlackCircle);
});
google.maps.event.addListener(marker, 'mouseout', function() {
marker.setIcon(yellowCircle);
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = url;
});
var myOptions = {
content: name
,boxStyle: {
border: "1px solid black"
,textAlign: "center"
,fontSize: "12pt"
,fontType: "arial"
,backgroundColor: "#faeadd"
,fontWeight: "bold"
,zIndex:1
}
,disableAutoPan: true
,pixelOffset: new google.maps.Size(-getTextWidth(name, "bold 12pt arial")/2,-30)
,position: new google.maps.LatLng(49.47216, -123.76307)
,closeBoxURL: ""
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: true
,zIndex:1
};
var infobox = new InfoBox(myOptions);
google.maps.event.addListener(marker, 'mouseover', function() {
infobox.open(map,marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infobox.close();
});
return marker;
}
var m1=createMarker(55.373806,10.358844,"Gejst","http://bydk.nu/gejst");
var m2=createMarker(55.678385,12.580772,"Lomonto","http://bydk.nu/lomonto");
var m3=createMarker(55.708497,12.522273,"Place de Bleu","http://bydk.nu/place-de-bleu");
var m4=createMarker(55.156415,8.768423,"Vibegaard","http://bydk.nu/vibegaard");
var m5=createMarker(55.135455,15.143124,"Mermaid Universe","http://bydk.nu/mermaid-universe");
var m6=createMarker(57.438630,10.549226,"Ny Nordisk","http://bydk.nu/ny-nordisk");
var m7=createMarker(55.697463,12.573891,"Mirins","http://bydk.nu/mirins");
var m8=createMarker(56.128009,10.163206,"AFTC","http://bydk.nu/aftc");
var m9=createMarker(55.642488,12.608132,"Droobski","http://bydk.nu/Droobski");
var m10=createMarker(56.191441,10.192129,"Louise Ravnløkke","http://bydk.nu/louise-ravnloekke");
var m11=createMarker(56.144979,10.187208,"Snak","http://bydk.nu/snak");
var styles = [
{
"featureType": "road.highway",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.country",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"stylers": [
{ "visibility": "on" },
{ "color": "#b1b1b3" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "transit",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.province",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.locality",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "on" },
{ "color": "#ffffff" }
]
}
];
map.setOptions({styles: styles});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"/>
console.log(getTextWidth("hello there!", "bold 12pt arial"));
</body>
</html>Tut mir Leid, dass es nicht mehr eine MWE, ich kann versuchen, Sie zu trimmen, wenn nötig. Wenn Sie denken, dass der ursprüngliche Fehler ist nicht verursacht durch asynchrone laden, dann bin ich natürlich sehr daran interessiert zu hören über das 🙂
- Wo ist eine Seite, die zeigt das problem? link, den Sie in Ihrer Frage funktioniert bei mir ohne Fehler. Ein jsfiddle mit dem geposteten code funktioniert auch (aber ohne das asynchrone laden der API).
- eine Seite, die auf das ursprüngliche problem ist hier: sandkasse.shoporama.dk/producenter, die callback=initialisieren, das problem ist hier: kaarebmikkelsen.dk/wp-content/uploads/2014/06/test11.html
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn Sie muss laden des maps-API asynchron müssen Sie auch laden Sie das infobox.js asynchrously.
möglicherweise gibt es andere Lösungen, aber Sie erfordern würde, um zu ändern infobox.js