네이버 맵 (기본 맵 + 마커) v3

Open API/Naver|2016. 12. 20. 17:59
반응형

네이버 기본 맵 ( 마커 찍기 + 라벨 넣기 )


Test Url : http://www.uhoon.co.kr/test/995.html

네이버 API 키 발급 Url : https://dev.naver.com/openapi/register


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
  <title>네이버 맵 마커 </title>
  <style>v\:* { behavior: url(#default#VML); }</style>
  <!-- prevent IE6 flickering -->
  <script type="text/javascript">
   try {document.execCommand('BackgroundImageCache', false, true);} catch(e) {}
  </script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=네이버맵키"></script>
 </head>
 <body>
 <div id = "naverMap" style="border:1px solid #000; width:700px; height:400px; margin:20px; display:block;"></div>
 <script type="text/javascript">
    var oPoint = new nhn.api.map.LatLng(37.7396101, 127.0623053);
    nhn.api.map.setDefaultPoint('LatLng');
    oMap = new nhn.api.map.Map('naverMap', {
        center : oPoint,
        level : 10, // 줌 초기 값 10.
        enableWheelZoom : true,
        enableDragPan : true,
        enableDblClickZoom : false,
        mapMode : 0,
        activateTrafficMap : false,
        activateBicycleMap : false,
        activateRealtyMap : true,
        minMaxLevel : [ 1, 14 ],
        size : new nhn.api.map.Size(500, 400)
    });
 
    var oSize = new nhn.api.map.Size(28, 37);
    var oOffset = new nhn.api.map.Size(14, 37);
    var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);
 
    // 마커 찍기
    var oMarker1 = new nhn.api.map.Marker(oIcon, { title : '유느님이 계신 곳 ' });  //마커 생성
    oMarker1.setPoint(oPoint); //마커 표시할 좌표 선택
    oMap.addOverlay(oMarker1); //마커를 지도위에 표현
 
    //라벨 넣기
    var oLabel1 = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
    oMap.addOverlay(oLabel1); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
    oLabel1.setVisible(true, oMarker1); // 마커 라벨 보이기
 
  </script>
 </body>
</html>


댓글()

구글맵 v3 단순 다중 마커 (배열이용)

Open API/Google|2016. 12. 12. 18:36
반응형

종종 단순 배열 마커가 필요한 

경우가 있을때 사용하기 위한 샘플입니다.


많은 기능이 들어간 샘플에서 기능 걷어내는것도 일인지라..


Test Url : http://www.uhoon.co.kr/test/6477.html



<!doctype html> <html> <head> <meta charset="utf-8" /> <title>googlemap v3 </title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> </head> <SCRIPT LANGUAGE="JavaScript"> <!-- var contentArray = []; var iConArray = []; var markers = []; var iterator = 0; var markerArray = []; var map; // infowindow contents 배열 contentArray[0] = "Kay"; contentArray[1] = "uhoons blog"; contentArray[2] = "blog.uhoon.co.kr"; contentArray[3] = "blog.uhoon.co.kr "; contentArray[4] = "blog.uhoon.co.kr"; contentArray[5] = "blog.goodkiss.co.kr"; contentArray[6] = "GG"; contentArray[7] = "blog.goodkiss.co.kr"; contentArray[8] = "II"; contentArray[9] = "blog.goodkiss.co.kr"; // marker icon 배열 iConArray[0] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[1] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[2] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[3] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[4] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[5] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[6] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[7] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[8] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[9] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; // 위경도 배열 /* var markerArray = [ new google.maps.LatLng(40.3938,-3.7077) , new google.maps.LatLng(40.45038,-3.69803) , new google.maps.LatLng(40.45848,-3.69477) , new google.maps.LatLng(40.40672,-3.68327) , new google.maps.LatLng(40.43672,-3.62093) , new google.maps.LatLng(40.46725,-3.67443) , new google.maps.LatLng(40.43794,-3.67228) , new google.maps.LatLng(40.46212,-3.69166) , new google.maps.LatLng(40.41926,-3.70445) , new google.maps.LatLng(40.42533,-3.6844) ]; */ markerArray[0] = new google.maps.LatLng(40.3938,-3.7077); markerArray[1] = new google.maps.LatLng(40.45038,-3.69803); markerArray[2] = new google.maps.LatLng(40.45848,-3.69477); markerArray[3] = new google.maps.LatLng(40.40672,-3.68327); markerArray[4] = new google.maps.LatLng(40.43672,-3.62093); markerArray[5] = new google.maps.LatLng(40.46725,-3.67443); markerArray[6] = new google.maps.LatLng(40.43794,-3.67228); markerArray[7] = new google.maps.LatLng(40.46212,-3.69166); markerArray[8] = new google.maps.LatLng(40.41926,-3.70445); markerArray[9] = new google.maps.LatLng(40.42533,-3.6844); function initialize() { var mapOptions = { zoom: 11, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(40.4167754,-3.7037901999999576) }; map = new google.maps.Map(document.getElementById('map'),mapOptions); for (var i = 0; i < markerArray.length; i++) { addMarker(); } } // 마커 추가 function addMarker() { var marker = new google.maps.Marker({ position: markerArray[iterator], map: map, draggable: false, icon: iConArray[iterator] }); markers.push(marker); var infowindow = new google.maps.InfoWindow({ content: contentArray[iterator] }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); iterator++; } google.maps.event.addDomListener(window, 'load', initialize); //--> </SCRIPT> <body> <div id="map" style="width:760px;height:400px;margin-top:20px;"></div> </body> </html>


댓글()

구글맵 마커 + 말풍선 - v3

Open API/Google|2016. 12. 12. 18:30
반응형

구글맵 V3 + 마커 샘플입니다.


일반적으로 기본 구글맵에서 가장 많이쓰는것이기도 한데요..


Test Url : http://www.uhoon.co.kr/test/4338/4338.html



<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Info windows</title>
	<style>
		html,
		body,
		#map-canvas {
			height: 400px;
			width:600px;
			margin: 0px;
			padding: 0px
		}
	</style>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script>
		function initialize() {
			var myLatlng = new google.maps.LatLng(37.55544,127.07590);		// 위경도 수정
			var mapOptions = {
				zoom: 17,
				center: myLatlng
			};

			var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                        // 말풍선 내용 수정
			var contentString = '<div style="width:100px;height:50px;">군자동 주민센터</div>';		

			var infowindow = new google.maps.InfoWindow({
				content: contentString,
				size: new google.maps.Size(200,100)
			});

			var marker = new google.maps.Marker({
				position: myLatlng,
				map: map
			});
			google.maps.event.addListener(marker, 'click', function() {
				infowindow.open(map, marker);
			});
		}

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

<body>
	<div id="map-canvas"></div>
</body>

</html>

* Info Window :  https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple?hl=ko* Info Window Options : https://developers.google.com/maps/documentation/javascript/reference?hl=ko#InfoWindowOptions

댓글()

구글맵 v3 맵상에 보여지는 마커만 생성하기

Open API/Google|2016. 12. 12. 18:27
반응형

개발 중 맵상에 수백 수만개의 마커를 생성해야하는 경우가 당연히(?) 발생됩니다.

이때 버버벅...리소스를 엄청나게 먹으면서 느려질수가 있는데요. 이럴 때 사용할수 있는 샘플입니다.


기존 구글맵 v3 - 마커 + 말풍선 + GPS 연동+ 원그리기 + 동적 마커 생성( Ajax + Json ) 소스에다가 추가했습니다.


현재 보여지는 맵상에 좌측상단 좌표와 우측하단 좌표를 읽어와서 해당 범위내에 있는 마커만 보여지도록 하고

맵이 확대/축소되거나 좌표가 이동하는 경우에 마커를 다시 뿌려지도록 하는 방법입니다.


기능 구현위주의 샘플이다보니 좀 다듬어야할 부분이 많지만 쓰시는분에게 떠넘기기를..^^;;

( 여기서 상황에 따라 고민해야할 내용으로... 이걸 Js에서 처리할지..DB에서 처리할지.. )



주요 내용으로는 :


1. 이벤트 리스너 추가를 통해 현재 맵 범위좌표 확인.  ( 하단 참고 Url을 보시면 관련 내용에 대한 링크가 있습니다. )


google.maps.event.addListener(map, 'idle', function(){
    startLat = map.getBounds().getSouthWest().lat();
    startLng = map.getBounds().getSouthWest().lng();
    endLat = map.getBounds().getNorthEast().lat();
    endLng = map.getBounds().getNorthEast().lng(); 
});


2. 마커 생성시 위경도 좌표를 비교하여 생성유무 확인.




참고 Url : https://developers.google.com/maps/documentation/javascript/reference

필요에 따라 이벤트 리스너를 추가해주시면 됩니다. 

샘플상에는 처음 로드 , 드래그 , 줌아웃 시에 좌표를 확인해여 재생성하도록 되어있습니다.

이벤트 리스너 추가시 서로 중첩되는 내용이 있는 경우 마커 생성 함수가 여러번 호출되어 더 느려질수 있습니다. 

고민+고민이 필요합니다.

댓글()

구글맵 v3 - 마커 + 말풍선 + GPS 연동+ 원그리기 + 동적 마커 생성( Ajax + Json )

Open API/Google|2016. 12. 12. 18:19
반응형

메일로 어느분이 재미난 아이디어를 주셔서 만들어본 샘플인데 아마 가장 활용도가 높지 않을까 합니다.


기존 포스팅 했던 구글맵 아이콘 마커 + 말풍선 + 주소로 위경도 검색 + 거리별 원그리기 - v3 와 다른점은 

Ajax+Json 를 통해 동적 마커 생성이 가능하다는 점과 GPS 연동되는 부분이 추가되었다는 점입니다.

10원짜리 팁인 마커 삭제 버튼도 넣었습니다.

 

Test Url : http://www.uhoon.co.kr/test/3300.html



기능 요약 


- 구글맵 V3

- GPS 연동 현재 위치 표시

- 현재 위치 반경 원 그리기

- 현재 위치 마커를 제외한 마커 일괄 삭제

- Ajax를 통해 가져온 위치 데이터(json)를 동적으로 마커 생성.



간단히 말로 풀어서 기능설명을 하면 


Ajax를 통한 데이터 연동으로 지정범위내에 위치한 데이터를 뽑아내서 동적 마커 생성이 되는 기능이기 때문에

광범위한 부분에서 응용이 가능하리라 봅니다.


기본적으로 현재 위치(GPS) 값을 읽어와서 마커(남자사람아이콘)를 생성하고 10km 원을 그려줍니다.

그리고 Ajax를 통해 가져온 위경도 값 / 말풍선 내용으로 마커를 생성합니다.


삭제 버튼을 눌러 현재 위치를 제외한 마커를 삭제하기도하고 마커읽어오기를 통해 다시 불러오기도 합니다.

(마커 생성시 현재 위경도값은 새로 읽어옵니다.)


샘플 예제에서 Ajax로 가져온 위경도 데이터는 임의의 데이터를 가져오도록 하였으나 현재위치 및 반경 범위를 계산한 데이터를 가져와서 사용하는 등 

활용 방법은 정말 많을 것 같습니다!




댓글()

Google API 현재 위경도 읽어와서 구글맵에 마커 표시하기 ( getCurrentPosition )

Open API/Google|2016. 11. 22. 16:26
반응형



현재 위치를 읽어와서 구글맵에 마커를 표시해주는 기능입니다.


Test Url : http://www.uhoon.co.kr/test/1208.html



<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>getCurrentPosition + Googlemap marker </title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
<!--
    function fnGetCurrentPosition() {
        if (navigator.geolocation)
        {
            $("#latlng").html("");
            $("#errormsg").html("");
            navigator.geolocation.getCurrentPosition (function (pos)
            {
                lat = pos.coords.latitude;
                lng = pos.coords.longitude;
 
                $("#latlng").html("latitude : " + lat + "
 longitude : "+ lng);
 
                var mapOptions = {
                    zoom: 16,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: new google.maps.LatLng(lat,lng)
                };
 
                map = new google.maps.Map(document.getElementById('map'),mapOptions);
 
                var myIcon = new google.maps.MarkerImage("http://google-maps-icons.googlecode.com/files/restaurant.png", null, null, null, new google.maps.Size(17,17));
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(lat,lng),
                    map: map,
                    draggable: false,
                    icon: myIcon
                });
                markers.push(marker);
            },function(error)
            {
                switch(error.code)
                {
                    case 1:
                        $("#errormsg").html("User denied the request for Geolocation.");
                        break;
                    case 2:
                        $("#errormsg").html("Location information is unavailable.");
                        break;
                    case 3:
                        $("#errormsg").html("The request to get user location timed out.");
                        break;
                    case 0:
                        $("#errormsg").html("An unknown error occurred.");
                        break;
                }
            });
        }
        else
        {
            $("#errormsg").html("Geolocation is not supported by this browser.");
        }
    }
//-->
</script>
</head>
<body>
<div id="errormsg"></div>
<div id="latlng"></div>
<input type="button" value="GetCurrentPosition " onclick="Javascript:fnGetCurrentPosition();" />
<div id="map" style="width:760px;height:400px;margin-top:20px;"></div>
</body>
</html>


getCurrentPosition 자세히 알아보기 : http://www.uhoon.co.kr/API/1200




댓글()

Google API 구글맵 아이콘 마커 + 말풍선 + 주소로 위경도 검색 + 거리별 원그리기 - v3

Open API/Google|2016. 11. 21. 18:16
반응형



구글맵 V3 기본 기능입니다..

다음번에는 길찾기 등...animation 쪽으로..


Test Url : http://www.uhoon.co.kr/test/613.html



* 기능

 기본 맵

 아이콘 마커 (marker)

 말풍선 (infoWindow)

 주소로 위경도 검색하기 (geocoder)

 거리별 중심점 기준으로 원그리기 ( Circle )



<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>googlemap v3 </title>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>
<SCRIPT LANGUAGE="JavaScript">
<!--
var contentArray = [];
var iConArray = [];
var markers = [];
var iterator = 0;
var map;
var geocoder;

// infowindow contents 배열
 contentArray[0] = "Kay";
 contentArray[1] = "uhoons blog";
 contentArray[2] = "blog.uhoon.co.kr";
 contentArray[3] = "www.suvely.com";
 contentArray[4] = "www.babbabo.com";
 contentArray[5] = "blog.goodkiss.co.kr";
 contentArray[6] = "GG";
 contentArray[7] = "blog.goodkiss.co.kr";
 contentArray[8] = "II";
 contentArray[9] = "blog.goodkiss.co.kr";

// marker icon 배열
 iConArray[0] = "http://google-maps-icons.googlecode.com/files/walking-tour.png";
 iConArray[1] = "http://google-maps-icons.googlecode.com/files/walking-tour.png";
 iConArray[2] = "http://google-maps-icons.googlecode.com/files/walking-tour.png";
 iConArray[3] = "http://google-maps-icons.googlecode.com/files/walking-tour.png";
 iConArray[4] = "http://google-maps-icons.googlecode.com/files/walking-tour.png";
 iConArray[5] = "http://google-maps-icons.googlecode.com/files/walking-tour.png";
 iConArray[6] = "http://google-maps-icons.googlecode.com/files/walking-tour.png";
 iConArray[7] = "http://google-maps-icons.googlecode.com/files/walking-tour.png";
 iConArray[8] = "http://google-maps-icons.googlecode.com/files/walking-tour.png";
 iConArray[9] = "http://google-maps-icons.googlecode.com/files/walking-tour.png";

// 위경도 배열
var markerArray = [ new google.maps.LatLng(40.3938,-3.7077)
, new google.maps.LatLng(40.45038,-3.69803)
, new google.maps.LatLng(40.45848,-3.69477)
, new google.maps.LatLng(40.40672,-3.68327)
, new google.maps.LatLng(40.43672,-3.62093)
, new google.maps.LatLng(40.46725,-3.67443)
, new google.maps.LatLng(40.43794,-3.67228)
, new google.maps.LatLng(40.46212,-3.69166)
, new google.maps.LatLng(40.41926,-3.70445)
, new google.maps.LatLng(40.42533,-3.6844)
];

function initialize() {
	geocoder = new google.maps.Geocoder();

	var mapOptions = {
		zoom: 11,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: new google.maps.LatLng(40.4167754,-3.7037901999999576)
	};

	map = new google.maps.Map(document.getElementById('map'),mapOptions);

	var populationOptions = {
		strokeColor: '#000000',
		strokeOpacity: 0.8,
		strokeWeight: 2,
		fillColor: '#808080',
		fillOpacity: 0.5,
		map: map,
		center: new google.maps.LatLng(40.4167754,-3.7037901999999576) ,
		radius: $("#radius").val()*1000
	};
	cityCircle = new google.maps.Circle(populationOptions);
}

// 주소 검색
function showAddress() {
	var address = $("#address").val();
	geocoder.geocode( { 'address': address}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			map.setCenter(results[0].geometry.location);
			var marker = new google.maps.Marker({
				map: map,
				position: results[0].geometry.location,
				draggable: true
			});

			google.maps.event.addListener(marker, "dragend", function(event) {
				var point = marker.getPosition();
				$("#latitude").val(point.lat());
				$("#longitude").val(point.lng());

				var populationOptions = {
					strokeColor: '#000000',
					strokeOpacity: 0.8,
					strokeWeight: 2,
					fillColor: '#808080',
					fillOpacity: 0.5,
					map: map,
					center: new google.maps.LatLng($("#latitude").val(),$("#longitude").val()) ,
					radius: $("#radius").val()*1000
				};
				if (cityCircle)
				{
					cityCircle.setMap(null);
				}
				cityCircle = new google.maps.Circle(populationOptions);
			});

			var lat = results[0].geometry.location.lat();
			var lng = results[0].geometry.location.lng();

			$("#latitude").val(lat);
			$("#longitude").val(lng);

			var populationOptions = {
				strokeColor: '#000000',
				strokeOpacity: 0.8,
				strokeWeight: 2,
				fillColor: '#808080',
				fillOpacity: 0.5,
				map: map,
				center: new google.maps.LatLng(lat,lng) ,
				radius: $("#radius").val()*1000
			};
			if (cityCircle)
			{
				cityCircle.setMap(null);
			}
			cityCircle = new google.maps.Circle(populationOptions);

		} else {
			alert('Geocode was not successful for the following reason: ' + status);
		}
	});
}

// 드롭 마커 보기
function viewMarker() {
	for (var i = 0; i < markerArray.length; i++) {
		setTimeout(function() {
			addMarker();
		}, i * 300);
	}

	var marker = new google.maps.Marker ({
			position: new google.maps.LatLng(40.4167754,-3.7037901999999576),
			map: map,
			draggable: true
		});

	google.maps.event.addListener(marker, "dragend", function(event) {
		var point = marker.getPosition();
		$("#latitude").val(point.lat());
		$("#longitude").val(point.lng());

		var populationOptions = {
			strokeColor: '#000000',
			strokeOpacity: 0.8,
			strokeWeight: 2,
			fillColor: '#808080',
			fillOpacity: 0.5,
			map: map,
			center: new google.maps.LatLng($("#latitude").val(),$("#longitude").val()) ,
			radius: $("#radius").val()*1000
		};
		if (cityCircle)
		{
			cityCircle.setMap(null);
		}
		cityCircle = new google.maps.Circle(populationOptions);
	});
}

// 마커 추가
function addMarker() {

	var marker = new google.maps.Marker({
		position: markerArray[iterator],
		map: map,
		draggable: false,
		icon: iConArray[iterator],
		animation: google.maps.Animation.DROP
	});
	markers.push(marker);

	var infowindow = new google.maps.InfoWindow({
      content: contentArray[iterator]
	});

	google.maps.event.addListener(marker, 'click', function() {
		infowindow.open(map,marker);
	});
	iterator++;
}

// 중심 이동
function fnLocation(lat, lng) {
	myLocation = new google.maps.LatLng(lat, lng);
	map.setCenter(myLocation);
}

//google.maps.event.addDomListener(window, 'load', initialize);

$( window ).load(function() {
	initialize();
	viewMarker();
});

//-->
</SCRIPT>
<body>
radius : <select id="radius" >
	<option value="10" selected="selected">10Km</option>
	<option value="5">5Km</option>
</select>
latitude : <input type="text" id="latitude" value="40.4167754"/>
longitude: <input type="text" id="longitude" value="-3.7037901999999576"/>
<div id="map" style="width:760px;height:400px;margin-top:20px;"></div>
<label style="margin:3px 0 0 0;" for="address">address</label>
<input type="text" id="address" name="address" style="margin:3px 0 0 5px;" value=""/>
<input type="button" value="search" onclick="Javascript:showAddress();" />
</body>
</html>


댓글()

다음맵 api 마커 + 말풍선

Open API/Daum|2016. 10. 31. 09:12
반응형



다음맵 API를 이용한 기본 마커 + 말풍선 샘플 코드입니다.


<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, target-densityDpi=device-dpi"> <title>용산전쟁기념관</title> <style type="text/css"> html, body, #map {margin: 0; padding: 0; width: 100%; height: 100%} </style> <script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=DAUM_MAPS_DEMO_APIKEY" charset="utf-8"></script> <script type="text/javascript"> var map; function init() { map = new daum.maps.Map(document.getElementById('map'), { center: new daum.maps.LatLng(37.53592870797618, 126.97726376303085) });    var icon = new daum.maps.MarkerImage( 'http://maps.google.com/mapfiles/kml/pal3/icon46.png', new daum.maps.Size(20, 20), new daum.maps.Point(20, 20) ); var marker = new daum.maps.Marker({ position: new daum.maps.LatLng(37.5367, 126.9772), image : icon }); marker.setMap(map);    var infowindow = new daum.maps.InfoWindow({ content: '<a href="http://www.warmemo.co.kr" target="_blank" style="margin:1em;line-height:2;text-decoration:none">장소 : 용산전쟁기념관 기획전시실   <BR>     프로그램명: 코코몽 녹색놀이터 <br>     기간 : 2012.12.01-2012.12.31<br>     예약현황 : 80개 단체 5000명(현재)</a>' });   daum.maps.event.addListener(marker, "click", function() { infowindow.open(map, marker); });   daum.maps.event.addListener(map, "click", function() { infowindow.close(); });     var marker1 = new daum.maps.Marker({ position: new daum.maps.LatLng(37.5245, 126.9805), image : icon });   marker1.setMap(map); var infowindow1 = new daum.maps.InfoWindow({ content: '<a href="http://www.museum.go.kr" target="_blank" style="margin:1em;line-height:2;text-decoration:none">장소 : 국립중앙 박물관   <BR>     프로그램명: 2013 웨딩페어 <BR>     기간 : 2012.12.01-2012.12.31<BR>     예약현황 : 2개 단체 20000명(현재)</a>' });   daum.maps.event.addListener(marker1, "click", function() { infowindow1.open(map, marker1); });   daum.maps.event.addListener(map, "click", function() { infowindow1.close(); }); } </script> </head> <body onload="init()"> <div id="map"></div>    </body> </html>


댓글()