Javascript 谷歌地图api:回调=初始化失败？
所以，我试图解决的基本问题是，当我把我的谷歌地图放在我正在使用的CMS中时，我会得到一个“未捕获的引用错误：谷歌没有定义” 根据这一回答： 这是因为我需要异步加载mapsapi。然而，这个解决方案对我来说似乎失败了 据我所知，我必须将“&callback=initialize”附加到我的api url中，使其成为：Javascript 谷歌地图api:回调=初始化失败？,javascript,google-maps,google-maps-api-3,asynchronous,infobox,Javascript,Google Maps,Google Maps Api 3,Asynchronous,Infobox,所以，我试图解决的基本问题是，当我把我的谷歌地图放在我正在使用的CMS中时，我会得到一个“未捕获的引用错误：谷歌没有定义” 根据这一回答： 这是因为我需要异步加载mapsapi。然而，这个解决方案对我来说似乎失败了 据我所知，我必须将“&callback=initialize”附加到我的api url中，使其成为： <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=${KE
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=${KEY}&sensor=false&language=da&callback=initialize">
</script>
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'
未捕获类型错误：未定义不是函数VM344:1
未捕获的TypeError:对象#没有方法“打开”test1.html:112
未捕获的TypeError:对象#没有方法“close”
<!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>
html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：500px；宽度：800px；}
getTextWidth=函数（文本、字体）{
//重复使用画布对象以获得更好的性能
var canvas=getTextWidth.canvas | |（getTextWidth.canvas=document.createElement（“canvas”）；
var context=canvas.getContext（“2d”）；
context.font=font；
var metrics=context.measureText（text）；
返回度量。宽度；
};
函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（56.3,11.266724），
缩放：7，
mapTypeControl:false，
街景控制：错误
};
var map=new google.maps.map（document.getElementById（“地图画布”），
地图选项）；
黄圈变种={
路径：google.maps.SymbolPath.CIRCLE，
比例：5，
fillColor:“#faeadd”，
strokeColor:'黑色'，
不透明度：1.0，
冲程重量：0.5，
锌指数：-10
};
黄黑圈={
路径：google.maps.SymbolPath.CIRCLE，
比例：5，
fillColor:“#faeadd”，
strokeColor:'黑色'，
不透明度：1.0，
冲程重量：1.5
};
函数createMarker（Lat、Lng、名称、url）{
var marker=new google.maps.marker（{
位置：新google.maps.LatLng（Lat，Lng），
地图：地图，
图标：黄色圆圈，
url:url
});
google.maps.event.addListener（标记'mouseover'，函数（）{
marker.setIcon（黄黑圈）；
});
google.maps.event.addListener（标记'mouseout'，函数（）{
marker.setIcon（黄色圆圈）；
});
google.maps.event.addListener（标记'click'，函数（）{
window.location.href=url；
});
变量myOptions={
内容：姓名
，箱式：{
边框：“1px纯黑”
，textAlign：“居中”
，字体大小：“12磅”
，字体类型：“arial”
，背景色：“#faeadd”
，fontWeight:“粗体”
，zIndex:1
}
，disableAutoPan：是的
，pixelOffset:new google.maps.Size（-getTextWidth（名称，“bold 12pt arial”）/2，-30）
，位置：new google.maps.LatLng（49.47216，-123.76307）
，closeBoxURL:“
，isHidden:错
，窗格：“浮动窗格”
，enableEventPropagation:true
，zIndex:1
};
var infobox=新的infobox（myOptions）；
google.maps.event.addListener（标记'mouseover'，函数（）{
打开（地图、标记）；
});
google.maps.event.addListener（标记'mouseout'，函数（）{
infobox.close（）；
});
返回标记；
}
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，“布卢广场”http://bydk.nu/place-de-bleu");
变量m4=createMarker（55.156415,8.768423，“Vibegaard”http://bydk.nu/vibegaard");
var m5=createMarker（55.135455,15.143124，“美人鱼宇宙”http://bydk.nu/mermaid-universe");
var m6=createMarker（57.438630,10.549226，“纽约-诺德斯”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");
变量m11=createMarker（56.144979,10.187208，“Snak”http://bydk.nu/snak");
变量样式=[
{
“功能类型”：“道路.公路”，
“造型师”：[
{“可见性”：“关闭”}
]
},{
“featureType”：“administration.country”，
“造型师”：[
{“可见性”：“关闭”}
]
},{
“特色类型”：“景观”，
“造型师”：[
{“可见性”：“在”}，
{“颜色”：“#b1b3”}
]
},{
“featureType”：“poi”，
“造型师”：[
{“可见性”：“关闭”}
]
},{
“featureType”：“transit”，
“造型师”：[
{“可见性”：“关闭”}
]
},{
“特征类型”：“行政省”，
“造型师”：[
{“可见性”：“关闭”}
]
},{
“featureType”：“administration.locality”，
“造型师”：[
{“可见性”：“打开”
<!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>