모든 준비를 마쳤습니다!

개발을 시작하려면 개발자 문서로 이동하세요.

Google Maps JavaScript API 활성화

개발을 시작하기 위해 Google Developers Console에서 우선적으로 해야 할 일을 몇 가지 소개하겠습니다.

  1. 프로젝트 생성 또는 선택
  2. Google Maps JavaScript API 및 관련 서비스 활성화
  3. 적합한 키 생성
계속

로그인된 지도

Google Maps JavaScript API으로 로그인을 활성화하면 사이트의 지도가 사용자에게 맞춰집니다. Google 계정에 로그인한 사용자는 나중에 웹이나 모바일 기기에서 보기 위해 장소를 저장할 수 있습니다. 지도에서 저장된 장소는 사이트 또는 앱에 특성화될 수 있습니다.

개요

사이트를 방문하는 모든 사람은 각자 자신에게 맞는 Google 지도를 보게 됩니다. Google 계정으로 로그인하면 사용자가 보는 지도에 저장된 장소, 집, 직장 위치 등이 바로 표시됩니다. 또한 위치에 별 표시하기 등과 같은 지도와의 상호작용이 데스크톱이나 모바일용 Google 지도와 사용자가 웹에서 방문하는 다른 Google 지도에서 쉽게 볼 수 있도록 저장됨을 의미합니다.

이러한 사용자별 상세정보는 로그인한 사용자에게만 보입니다. 애플리케이션의 다른 사용자에게는 보이지 않고 API로 액세스할 수도 없습니다. 다음은 로그인한 지도의 예시입니다. 지도 오른쪽 위에서 Google 로그인 상자 또는 Google 아바타를 볼 수 있습니다.

전체 코드 샘플을 참조하세요.

로그인 활성화

Google Maps JavaScript API로 생성된 지도에서 로그인을 활성화하려면, 추가 signed_in=true 매개변수로 API v3.18 이상을 로드합니다.

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

지도 오른쪽 위에서 Google 로그인 상자 또는 Google 아바타를 볼 수 있습니다.

사용자가 지도의 오른쪽 위에서 로그인 컨트롤을 클릭하여 Google 계정으로 로그인할 수 있습니다. 이전에 다른 속성에서 Google에 로그인한 경우, 지도에 자동으로 로그인됩니다.

특성화된 저장

사용자가 Google 지도에 장소를 저장해서 가장 중요한 장소를 기억할 수 있게 합니다. 저장된 장소는 이 사용자가 웹이나 모바일 기기에서 볼 때 다른 Google 지도에 나타납니다. 사용자가 SaveWidget 또는 InfoWindow에서 장소를 저장하면 개인화된 특성과 링크를 앱에 다시 포함할 수 있습니다.

특성화된 저장 기능은 두 가지 방식으로 활성화할 수 있습니다.

  • 마커에 place 정보를 추가하여 이 Marker에 고정된 InfoWindow에서 저장할 수 있도록 합니다.
  • 사용자 지정 SaveWidget을 생성합니다.

장소는 나중에 지도의 저장된 장소를 선택하여 액세스할 수 있습니다.

정보 창으로 Google 지도에 저장

마커에 장소에 대한 정보를 추가하여 기본 정보 창에서 Google 지도에 저장 컨트롤을 활성화합니다. 이 컨트롤은 해당 마커와 연관된 모든 정보 창에 자동으로 추가됩니다. 사용자가 원래 소스를 기억할 수 있도록 선택적으로 저장을 앱에 특성화할 수 있습니다.

정보 창에서 Google 지도에 저장을 활성화하려면:

  1. Marker를 생성합니다.
  2. MarkerOptions에서 map, placeattribution 속성을 지정합니다. 참고로 place가 제공되는 경우 position은 필요 없습니다.
  3. place 객체에서 location과 다음 중 하나를 지정합니다.
    • 장소를 고유하게 식별하는 placeId. 장소 ID로 장소를 참조하는 방법에 대해 자세히 알아보세요.
    • location 근처에서 장소를 검색하기 위한 query 문자열. 검색 문자열은 최대한 구체적이어야 합니다. 예: 'stanley park vancouver bc canada'.
  4. attribution 객체에서 다음을 지정합니다.
    • 저장의 source. 대개 사이트나 앱 이름입니다.
    • 사이트에 다시 링크로 포함하기 위한 선택적 webUrl.
    • 선택적 iosDeepLinkId. URL 구성표로 지정되고, iOS에서 볼 때 webUrl 대신 표시됩니다.
  5. InfoWindow를 생성합니다.
  6. 이벤트 리스너를 추가하여 Marker를 클릭하면 InfoWindow를 엽니다.

그러면 마커를 클릭할 때 Google 지도에 저장 옵션이 활성화됩니다.

다음은 query 문자열을 사용하여 위치를 검색하는 예시입니다.

전체 코드 샘플을 참조하세요.

// [START script-body]
      // When you add a marker using a Place instead of a location, the Maps
      // API will automatically add a 'Save to Google Maps' link to any info
      // window associated with that marker.
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: {lat: -33.8666, lng: 151.1958}
        });

        var marker = new google.maps.Marker({
          map: map,
          // Define the place with a location, and a query string.
          place: {
            location: {lat: -33.8666, lng: 151.1958},
            query: 'Google, Sydney, Australia'

          },
          // Attributions help users find your site again.
          attribution: {
            source: 'Google Maps JavaScript API',
            webUrl: 'https://developers.google.com/maps/'
          }
        });

        // Construct a new InfoWindow.
        var infoWindow = new google.maps.InfoWindow({
          content: 'Google Sydney'
        });

        // Opens the InfoWindow when marker is clicked.
        marker.addListener('click', function() {
          infoWindow.open(map, marker);
        });
      }
// [END script-body]

SaveWidget으로 Google 지도에 저장

SaveWidget 컨트롤을 사용하여 장소를 저장하기 위한 사용자 지정 UI를 생성할 수 있습니다. SaveWidget을 사용하면, 사용자가 장소를 저장한 위치를 기억하고 쉽게 앱으로 돌아갈 수 있도록 추가 특성 데이터를 지정할 수 있습니다.

SaveWidget을 앱에 추가하려면 다음 절차를 수행해야 합니다.

  1. Google 지도를 포함하는 페이지에 div를 추가합니다.
  2. 사용자가 어느 장소를 저장하는지 알 수 있도록 마커로 저장할 장소를 나타냅니다.
  3. placeattribution 객체 리터럴을 포함하는 SaveWidgetOptions를 생성합니다.
  4. SaveWidget 객체를 생성하고 div와 추가한 옵션을 전달합니다.

아래 예시는 Google 시드니 사무소의 저장 위젯입니다. 이 예시에서는 지도 캔버스 외부에 div를 생성한 다음 Google Maps JavaScript API를 사용하여 해당 div를 컨트롤로 추가합니다.

전체 코드 샘플을 참조하세요.

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Save Widget</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* 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;
      }
      #save-widget {
        width: 300px;
        box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
        background-color: white;
        padding: 10px;
        font-family: Roboto, Arial;
        font-size: 13px;
        margin: 15px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="save-widget">
      <strong>Google Sydney</strong>
      <p>We’re located on the water in Pyrmont, with views of the Sydney Harbour Bridge, The
          Rocks and Darling Harbour. Our building is the greenest in Sydney. Inside, we have a
          "living wall" made of plants, a tire swing, a library with a nap pod and some amazing
          baristas.</p>
    </div>
    <script>
      /*
       * This sample uses a custom control to display the SaveWidget. Custom
       * controls can be used in place of the default Info Window to create a
       * custom UI.
       * This sample uses a Place ID to reference Google Sydney. Place IDs are
       * stable values that uniquely reference a place on a Google Map and are
       * documented in detail at:
       * https://developers.google.com/maps/documentation/javascript/places#placeid
       */

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: {lat: -33.8666, lng: 151.1958},
          mapTypeControlOptions: {
            mapTypeIds: [
              'roadmap',
              'satellite'
            ],
            position: google.maps.ControlPosition.BOTTOM_LEFT
          }
        });

        var widgetDiv = document.getElementById('save-widget');
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(widgetDiv);

        // Append a Save Control to the existing save-widget div.
        var saveWidget = new google.maps.SaveWidget(widgetDiv, {
          place: {
            // ChIJN1t_tDeuEmsRUsoyG83frY4 is the place Id for Google Sydney.
            placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
            location: {lat: -33.866647, lng: 151.195886}
          },
          attribution: {
            source: 'Google Maps JavaScript API',
            webUrl: 'https://developers.google.com/maps/'
          }
        });

        var marker = new google.maps.Marker({
          map: map,
          position: saveWidget.getPlace().location
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap">
    </script>
  </body>
</html>

다음에 대한 의견 보내기...

Google Maps JavaScript API
Google Maps JavaScript API
도움이 필요하시나요? 지원 페이지를 방문하세요.