2013. 1. 15. 15:26ㆍWEB/Google Maps
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
<!--
var map;
var markersArray = [];
coordinates = [];
var up_lat = "37.5562989";
var up_lng = "126.9220863";
var car_lat = "37.4784514";
var car_lng = "126.8818163";
var up_latlng = new google.maps.LatLng(up_lat, up_lng);
var car_latlng = new google.maps.LatLng(car_lat, car_lng);
var mapOptions = {
streetViewControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
// coordinates에 각 마커의 위치값(위도,경도)을 마커의 수만큼 push
coordinates.push(up_latlng);
coordinates.push(car_latlng);
// 마커의 수만큼 반복하여 coordinates에 push된 위치 정보값을 계산 후
// 맵의 zoom level과 center를 맵에 적용
bounds = new google.maps.LatLngBounds();
for (var i=0; i < 2; i++) {
bounds.extend(coordinates[i]);
}
map.fitBounds(bounds);
addMarker(up_latlng);
addMarker(car_latlng);
//지도에 마커출력
function addMarker(latlng) {
marker = new google.maps.Marker({
position: latlng,
map: map
});
markersArray.push(marker);
}
//-->
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
'WEB > Google Maps' 카테고리의 다른 글
| 구글맵 맵 로딩이 완료된 후 함수 실행(리스너 등록) (0) | 2013.01.15 |
|---|---|
| 구글맵 마커 이미지 변경 (0) | 2013.01.15 |
| 구글맵 줌 변경, 지도 이동 시 현재 지도의 범위에만 마커 출력하기 (0) | 2013.01.15 |
| (WEB/JavaScript) 구글맵 지오코딩(geocoding) (0) | 2013.01.15 |
| 구글맵스 개발 시작하기 (0) | 2013.01.15 |