(1) 구글 지도 API – 지도 만들기

먼저 국내에서 대표적으로 활용할 수 있는 지도 API를 나열해보자면 구글 지도 API , 네이버 지도 API, 카카오 지도 API 이렇게 세 곳이 있습니다. 저 같은 경우에는 처음에 구글 지도 API로 프로토타입을 완성하고 비용 문제 때문에 네이버 지도 vs 카카오 지도 고민을 하다가 현재는 카카오 지도 API를 활용하고 있는 상태인데요.

개발 시간의 순서대로 작성을 하다보니 구글 지도 API에 관한 포스팅을 먼저 작성하게 되었습니다. 향후에 시간적 여유가 있으면 구글 지도 API에서 구현된 동일한 기능을 카카오 지도 API에서 구현하는 방법에 대해서도 포스팅을 할 계획입니다.

추가적으로 개발자로서도 고민을 했었던 부분에 대해서도 작성할 계획인데 사실 전공자든 비전공자든 어떠한 프로젝트나 계획을 진행시키는데 있어서 자신이 원하는 방향성과 현실적인 문제이슈들을 보완하게 되는데요 비전공자의 경우는 먼저 아이디어를 떠올리고 이후 기술적인 문제들을 해결하는 방식이라면 전공자는 그래도 기초지식이 있으니 기술적인 아이디어가 있는 상태에서 실현가능성 있는 아이디어를 더 빠르게 체크할 수 있는게 장점이라고 할 수 있겠네요.

저는 비전공자다 보니 먼저 서비스의 방향성을 결정하고 그에대한 기술적인 이슈를 공부해서 보완하는 식으로 프로젝트를 진행했었습니다. 어쨋든 천릿길도 한걸음부터라고 구글 지도 API에 먼저 정해진 좌표를 입력하여 웹페이지에 지도와 마커(위치를 표시해주는 화살표)를 띄우는 방법부터 진행해보도록 하겠습니다.

구글 클라우드(Google Cloud) : Google Maps Platform

먼저 구글 지도 API를 활용하기 위해서는 구글 클라우드의 구글 맵 플랫폼(Google Maps Platform)으로 들어가야 합니다. 구글 지도 API를 활용하기 위해서는 API Key를 발급받을 필요가 있는데 당연히 이를 위해서는 구글 가입이 필수구요.

API Key를 발급받으면 매월 약 200달러 (한화로 약 24만원)에 상응하는 서비스를 무료로 이용할 수 있으며 초과 사용량에 대해서 과금이 되는 형태입니다. 회원가입하고 API를 발급받는 절차는 다른분들의 포스팅에서도 잘 알려져있고 구글 가이드에서 쉽게 찾아볼수 있으니 API를 발급받으셨다는 가정하에 설명을 진행하겠습니다.

상단메뉴의 [문서] – [Maps JavaScript API]로 이동한다

구글 맵 플랫폼에 들어가면 [문서] – [Maps JavaScript API] 메뉴로 이동하시면 웹에서 개발할 수 있는 자바스크립트 기반의 지도 API에 대하여 구글에서 제공하는 모든 공개문서들을 열람할 수 있는데요

여기에 구글 지도 API 라이브러리의 변수나 유용한 예제들이 많으니 대부분의 기능은 여기에서 아이디어를 얻을 수 있다고 보시면 될것 같습니다. 세부적인 구현방법에 대해서는 각종 포럼들에서도 검색을 통해 잘 활용합시다.

Maps JavaScript API 메뉴로 들어가면 크게 볼 부분이… 먼저 Samples입니다. 다른 항목들도 지도 API를 이용하시다보면 필연적으로 보게 되실텐데요.

그러고보니 Guides 항목에 보시면 두 번쨰에 Get An API Key라고 되어있는데 여기서도 API Key 발급에 대한 설명을 보실수 있습니다. 먼저 Samples를 눌러 각종 예제들이 있는 화면으로 이동합니다.

Samples에는 말 그대로 구글 지도 API를 이용해서 유용하게 활용할 수 있는 각종 예제들이 모여있습니다. 평소 에어비엔비나 호텔스컴바인 같은 서비스를 생각하셨던 분들이라면 해당 샘플 메뉴에서 많은 영감들을 얻으실수 있을거라고 생각됩니다.

먼저 제일 간단한 Simple Map에 대한 코드를 살펴보겠습니다. 접근 메뉴는 [Samples] – [Basics] – [Simple Map] 입니다. 참고로 지도 아래의 콘솔창에서는 JavaScript, CSS, HTML, All 의 선택이 가능한데요. ALL을 누르신후 이클립스나 자신의 개발 플랫폼으로 가져오시면 동일하게 구현할 수가 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <style type="text/css">
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }

      /* Optional: Makes the sample page fill the window. */
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script>
      "use strict";

      let map;

      function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: {
            lat: -34.397,
            lng: 150.644
          },
          zoom: 8
        });
      }
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

먼저 6번째 줄에 YOUR_API_KEY라고 적혀진 부분에 발급받은 본인의 API KEY를 입력합니다. 그러면 예제와 동일하게 구현이 가능하며 현재는 맵의 초기 중심점이 경도(Latitude ) : -34.397 위도(Longitude) : 150.644 의 호주로 되어있습니다.

서울로 확인해보고 싶으시면 경도(Latitude ) : 37.538 위도(Longitude) : 126.989 의 값으로 입력하시면 서울을 중심으로 초기화된 구글 지도를 보실수가 있습니다.

향후에도 설명드리겠지만 지도 API 기반 서비스에서 위도와 경도는 매우 중요합니다. 실제로 국내의 위치기반 서비스 중 대부분이 동일한 지리학적 개념을 기본으로 합니다. 도로명 주소나 행정구역 등도 연관이 있게 되는데요. 이러한 부분도 차차 설명해나가도록 하겠습니다.

Zoom은 맵이 초기화되어 로딩 될때 초기값을 의미하며 1~15 범위까지 사용이 가능하니 직접 입력해서 적절한 뷰포인트를(View Point)를 확인해주세요. 다음은 지도에 마커를 띄우는 예제를 소개하겠습니다.

2022.12.14 - [정보기술] - (2) 구글 지도 API - 단일 마커 표시하기

(2) 구글 지도 API - 단일 마커 표시하기

2022.12.14 - [정보기술] - (1) 구글 지도 API – 지도 만들기 2022.12.14 - [정보기술] - (2) 구글 지도 API - 단일 마커 표시하기 2022.12.14 - [정보기술] - (3) 구글 지도 API - 다중 마커 표시하기 2022.12.14 - [정보

iftraveler.tistory.com

'정보기술' 카테고리의 다른 글

(4) 구글 지도 API - 정보창 표시하기 (0)	2022.12.14
(3) 구글 지도 API - 다중 마커 표시하기 (1)	2022.12.14
(2) 구글 지도 API - 단일 마커 표시하기 (0)	2022.12.14
구글 지도 API 활용하기 - 에어비엔비 스타일 사이트 만들기 (1)	2022.12.14
정보의 바다에서 가치의 바다로 : 신뢰 프로토콜 (0)	2022.12.13

당신과 나의 어바웃 라이프

(1) 구글 지도 API – 지도 만들기

'정보기술' 카테고리의 다른 글

댓글

티스토리툴바

(1) 구글 지도 API – 지도 만들기

'정보기술' 카테고리의 다른 글

관련글

댓글

티스토리툴바