구글맵 정보창(infoWindow) 출력
아래 소스는 지도에 마커를 출력하는 소스입니다.
마커를 클릭 시 infoWindow를 출력하는 부분을
빨간색 소스로 표시하였습니다.
<!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="http://maps.google.com/maps/api/js?sensor=false&language=ko">
</script>
<script type="text/javascript">
<!--
var map;
var markersArray = [];
coordinates = [];
var infowindow = new google.maps.InfoWindow();
//초기 실행 함수
function initialize(){
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);
//지도에 출력된 마커를 클릭했을 경우 이벤트(infoWindow 출력)
google.maps.event.addListener(marker, 'click', function (event){
popInfoWindow(latlng);
});
}
// infoWindow 출력
function popInfoWindow(latlng){
var geocoder = new google.maps.Geocoder();
map.setCenter(latlng);
addMarker(latlng); //마커출력
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
var contentString =
'<div id="content">'+
'<br><div id=="adress">'+
'<b>html 코드 삽입 가능</b>'+
'<br></div>'+
'<p>' +
'<b>주소 :</b> ' +results[1].formatted_address+
'</p>'+
'</div>';
infowindow.setContent(contentString);
infowindow.open(map, marker);
} else {
alert("No results found");
}
}else{
alert("Geocoder failed due to: " + status);
}
});
}
//-->
</script>
</head>
<body onload="initialize()">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="500"><div id="map_canvas" style="width:100%; height:100%"></div></td>
</tr>
</table>
</body>
</html>
'Open API > WEB' 카테고리의 다른 글
| 다음 사이트에 멀웨어가 있습니다 해결방법 (7) | 2016.05.02 |
|---|---|
| ASP에서 네이버 지도 지오코딩(좌표변환) 예제 (3) | 2013.04.17 |
| 네이버 지도 API 키 발급 방법 (0) | 2013.04.12 |
| (네이버 지도) 지도가 잠깐 출력되었다가 다시 사라지는 현상 해결 (2) | 2013.04.12 |
| 구글맵 맵 로딩이 완료된 후 함수 실행(리스너 등록) (0) | 2012.12.28 |
| 구글맵 마커 이미지 변경 (2) | 2012.11.21 |
| 구글맵 줌 변경, 지도 이동 시 현재 지도의 범위에만 마커 출력하기 (0) | 2012.11.21 |
| 구글맵 중심점(Google maps Bounds) 자동으로 계산하기 (0) | 2012.09.25 |
| (WEB/JavaScript) 구글맵 지오코딩(geocoding) (0) | 2012.09.25 |
| 구글맵스 개발 시작하기 (2) | 2012.09.20 |