- 01. ±¸±Û¸ÊÀÇ È°¿ë - Google Maps API
- 02. ±¸±Û¸Ê(Google Maps API) ±âÃÊ Àû¿ë, ±¸±Û¸Ê ÁÂÇ¥°ª ±¸Çϱâ
- 03. ±¸±Û¸Ê(Google Maps API) ´Ù°¢Çü ¿µ¿ª ¼³Á¤Çϱâ
- 04. ±¸±Û¸Ê(Google Maps API) Á¤º¸ â(InfoWindow) ¶ç¿ì±â
- 05. ±¸±Û¸Ê(Google Maps API) ¸¶Ä¿(Marker) Ç¥½ÃÇϱâ
- 06. ±¸±Û¸Ê(Google Maps API) ¿òÁ÷ÀÌ´Â ¸¶Ä¿(Animated Marker) Ç¥½ÃÇϱâ
- 07. ±¸±Û¸Ê(Google Maps API) ¸¶Ä¿(Marker) ¾ÆÀÌÄÜ ¹Ù²Ù±â
- 08. ±¸±Û¸Ê(Google Maps API) ¿©·¯ °³ÀÇ ¸¶Ä¿(Mutiple Marker) Ç¥½ÃÇϱâ
- 09. ±¸±Û¸Ê(Google Maps API) ¿©·¯ °³ÀÇ ¸¶Ä¿¿Í Á¤º¸Ã¢ ¶ç¿ì±â
- 10. ±¸±Û¸Ê(Google Maps API) ¿©·¯ °³ÀÇ ¹Ù¿î½º ¸¶Ä¿(Bounced Marker)¿Í Á¤º¸Ã¢ ¶ç¿ì±â
- 11. ±¸±Û¸Ê(Google Maps API) ¿©·¯ °³ÀÇ ¸¶Ä¿, Á¤º¸Ã¢, ¿µ¿ª¼³Á¤
±¸±Û¸Ê(Google Maps API) ±âÃÊ Àû¿ë, ±¸±Û¸Ê ÁÂÇ¥°ª ±¸Çϱâ
1). ±¸±Û¸Ê ±âÃÊ Àû¿ë
±¸±Û¸Ê(Google Map)À» »ç¿ëÇÏ´Â °¡Àå ±âº»ÀûÀÎ ³»¿ëÀÔ´Ï´Ù. ´ÙÀ½ÀÇ ¼Ò½º´Â Áöµµ »óÀÇ Æ¯Á¤ÁöÁ¡À» Ç¥½ÃµÇ´Â ÁöµµÀÇ Áß¾Ó¿¡ ¿À°Ô ÇÏ´Â ¼Ò½ºÄÚµåÀÔ´Ï´Ù. ±¸±Û¸Ê¿¡¼ ÁöµµÀÇ ¾î¶² ÁöÁ¡À» ÀνÄÇÏ´Â °ÍÀº °æµµ, À§µµÀÇ ÁÂÇ¥°ªÀÔ´Ï´Ù. ÁÂÇ¥°ªÀ» ±¸ÇÏ´Â ¹æ½ÄÀº ¾Æ·¡ÀÇ ¡°2). ±¸±Û ¸Ê ÁÂÇ¥°ª ±¸Çϱ⡱¸¦ ÂüÁ¶ÇϽñ⠹ٶø´Ï´Ù.
<!DOCTYPE html>
< html>
< head>
<meta name=¡±viewport¡± content=¡±initial-scale=1.0, user-scalable=no¡±/>
// viewport ű×: ÆäÀÌÁöÀÇ Å©±âÀÇ È®´ë/Ãà¼Ò¿¡ °ü¿©
// initial-scale=1.0: ¿ø·¡ Å©±â ±×´ë·Î
// user-scalable = no: »ç¿ëÀÚ°¡ ÀÓÀÇ·Î È®´ë/Ãà¼Ò¸¦ ÇÒ ¼ö ¾ø°Ô
<style type=¡±text/css¡±>
html { height : 100% }
body { height : 100%; margin: 0; padding: 0 }
#map_canvas { height : 100% }
< /style>
<script type = ¡°text/javascript¡± src = ¡°http://maps.googleapis.com/maps/api/js?sensor=true¡±></script>
// Google maps APIÀÇ ¸µÅ©
// sensor=true: ÇöÀç »ç¿ëÀÚÀÇ À§Ä¡¸¦ ÀоîµéÀÌ´Â ¿©ºÎ¸¦ ¼±¾ðÇÏ´Â ºÎºÐÀÌ´Ù.
//À§ÀÇ ¿¹½Ã¿¡¼´Â true¶ó°í Ç¥½ÃÇÏ¿© ÇöÀç »ç¿ëÀÚÀÇ À§Ä¡¸¦ ºÒ·¯µéÀÎ´Ù°í ¼±¾ð.
<script type = ¡°text/javascript¡±>
function initialize(){
var latlng = new google.maps.LatLng(37.5240220, 126.9265940);// ÁÂÇ¥°ª
var myOptions = {
zoom: 14,
center:latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(¡°map_canvas¡±), myOptions);
}
</script>
// Google maps APIÀÇ °´Ã¼ ¾È¿¡ º¯¼ö°ªµéÀ» ¼³Á¤ÇÔÀ¸·Î¼ MapÀ» ÃʱâÈÇÑ´Ù.
// initialize()¶ó´Â ÇÔ¼ö¸¦ ¸¸µé¾î ÃʱâÈÇϴµ¥ »ç¿ëÇÑ´Ù.
// google.maps.LatLng: ÁÂÇ¥ º¯¼ö type. ÀÌ typeÀ¸·Î latlng¶ó´Â º¯¼ö¸¦ »ý¼ºÇÑ´Ù.
// myOptions¶ó´Â ¹è¿¿¡ ÁöµµÀÇ È®´ë Á¤µµ(zoom), ÁöµµÀÇ Á᫐ ÁÂÇ¥(center), ÁöµµÀÇ Çü½Ä¿¡ °üÇÑ Á¤º¸(mapTypeid)¸¦
// ÀúÀåÇÏ¿© ¸ÊÀÇ ¼³Á¤ Á¤º¸·Î È°¿ë°¡´É.
// mapTypeid´Â ROADMAP(ÀÏ¹Ý 2D Áöµµ), SATELLITE(À§¼º »çÁø), HYBRID(À§¼º »çÁø°ú µµ·Î¸í µîÀÇ Áö¸í Ç¥½Ã),
// TERRAIN(µî°í¼±°ú ¹°ÀÇ È帧 Ç¥½Ã)ÀÇ ³× °¡Áö Á¾·ù°¡ ÀÖ´Ù.
// ÀÌ ¼³Á¤ Á¤º¸µéÀ» ÃʱâÈ ÇÑ ÈÄ ¾Æ·¡¿Í °°ÀÌ google.maps.Map typeÀÇ º¯¼öÀÎ mapÀ» À§ÀÇ map_canvas ÄÁÅ×À̳ʿÍ
// À§ÀÇ ¼³Á¤¹è¿·Î ¼±¾ðÇÏ¸é µÈ´Ù.
</head>
<body onload=¡±initialize()¡±>
< div id=¡±map_canvas¡± style=¡±width:100%; height:100%¡±></div>
// ÃʱâÈ ÇÔ¼ö¸¦ ½ÇÇàÇÏ¸é¼ body ¾ÈÀÇ map_canvas ÄÁÅ×À̳ÊÀÇ Å©±â¸¦ ÁöÁ¤ÇØÁØ´Ù.
</body>
< /html>
[ÀÚ·áÃâó: Google Map API, http://code.google.com/intl/ko-KR/apis/maps/]
2). ±¸±Û¸Ê ÁÂÇ¥°ª ±¸Çϱâ
a. ±¸±Û¸Ê Áöµµ(http://maps.google.com/)¿¡¼ °Ë»öâ¿¡ ÁÖ¼Ò¸¦ ÀÔ·ÂÇÑ´Ù.
b. ÁÂÇ¥°ªÀ» ±¸ÇÒ ÁöÁ¡¿¡ ¸¶¿ì½ºÄ¿¼¸¦ µÎ°í ¸¶¿ì½º ¿À¸¥ ÂÊ ¸Þ´º
c. ¸¶¿ì½º ¿À¸¥ÂÊ ¸Þ´º¿¡¼ ¡°ÀÌ°÷ÀÌ ±Ã±ÝÇÑ°¡¿ä?¡± Ŭ¸¯
d. °Ë»öâ¿¡ ÇØ´ç ÁöÁ¡ÀÇ ÁÂÇ¥°ªÀÌ ³ªÅ¸³´Ù.