구글맵 정보창(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>

Posted by 준콩ol 준콩ol

댓글을 달아 주세요