Peta yang Dimasuki

Catatan: Fitur signed-in tidak digunakan lagi. Versi 3.27 dan sebelumnya dari Google Maps JavaScript API tetap mendukung peta yang dimasuki, namun versi mendatang tidak akan lagi mendukung peta yang dimasuki. Pantaulah catatan rilis untuk mengetahui pembaruan. (Anda bisa berlangganan catatan rilis ini.) Versi mendatang Google Maps JavaScript API akan tetap mendukung fitur yang menyimpan tempat ke Google Maps dengan menggunakan jendela info atau SaveWidget.

Bila Anda mengaktifkan proses masuk bersama Google Maps JavaScript API, peta pada situs Anda akan disesuaikan dengan pengguna. Pengguna yang sudah masuk ke akun Google akan bisa menyimpan tempat sehingga bisa menampilkannya nanti di web atau perangkat seluler. Tempat yang disimpan dari peta bisa diatribusikan ke situs atau aplikasi Anda.

Ringkasan

Setiap pengunjung situs Anda akan melihat Google Map yang dikhususkan untuk mereka. Jika mereka masuk dengan akun Google, lokasi tempat, rumah, tempat kerja dan sebagainya yang mereka simpan akan dimasukkan ke dalam peta yang mereka lihat. Ini juga berarti interaksi dengan peta, misalnya menandai lokasi dengan bintang, akan disimpan agar mudah ditampilkan di Google Maps untuk desktop atau seluler, dan Google Map lainnya yang dikunjungi pengguna di web.

Detail spesifik pengguna ini hanya terlihat oleh pengguna yang telah masuk; namun tidak terlihat oleh pengguna lain aplikasi Anda, detail itu juga tidak bisa diakses dengan API. Di bawah ini adalah contoh dari peta yang dimasuki. Anda akan melihat kotak proses masuk Google, atau avatar Google Anda, di kanan atas peta.

Lihat contoh kode lengkap.

Mengaktifkan proses masuk

Peta yang dimasuki memerlukan cookie. Jika Anda mengaktifkan peta yang dimasuki, peta akan menyetel cookie jika pengguna telah masuk.

Untuk mengaktifkan proses masuk pada peta yang dibuat dengan Google Maps JavaScript API, muatlah API v3.18 atau yang lebih baru dengan parameter tambahan signed_in=true.

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

Anda akan melihat kotak proses masuk Google, atau avatar Google Anda, di kanan atas peta.

Pengguna bisa mengeklik kontrol proses masuk di kanan atas peta untuk masuk dengan akun Google mereka. Jika mereka sebelumnya telah masuk ke Google pada properti berbeda, mereka secara otomatis akan masuk ke peta.

Penyimpanan yang Diatribusikan

Bantu pengguna Anda mengingat lokasi yang paling penting bagi mereka dengan memungkinkan mereka menyimpan tempat di Google Maps. Tempat yang disimpan akan muncul di Google Maps lainnya bila pengguna ini melihatnya di web atau perangkat seluler. Bila seorang pengguna menyimpan tempat dari SaveWidget atau InfoWindow, Anda bisa menyertakan atribusi yang dipersonalisasi dan tautan untuk kembali ke aplikasi Anda.

Anda bisa mengaktifkan fitur penyimpanan yang diatribusikan dengan dua cara:

• Tambahkan informasi place ke marker untuk memperbolehkan penyimpanan dari InfoWindow yang ditambatkan ke Marker ini.
• Buat sebuah SaveWidget khusus.

Tempat-tempat tersebut nantinya bisa diakses dengan memilih tempat yang telah disimpan pada peta.

Menyimpan ke Google Maps bersama jendela info

Tambahkan informasi tentang tempat ke marker untuk mengaktifkan kontrol Save to Google Maps pada jendela info default. Kontrol ini secara otomatis akan ditambahkan ke setiap jendela info yang telah dikaitkan dengan marker itu. Anda juga bisa mengatribusikan penyimpanan ke aplikasi Anda untuk membantu pengguna mengingat sumber asalnya.

Untuk mengaktifkan Save to Google Maps dari jendela info:

1. Membuat Marker baru.
2. Dalam MarkerOptions, tetapkan properti map, place dan attribution. Perhatikan, position tidak diperlukan bila place telah disediakan.
3. Dalam objek place, tetapkan location dan salah satu dari:
   • placeId untuk mengidentifikasi tempat secara unik. Ketahui selengkapnya tentang cara mereferensikan sebuah tempat dengan ID tempat.
   • Sebuah string query untuk menelusuri tempat di dekat location. String penelusuran harus sespesifik mungkin. Misalnya: 'stanley park vancouver bc canada'.
4. Dalam objek attribution, tetapkan:
   • source penyimpanan. Biasanya nama situs atau aplikasi Anda.
   • Sebuah webUrl opsional yang disertakan sebagai tautan untuk kembali ke situs Anda.
   • Sebuah iosDeepLinkId opsional, ditetapkan sebagai URL Scheme, yang akan ditampilkan sebagai ganti webUrl bila dilihat di iOS.
5. Buat InfoWindow baru.
6. Tambahkan event listener untuk membuka InfoWindow bila Marker diklik.

Ini akan mengaktifkan opsi Save to Google Maps bila marker diklik.

Di bawah ini adalah contoh yang menggunakan string query untuk menelusuri lokasi.

Lihat contoh kode lengkap.

// [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]

Menyimpan ke Google Maps bersama SaveWidget

Anda bisa menggunakan kontrol SaveWidget untuk membuat UI khusus buat menyimpan tempat. Bila menggunakan SaveWidget, Anda bisa menetapkan data atribusi tambahan agar pengguna bisa mengingat di mana mereka menyimpan tempat tersebut, dan bisa kembali dengan mudah ke aplikasi Anda.

Untuk menambahkan SaveWidget ke aplikasi, Anda perlu melakukan hal berikut.

1. Tambahkan div ke laman yang berisi Google Map.
2. Tunjukkan tempat yang akan disimpan dengan marker, sehingga pengguna Anda mengetahui tempat yang akan mereka simpan.
3. Buat objek SaveWidgetOptions yang menyertakan literal objek place dan attribution.
4. Buat objek SaveWidget baru, teruskan div dan opsi yang telah Anda tambahkan.

Contoh widget penyimpanan untuk kantor Google Sydney ditampilkan di bawah ini. Dalam contoh ini, kita membuat div di luar kanvas peta, dan kemudian menggunakan Google Maps JavaScript API untuk menambahkan div sebagai kontrol.

Lihat contoh kode lengkap.

<!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>