【发布时间】：2014-07-24 08:45:51
【问题描述】：
所以，我要解决的根本问题是，将我的谷歌地图放入我正在使用的 CMS 中时，我收到“未捕获的参考错误：谷歌未定义”。
根据这个答案：
Google Maps API throws "Uncaught ReferenceError: google is not defined" only when using AJAX
这是因为我需要异步加载地图 API。但是，这个解决方案对我来说似乎失败了。
据我了解，我必须将“&callback=initialize”附加到我的 api-url，使其变为：
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=${KEY}&sensor=false&language=da&callback=initialize">
</script>
以及删除线
google.maps.event.addDomListener(window, 'load', initialize);
。但是，当我这样做时，我的信息框会中断，因为我会收到诸如
之类的错误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'
恐怕我不知道如何为此创建一个 jsFiddle，但http://www.kaarebmikkelsen.dk/wp-content/uploads/2014/06/test1.html 是工作版本，我也将其包括在这里：
<!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>
很抱歉，它不是 MWE，如有必要，我可以尝试修剪所有内容。如果您认为原始错误不是由异步加载引起的，那么我当然很想听听这个:)
【问题讨论】：
-
出现问题的页面在哪里？ link you provide in your question 为我工作，没有错误。包含已发布代码的 jsfiddle 也可以正常工作（但没有 API 的异步加载）。
-
@geocodezip 显示原始问题的页面在这里：sandkasse.shoporama.dk/producenter，回调=初始化问题在这里：kaarebmikkelsen.dk/wp-content/uploads/2014/06/test11.html
标签： javascript google-maps google-maps-api-3 asynchronous infobox