ȸ»ç ¼Ò°³ ÆäÀÌÁö¿¡¼ ¾àµµ ¶Ç´Â ã¾Æ¿À½Ã´Â ±æ À»
±¸±Û Áöµµ API ¸¦ ÀÌ¿ëÇÏ¿© ³ªÅ¸³ªµµ·Ï Çغ¸°Ú½À´Ï´Ù.
»ùÇ÷ΠÆÄÀÏÀ» Çϳª ¾÷·Îµå ÇØ µÎ¾úÀ¸¸ç, ¼Ò½ºÆÄÀÏ ´Ù¿î·Îµå¸¦ Çϼż ´Ù¿î·Îµå ¹ÞÀ¸½Ã¸é µË´Ï´Ù.
±âº»ÀûÀ¸·Î ±¸±Û Áöµµ´Â
<!DOCTYPE html>
<html>
<head>
<meta charset="euc-kr">
<title>±¸±ÛÁöµµ ȸ»ç À§Ä¡</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(35.87110100714382, 128.60169690333006);
var mapOptions = {
zoom: 17,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"style="width:500px; height:300px;"></div>
</body>
</html>
À§ÀÇ ¼Ò½º¸¸ ÀÖÀ¸¸é ±¸±Û Áöµµ´Â ³ªÅ¸³³´Ï´Ù.
¾Æ·¡¿¡ body ű׾ȿ¡ div ű׿¡ width ¿Í height °¡ ÁöµµÀÇ °¡·Î ¼¼·Î Å©±âÀÔ´Ï´Ù.
Àû´çÇÑ °ªÀ» ÁÖ½Ã¸é µÇ¸ç
»ó´Ü¿¡
var myLatlng = new google.maps.LatLng(35.87110100714382, 128.60169690333006);
À§ÀÇ ¼Ò½º¿¡ ÇöÀç À§Ä¡¸¦ x, y ·Î ÁÂÇ¥°ªÀ» ³Ö¾îÁÖ½Ã¸é µË´Ï´Ù.
ÇöÀç ÁÖ¼Ò¿¡ ´ëÇÑ x, y ÁÂÇ¥ °ªÀº ¾Æ·¡ ¸µÅ©¿¡¼ ¾òÀ¸½Ç ¼ö ÀÖ½À´Ï´Ù.
http://openapi.map.naver.com/api/geocode.php?key=f32441ebcd3cc9de474f8081df1e54e3&encoding=euc-kr&coord=LatLng&query=´ë±¸Áß±¸µ¿Àε¿1°¡
À§¿Í °°ÀÌ ÁÖ¼Ò¸¦ ÀûÀ¸¸é xml ·Î x,y °ªÀ» È®ÀÎÇÒ ¼ö ÀÖ½À´Ï´Ù.
À§ÀÇ ±âº»ÀûÀÎ ¼Ò½º¿¡¼ ÇöÀç À§Ä¡¿¡ ´ëÇÑ ¸¶Ä¿¸¦ ÂïÀ¸½Ç·Á¸é
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "´ë±¸½Ãû"
});
À§ÀÇ ¼Ò½º¸¦ var map ¾Æ·¡¿¡ Ãß°¡ÇÏ½Ã¸é µË´Ï´Ù.
![](/wys2/file_attach/2012/10/09/1349749603-24.jpg)
title ¿¡ ³»¿ëÀº ¸¶Ä¿¿¡ ¸¶¿ì½º¸¦ °¡Á®´Ù´ë¸é ³ªÅ¸³ª´Â À̸§ÀÔ´Ï´Ù.
¿©±â¿¡ Ãß°¡ÀûÀ¸·Î ¸¶Ä¿¸¦ Ŭ¸¯ÇÏ¸é ¸»Ç³¼±À» ¶ç¿ö °ü·Ã Á¤º¸¸¦ ¶ç¿ï¼öµµ ÀÖ½À´Ï´Ù.
var infowindow = new google.maps.InfoWindow(
{
content: "<h1>´ë±¸½Ãû</h1>",
maxWidth: 300
}
);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
À§ÀÇ ¼Ò½º¸¦ Ãß°¡ÇÏ½Ã¸é µË´Ï´Ù.
content ¿¡ ³»¿ëÀº ¸»Ç³¼± ¾ÈÀÇ ³»¿ëÀÔ´Ï´Ù. html ű׷ΠµðÀÚÀÎ Çϼŵµ µË´Ï´Ù.
maxWidth ´Â ¸»Ç³¼±ÀÇ ÃÖ´ë Å©±â Á¦ÇÑÀÔ´Ï´Ù. 300px ·Î Á¦ÇÑÀ» µÎ¾ú½À´Ï´Ù.
![](/wys2/file_attach/2012/10/09/1349749867-39.jpg)
À§¿Í °°ÀÌ °£´ÜÇÑ ½ºÅ©¸³Æ®·Î ±¸±Û Áöµµ¸¦ ´Þ ¼ö ÀÖ½À´Ï´Ù.
¿Ï¼ºµÈ ¼Ò½º¸¦ ¼Ò½ºº¸±â¸¦ Ŭ¸¯ÇÏ¿© ´Ù¿î·Îµå ¹Þ¾Æº¸½Ã±â ¹Ù¶ø´Ï´Ù.
°¨»çÇÕ´Ï´Ù.
|