구글맵 google map API 사용법 및 marker 추가, 변경하는 법 (JavaScript)

Programming/Javascript

구글맵 google map API 사용법 및 marker 추가, 변경하는 법 (JavaScript)

Jan92 2022. 2. 26. 16:09

구글맵 google map API를 사용하는 방법 및 marker를 추가하고 변경하는 작업을 알아보겠습니다.

(사용할 API는 'Maps JavaScript API'입니다.)

진행 과정은 먼저 Google Cloud Platform에서 'Maps JavaScript API' 라이브러리 사용 설정 및 API 키 발급받는 과정 이후 실제 html에 구글맵 API를 사용하는 코드를 적용해보겠습니다.

'Google Cloud Platform 설정'

(Google Cloud Platform에 Project가 등록되어있다는 가정하에 진행됩니다.)

Google Cloud Platform -> API 및 서비스 -> 라이브러리 -> Maps JavaScript API

=> 'Maps JavaScript API' 사용 설정을 합니다.

다음으로 API를 사용하기 위해서 API Key를 발급받아야 하는데요.

사용자 인증 정보 -> 사용자 인증 정보 만들기 -> API 키로 이동하여 API Key를 발급받습니다.

발급받은 API Key는 JavaScript 코드에 그대로 노출되기 때문에 로컬 테스트가 아닌 실서버에서는 키 제한사항을 설정해주는 것이 좋습니다.

(혹시나 제한사항이 없는 키를 실서버에 사용하고, 누군가 그 Key를 악용하게 되면 그로 인한 문제가 생길 수 있습니다.)

'Google Map API 코드 예시'

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>google_map</title>
    <!-- javascript -->
    <script src="gm.js" defer></script>
</head>
<body>
    <div class="main_content">
        <h1 class="content_title">google_map</h1>
        <button type="button" id="map_button">이동하기</button>
        <div id="map" style="width: 50%; height: 400px;"></div>
        <script async defer src="https://maps.googleapis.com/maps/api/js?key=INPUTYOURAPIKEY&callback=initMap&region=kr"></script>
    </div>
</body>
</html>

(html 파일이며, JavaScript 부분은 따로 파일로 작업하였습니다.)

'INPUTYOURAPIKEY' 부분에 위 구글 플랫폼에서 발급받은 API Key를 넣어주면 됩니다.

css 파일을 따로 적용하지 않았기 때문에 #map의 style 같은 경우 바로 적용했습니다.

var map;
var button = document.getElementById('map_button');
button.addEventListener('click', changeCenter);

function initMap() {
  var gyeongbokgung = { lat: 37.57979553563185, lng: 126.97706245552442 };
  map = new google.maps.Map( document.getElementById('map'), {
      zoom: 15,
      center: gyeongbokgung
    });

  var mainMarker = new google.maps.Marker({
    position: gyeongbokgung,
    map: map,
    label: {
        text: "경복궁",
        color: "#C70E20"
    },
    icon: {
        url: "pooh_marker.png",
        labelOrigin: new google.maps.Point(100, 55)
    }
  });

  var subMarkerPoint = { lat: 37.57956596361732, lng: 126.9803240214433};
  var subMarker = new google.maps.Marker({
      position: subMarkerPoint,
      map: map,
      label: "국립현대미술관",
      icon: {
        url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png",
        labelOrigin: new google.maps.Point(20, 47),
        anchor: new google.maps.Point(50,32)
      }
    });
}

function changeCenter() {
  var gyeongbokgung = { lat: 37.57979553563185, lng: 126.97706245552442 };
  map.panTo(gyeongbokgung);
  map.setZoom(15);
}

(gm.js 파일입니다.)

initMap(), changeCenter() 두 가지 function이 있는데요. initMap() function은 지도를 초기화(생성)하는 함수이며, changeCenter() function은 설정한 위치로 지도를 다시 이동시키기 위한 함수입니다.

먼저 initMap() function을 살펴보면 new google.maps.Map 함수를 통해 지도를 생성, new google.maps.Marker 함수를 통해 Marker를 생성할 수 있습니다.

map 생성에서는 center가 될 좌표를 지정할 수 있고, 확대 비율 등을 설정할 수 있습니다.

marker 생성에서는 marker 좌표와 label, icon 등을 설정할 수 있는데요. 이때 icon의 url 설정에 사용하기를 원하는 이미지의 경로를 넣어주면 해당 이미지로 marker가 생성되며, labelOrigin 설정을 통해 라벨 위치를 설정할 수 있습니다.

label에서는 text와 color 설정 등을 적용할 수 있습니다.

***

외에 추가 설정할 수 있는 옵션들은 포스팅 하단에 공식문서 및 다른 참고자료를 통해 더 자세하게 볼 수 있습니다.

***

'Google 지도를 제대로 로드할 수 없습니다.'라는 오류가 발생할 경우 해당 계정의 결제 등록 부분에 문제가 있을 수 있습니다.

(이때 맵을 축소 해보면 'For development purspose only'라는 문구를 확인할 수 있습니다.)

API 사용에 대한 과금 부분은 구글 플랫폼에 가입하여 사용 등록을 하더라도 신규 300$ 크레딧 외 Google Maps Platform에서 매월 200$의 무료 크레딧을 주며, 사용이 엄청나게 많은 경우가 아니라면 과금이 발생할 일은 없겠지만 사용할 서비스에 따라 과금 부분을 체크해 볼 필요가 있습니다.

(관련 부분 링크)

Google Maps Platform Billing | Google Developers

Billing overview for Google Maps Platform products Usage is tracked for each Product SKU. A SKU is the combination of the Product API + the service or function called (for example, Places API - Place Details). A product may have multiple SKUs billed at dif

developers.google.com

< 공식 문서 및 참고 자료 >

Google Maps Platform Documentation | Maps JavaScript API | Google Developers

Google Maps Platform Documentation

developers.google.com

Google maps: Add marker label and red dot point under the marker - JSFiddle - Code Playground

jsfiddle.net

저작자표시

'Programming > Javascript' 카테고리의 다른 글

JavaScript 클립보드 복사하는 방법(Clipboard API, clipboard.js) (0)	2022.06.17
Javascript Cookie 쿠키 저장, 가져오기, 삭제 함수 (0)	2022.06.03
비동기 통신 Ajax 개념 (Asynchronous Javascript And Xml) (0)	2021.08.26
TransactionRequiredException: Executing an update/delete query 오류의 해결 방법은 @Transaction (0)	2021.08.09
input type=datetime-local 최솟값 min, 현재값 value 적용하는 방법 (0)	2021.08.08

현재글구글맵 google map API 사용법 및 marker 추가, 변경하는 법 (JavaScript)

여기 저번에 왔던 것 같은데?