Google Maps Multiple Markers
by HYEONGJINKIM
HTML
<div>
<div id="map" style="width: 500px; height: 400px;"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</div>
JavaScript
var locations = [
[
"아침고요장작구이춘천닭갈비",
37.772683,
127.371425,
1,
"Georgia Mason",
"",
"Norfolk Botanical Gardens, 6700 Azalea Garden Rd.",
"coming soon"
],
[
"아침고요수목원",
37.743858,
127.352513,
2,
"Terry Cox-Joseph",
"Rowena's",
"758 W. 22nd Street in front of Rowena's",
"found"
]
]
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
// center: new google.maps.LatLng(-33.92, 151.25),
center: new google.maps.LatLng(37.743858, 127.352513),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
}
})(marker, i));
}
var $map = $('#map');
$map.width($(window).width());
$map.height($(window).height());
$(window).resize(function(){
$map.width($(window).width());
$map.height($(window).height());
});