구글맵스 개발 시작하기

2013. 1. 15. 15:22WEB/Google Maps



반응형

<!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="https://maps.google.com/maps/api/js?sensor=false">

</script>

<script type="text/javascript">



var gsStatoin = new google.maps.LatLng(37.48144560453497, 126.88266361877436);

var parliament = new google.maps.LatLng(37.4781527917781, 126.88218618556971);

var marker;

var map;


function initialize() {

  var mapOptions = {

zoom: 13,

mapTypeId: google.maps.MapTypeId.ROADMAP,

center: gsStatoin

  };


  map = new google.maps.Map(document.getElementById("map_canvas"),

  mapOptions);


  marker = new google.maps.Marker({

map:map,

animation: google.maps.Animation.DROP,

position: parliament

  });

//   google.maps.event.addListener(marker, 'click', toggleBounce);


  google.maps.event.addListener(map, 'click', function(event) {

alert(event.latLng);

});

}

/*

function toggleBounce() {


  if (marker.getAnimation() != null) {

marker.setAnimation(null);

  } else {

marker.setAnimation(google.maps.Animation.BOUNCE);

  }

}

*/



</script>

</head>

<body onload="initialize()">

<div id="map_canvas" style="width:100%; height:100%"></div>

</body>

</html>



-------------------------------------------------------------------


위의 소스를 실행하면 구글맵의 설정이 완료됩니다.

기존에는 구글맵측에서 API키를 받아 설정했지만, 버전업 후 간단한 스크립트 참조로

구글맵 개발설정을 할 수 있습니다.

body 태그 안쪽에는 맵 캔버스가 위치하고, 맵에 대한 컨트롤, 오버레이 등은 자바스크립트 단에서 처리합니다.

현재 초기 위치는

가산디지털단지역의 위치이고, 마커가 찍힌곳의 위치는 현재 위치(회사)입니다.



구글맵 API : https://developers.google.com/maps/?hl=ko

 

반응형