웹에서 다음맵 연동하기 소스입니다.
먼저, http://dna.daum.net/myapi/mapsapi/new 링크에 가서 api를 등록하면 api키를 발급해줍니다.
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=발급받은 API키"></script>
위 스크립트를 호출하고 api를 사용하면 됩니다.
아래 링크를 참조하세요.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title></title>
<style>
#map {width:320px; height:480px}
</style>
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=a3da9cb38e6f3e983247d85d60261f8a74dfd796"></script>
</head>
<body>
<div id="map"></div>
<pre>
https://apis.daum.net/register/myapi.daum 에서 key등록후 사용하세요.
</pre>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript">
window.addEventListener("load", initMap, false);
function initMap(){
navigator.geolocation.getCurrentPosition(onPositionUpdate);
function onPositionUpdate(position){
var lat = position.coords.latitude; //위도
var lng = position.coords.longitude; //경도
//좌표설정
var position = new daum.maps.LatLng(lat, lng);
//지도 생성
var map = new daum.maps.Map(document.getElementById('map'), {
center: position,
level: 4,
mapTypeId: daum.maps.MapTypeId.HYBRID
});
//마커 설정
var marker = new daum.maps.Marker({
position: position
});
marker.setMap(map);
//문구 설정
var infowindow = new daum.maps.InfoWindow({
content: 'Hello, Morpheus!'
});
infowindow.open(map, marker);
}
}
</script>
</body>
</html>
무료다운로드: https://apzw3.app.goo.gl/sheet
댓글