2012-12-15 5 views
0

다음 코드를 사용하여 Google지도를 표시하고지도에 마커를 만듭니다. 그것의 잘 작동합니다. 동일한지도에 여러 개의 표식을 넣으면됩니다.Google maps API 여러 마커

<!DOCTYPE html> 
<html> 
<head> 
<script 
src="http://maps.googleapis.com/maps/api/js?  
key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> 
</script> 

<script> 
var myCenter=new google.maps.LatLng(51.508742,-0.120850); 

function initialize() 
{ 
var mapProp = { 
center:myCenter, 
zoom:5, 
mapTypeId:google.maps.MapTypeId.ROADMAP 
}; 

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 

var marker=new google.maps.Marker({ 
position:myCenter, 
}); 

marker.setMap(map); 

var infowindow = new google.maps.InfoWindow({ 
content:"Hello World!" 
}); 

infowindow.open(map,marker); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 

<body> 
<div id="googleMap" style="width:500px;height:380px;"></div> 
</body> 
</html> 

여러지도를 사용하여 동일한지도에 여러 마커를 놓을 수있는 사람이 있습니까? 감사합니다.

답변

4

이것은 기본적인 질문이며 몇 가지 예가 웹에서 찾을 수 있습니다. 당신은 기본적으로 다양한 마커를 보관할 배열이 필요합니다. 그런 다음 루프를 사용하여 하나의 마커에서와 마찬가지로지도에 이러한 latlng을 배치합니다.

var berlin = new google.maps.LatLng(52.520816, 13.410186); 
var neighborhoods = [ 
new google.maps.LatLng(52.511467, 13.447179), 
new google.maps.LatLng(52.549061, 13.422975), 
new google.maps.LatLng(52.497622, 13.396110), 
new google.maps.LatLng(52.517683, 13.394393) 
]; 
var markers = []; 
var map; 

function initialize() { 
var mapOptions = { 
zoom: 12, 
mapTypeId: google.maps.MapTypeId.ROADMAP, 
center: berlin 
}; 
map = new google.maps.Map(document.getElementById('map_canvas'), 
mapOptions); 
drop(); 
} 

function drop() { 
for (var i = 0; i < neighborhoods.length; i++) 
    { 
    markers.push(new google.maps.Marker({ 
    position: neighborhoods[i], 
    map: map, 
    })); 
    } 
} 
관련 문제