-1
여기에 비슷한 질문을 많이했지만 내 질문에 대한 답변을 찾지 못했습니다. 저는 JS 및 GoogleMaps API v3을 처음 사용하고 있으며 지금까지이 튜토리얼을 성공적으로 따라갔습니다. 그러나 사용자 정의 컨텐츠가있는 infowindow를 표시하려면 클릭 한 마커에 따라 표시해야하며이를 수행하는 방법을 알 수는 없습니다. 또한 약 100 개의 마커를 사용하여이 작업을 수행하고 싶습니다. 너무 지저분하지 않은 채로 작업을 수행하는 가장 좋은 방법을 알고 싶습니다. 분명히 말하자면, 3 가지 유형의 아이콘이 있지만, 결국에는 각 아이콘과 관련된 많은 마커가있을 것이므로 각 "특징"에 연결된 내용이 필요합니다. 바라기를 나는 여기서 좋은 출발을하고있어. 페이지 코드를 포함 시켰습니다. 누구든지 제공 할 수있는 도움에 대해 미리 감사드립니다.Google Maps API v.3 다중 마커 정보창
<!DOCTYPE html>
<html>
<head>
<style>
#map_canvas {
width: 800px;
height: 500px;
background-color:#CCC;
}
#legend {
font-family: Arial, sans-serif;
background: #fff;
padding: 10px;
margin: 10px;
border: 3px solid #000;
}
#legend img {
vertical-align: middle;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(33.137551,-0.703125),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(map_canvas, map_options);
map.set('styles', [
{
featureType: 'road',
elementType: 'geometry',
stylers: [
{ color: '#888888' },
{ weight: 1.0 }
]
}, {
featureType: 'landscape',
elementType: 'geometry.fill',
stylers: [
{ hue: '#008f11' },
{ gamma: 1.0 },
{ saturation: 0 },
{ lightness: -10 }
]
}, {
featureType: 'water',
elementType: 'geometry.fill',
stylers: [
{ hue: '#054d8fd' },
{ gamma: 1.0 },
{ saturation: 0 },
{ lightness: -10 }
]
}, {
featureType: 'poi',
elementType: 'geometry',
stylers: [
{ visibility: 'off' }
]
}
]);
var iconBase = 'http://i1318.photobucket.com/albums/t658/greatergoodorg/';
var icons = {
people: {
name: 'People',
icon: iconBase + 'people_zps26d13009.png',
shadow: iconBase + 'shadow-people_zps4b39eced.png'
},
pets: {
name: 'Pets',
icon: iconBase + 'pets_zps15f549f2.png',
shadow: iconBase + 'shadow-pets_zps361068aa.png'
},
planet: {
name: 'Planet',
icon: iconBase + 'planet_zps2a8572ce.png',
shadow: iconBase + 'shadow-planet_zps9912e26b.png',
}
};
var data = ["This is the first one", "This is the second one", "This is the third one"];
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
shadow: {
url: icons[feature.type].shadow,
anchor: new google.maps.Point(21, 32)
},
animation: google.maps.Animation.DROP,
map: map
});
/*...
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map,marker);
});
...*/
/*...
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
...*/
}
var features = [
{
position: new google.maps.LatLng(33.137551,-0.703125),
type: 'planet'
},
{
position: new google.maps.LatLng(44.234234,-0.232233),
type: 'pets'
},
{
position: new google.maps.LatLng(54.234234,-0.032233),
type: 'people'
}
];
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(
document.getElementById('legend'));
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
<div id="legend"><strong>Project Types</strong></div>
</body>
</html>
' } \t \t]; –
에서 "유형"문자열을 표시합니다? 정보 창은 어디에 정의합니까? – geocodezip