UroA 개발 블로그

[Q-Map] Javascript Google Map 사용하기 본문

Project/Q-Map

[Q-Map] Javascript Google Map 사용하기

UroA 2016. 7. 18. 01:17

Google Map 사용하기


 https://developers.google.com/maps/documentation/javascript/?hl=ko 사이트를 통해 Google Map 을 시작할 수 있습니다.



프로젝트 생성 & API키 받기


먼저 Google Map을 사용하고자 하는 프로젝트를 생성해야합니다. Google 계정을 통해 로그인 후 '키 가져오기' 버튼을 클릭하여 프로젝트를 생성 후 아래의 순서로 API Key를 할당 받습니다.






Google Map 사용하기


 이제 할당받은 API Key 를 통해 다음과 같이 Google Map 을 사용할 수 있습니다. (YOUR_API_KEY에 본인이 할당받은 Key 사용)

(https://developers.google.com/maps/documentation/javascript/examples/map-simple?hl=ko 참조)



<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
        async defer></script>
  </body>
</html>


저작자표시

'Project > Q-Map' 카테고리의 다른 글

[Q-Map] gmaps 라이브러리 사용하기  (0) 2016.07.18
[Q-Map] wgs84 deg/min/sec -> wgs84 decimal 변경하기  (0) 2016.07.18
[Q-Map] Javascript - Load - Image 라이브러리 사용하기  (0) 2016.07.18
[Q-Map] 서비스 프로토타입 만들기 시작  (0) 2016.07.18
[Q-Map] Bower 란?  (0) 2016.07.06
공유하기 링크
'Project/Q-Map' Related Articles more
Comments