-1
私はウェブアプリケーションにマップを埋め込むことを学びたいと思っています。私は複数のマーカー、costumマーカー、costum infowindow、などを追加するような基本的な機能が欲しい。私はコスチュームマーカーを追加するまでやりました。各マーカーにinfowindowを設定したい場合、それはまだ機能しません、誰でも私に解決策を手伝うことができますか？おかげで...ここGoogle Maps JavaScript APIのInfoWindowが機能しないのはなぜですか？
は私のコードです：
<!DOCTYPE html>
<html>
<head>
<title>Styling the Base Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map {
margin: 0;
padding: 0;
height: 100%;
}
#legend {
font-family: Arial, sans-serif;
background: #fff;
padding: 10px;
margin: 10px;
border: 3px solid #000;
}
#legend h3 {
margin-top: 0;
}
#legend img {
vertical-align: middle;
}
</style>
<script>
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: new google.maps.LatLng(-8.704956, 115.22750),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_CENTER
}
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
var infowindow = new google.maps.InfoWindow();
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
name: 'Parking',
icon: iconBase + 'parking_lot_maps.png'
},
library: {
name: 'Library',
icon: iconBase + 'library_maps.png'
},
info: {
name: 'Info',
icon: iconBase + 'info-i_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(-8.702709, 115.224461),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91539, 151.22820),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91747, 151.22912),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91910, 151.22907),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91725, 151.23011),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91872, 151.23089),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91784, 151.23094),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91682, 151.23149),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91790, 151.23463),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91666, 151.23468),
type: 'info'
}, {
position: new google.maps.LatLng(-33.916988, 151.233640),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
type: 'library'
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(feature[i]['type']);
infowindow.open(map, marker);
}
})(marker, i));
}
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.RIGHT_BOTTOM].push(legend);
}
</script>
</head>
<body>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api /js?callback=initialize">
</script>
<div id="legend"><h3>Legend</h3></div>
</body>
</html>
私はjavascriptのエラー '捕捉されないにReferenceErrorを取得した：i：マーカーは私が – geocodezip
defined'されていませんボタンがあります。ボタンAをクリックするとマーカーが表示され、Bをクリックするとマーカーが隠れ、Bマーカーが表示されます。あなたはリファレンスがありますか？ –
グローバルvariabel.thanksの男としてのマーカーを定義されていないので、それはこのようにしたい場合は作成する方法、@geocodezipハイテクですが、私は知っているああ –