-1
我正在为自定义标记网站制作Google地图。这些标记已经制作完成，但是当点击标记时，我需要为每个单独的标记打开信息框。我在互联网上搜索，并尝试了很多东西，但它不会工作。Google地图：如何为自定义标记创建一个infowindow？
下面是代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map {
width:700px;
\t \t height:600px;
\t \t border-radius:5px;
\t \t margin-left:auto;
\t \t margin-right:auto;
}
#legend {
font-family: Arial, sans-serif;
background: #fff;
\t \t opacity:0.85;
padding: 10px;
margin: 10px;
border: 1px solid #000;
\t \t border-radius:5px;
}
#legend h3 {
margin-top: 0;
}
#legend img {
vertical-align: middle;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(51.99683352, 5.88360088),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
\t \t camping: {
name: 'Camping',
icon: iconBase + 'campground_maps.png'
},
\t \t grocery: {
name: 'Supermarkt',
icon: iconBase + 'grocery_maps.png'
},
dining: {
name: 'Restaurant',
icon: iconBase + 'dining_maps.png'
},
snack_bar: {
name: 'Snackbar',
icon: iconBase + 'snack_bar_maps.png'
},
\t \t swimming: {
name: 'Zwembad',
icon: iconBase + 'swimming_maps.png'
},
\t \t museum: {
name: 'Museum',
icon: iconBase + 'museum_maps.png'
\t \t },
\t \t parks: {
name: 'Landgoed',
icon: iconBase + 'parks_maps.png'
\t \t },
\t \t hospitals: {
name: 'Ziekenhuis',
icon: iconBase + 'hospitals_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
var features = [
{
position: new google.maps.LatLng(52.0072118, 5.87047509),
type: 'camping'
}, {
position: new google.maps.LatLng(52.00030944, 5.8805877),
type: 'dining'
}, {
position: new google.maps.LatLng(51.99683352, 5.88360088),
type: 'dining'
}, {
position: new google.maps.LatLng(51.962503, 5.90451),
type: 'swimming'
\t \t }, {
position: new google.maps.LatLng(51.9956291, 5.9225834),
type: 'swimming'
\t \t }, {
position: new google.maps.LatLng(51.98811773, 5.89362323),
type: 'grocery'
\t \t }, {
position: new google.maps.LatLng(51.99012513, 5.89376865),
type: 'grocery'
\t \t }, {
position: new google.maps.LatLng(52.009949, 5.906641),
type: 'museum'
\t \t }, {
position: new google.maps.LatLng(51.988764, 5.901436),
type: 'museum'
\t \t }, {
position: new google.maps.LatLng(52.02687639, 5.87179417),
type: 'museum'
\t \t }, {
position: new google.maps.LatLng(51.987706, 5.832719),
type: 'museum'
\t \t }, {
position: new google.maps.LatLng(52.03369001, 5.86739123),
type: 'parks'
\t \t }, {
position: new google.maps.LatLng(51.9911136, 5.8907901),
type: 'snack_bar'
\t \t }, {
position: new google.maps.LatLng(52.001069, 5.910066),
type: 'hospitals'
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
var legend = document.getElementById('legend');
for (var key in icons) {
var type = icons[key];
var name = type.name;
var icon = type.icon;
var div = document.createElement('div');
div.innerHTML = '<img src="' + icon + '"> ' + name;
legend.appendChild(div);
}
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(legend);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
<div id="legend"><h3>Legenda</h3></div>
</body>
</html>是否有人有任何建议如何使InfoBoxes到工作？
相关的问题：谷歌地图JS API V3 - 简单多个标记示例]（http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-例如） – geocodezip
在你的问题中没有代码来添加任何infowindows。你尝试过什么（你认为应该起作用），那是行不通的？ – geocodezip