Anda sudah siap!

Untuk mulai mengembangkan, masuklah ke dokumentasi developer kami.

Aktifkan Google Maps JavaScript API

Untuk membantu Anda memulai, kami akan memandu Anda melalui Google Developers Console untuk melakukan beberapa hal terlebih dahulu:

  1. Buat atau pilih sebuah proyek
  2. Aktifkan Google Maps JavaScript API dan layanan terkait
  3. Buat kunci yang sesuai
Lanjutkan

Layanan Geocoding

Ringkasan

Geocoding adalah proses konversi alamat (seperti "1600 Amphitheatre Parkway, Mountain View, CA") menjadi koordinat geografis (seperti garis lintang 37,423021 dan garis bujur -122,083739), yang bisa Anda gunakan untuk menempatkan marker atau memosisikan peta.

Geocoding terbalik adalah proses mengonversi koordinat geografis menjadi alamat yang bisa dibaca orang. Geocoder terbalik juga memungkinkan Anda menemukan alamat untuk ID tempat yang diberikan.

Google Maps JavaScript API menyediakan kelas geocoder untuk geocoding dan geocoding terbalik dari masukan pengguna secara dinamis. Jika Anda malah ingin melakukan geocode atas alamat statis yang diketahui, lihat Layanan web geocoding.

Memulai

Sebelum menggunakan layanan Geocoding di Google Maps JavaScript API, terlebih dahulu pastikan Google Maps Geocoding API telah diaktifkan di Google API Console, dalam proyek yang sama dengan yang Anda persiapkan untuk Google Maps JavaScript API.

Untuk menampilkan daftar API yang telah diaktifkan:

  1. Masuklah ke Google API Console.
  2. Klik tombol Select a project, kemudian pilih proyek yang sama dengan yang Anda persiapkan untuk Google Maps JavaScript API dan klik Open.
  3. Dari daftar API di Dashboard, cari Google Maps Geocoding API.
  4. Jika sudah melihat API di dalam daftar, artinya Anda sudah siap. Jika API tidak dicantumkan, aktifkan:
    1. Di bagian atas laman, pilih ENABLE API untuk menampilkan tab Library. Atau, dari menu sisi kiri, pilih Library.
    2. Telusuri Google Maps Geocoding API, kemudian pilih dari daftar hasil.
    3. Pilih ENABLE. Bila proses selesai, Google Maps Geocoding API akan muncul dalam daftar API di Dashboard.

Kebijakan dan batas penggunaan

Kuota

Batas penggunaan berikut ini berlaku untuk layanan Geocoding:

Penggunaan layanan Geocoding bersama Standard Plan

  • 2.500 permintaan per hari gratis, dihitung sebagai jumlah kueri sisi-klien dan sisi-server; aktifkan penagihan untuk mengakses kuota harian lebih tinggi, yang dikenakan sebesar $0,50 USD / 1000 permintaan tambahan, hingga 100.000 permintaan per hari.
  • 50 permintaan per detik, yang dihitung sebagai jumlah kueri sisi-klien dan sisi-server.

Penggunaan layanan Geocoding bersama Premium Plan

  • Kuota gratis harian bersama sebesar 100.000 permintaan per 24 jam; permintaan tambahan berlaku pada pembelian tahunan untuk Kredit Maps API.
  • Tanpa batas permintaan sisi-klien per detik, per proyek. Perhatikan, API sisi-server dibatasi 50 permintaan per detik.

Batas kecepatan berlaku per sesi pengguna, berapa pun banyaknya pengguna yang berbagi proyek yang sama.

Batas kecepatan per-sesi mencegah penggunaan layanan sisi-klien untuk permintaan batch, misalnya batch-geocoding. Untuk permintaan batch, gunakan layanan web Google Maps Geocoding API.

Kebijakan

Penggunaan layanan Geocoding harus sesuai dengan kebijakan yang dijelaskan untuk Google Maps Geocoding API.

Permintaan Geocoding

Akses layanan Geocoding bersifat asinkron, karena Google Maps API perlu membuat panggilan ke server eksternal. Karena itu, Anda perlu meneruskan metode callback untuk dieksekusi setelah permintaan diselesaikan. Metode callback ini akan memproses hasilnya. Perhatikan, geocoder mungkin mengembalikan lebih dari satu hasil.

Anda mengakses layanan geocoding Google Maps API dalam kode Anda melalui objek google.maps.Geocoder. Metode Geocoder.geocode() membuat permintaan ke layanan geocoding, meneruskan literal objek GeocoderRequest berisi istilah yang dimasukkan dan metode callback yang akan dieksekusi setelah menerima respons.

Literal objek GeocoderRequest berisi bidang-bidang berikut:

{
 address: string,
 location: LatLng,
 placeId: string,
 bounds: LatLngBounds,
 componentRestrictions: GeocoderComponentRestrictions,
 region: string
}

Parameter yang diperlukan: Anda harus menyediakan salah satu, dan hanya satu, dari bidang-bidang berikut:

  • address — Alamat yang ingin Anda geocode.
  • locationLatLng (atau LatLngLiteral) yang Anda inginkan dalam memperoleh alamat terdekat yang bisa dibaca orang. Geocoder akan membalik geocode. Lihat Geocoding Terbalik untuk informasi selengkapnya.
  • placeId — ID tempat dari lokasi yang Anda inginkan dalam memperoleh alamat terdekat yang bisa dibaca orang. ID tempat adalah sebuah identifier unik yang bisa digunakan bersama Google API lainnya. Misalnya, Anda bisa menggunakan placeId yang dikembalikan oleh Google Maps Roads API untuk mendapatkan alamat titik yang telah diikat. Untuk informasi selengkapnya tentang ID tempat, lihat ringkasan ID tempat. Jika Anda meneruskan sebuah placeId, geocoder akan membalik geocode. Lihat Geocoding Terbalik untuk informasi selengkapnya.

Parameter opsional:

  • boundsLatLngBounds yang akan digunakan untuk mencondongkan hasil geocode secara lebih jelas. Parameter bounds hanya akan memengaruhi, tidak sepenuhnya membatasi, hasil dari geocoder. (Untuk informasi selengkapnya lihat Mencondongkan Viewport di bawah ini.)
  • componentRestrictions — Digunakan untuk membatasi hasil ke daerah tertentu. (Untuk informasi selengkapnya, lihat Pemfilteran Komponen di bawah ini.)
  • region — Kode region, ditetapkan sebagai IANA language region subtag. Umumnya, tag-tag ini memetakan langsung ke nilai yang berisi dua karakter ccTLD ("top-level domain") yang sudah dikenal. Parameter region hanya akan memengaruhi, tidak sepenuhnya membatasi, hasil dari geocoder. (Untuk informasi selengkapnya, lihat Mencondongkan Kode Region di bawah ini.)

Respons Geocoding

Layanan Geocoding memerlukan metode callback yang akan dieksekusi saat pengambilan hasil geocoder. Callback ini harus meneruskan dua parameter untuk menyimpan results dan kode status, dalam urutan tersebut.

Hasil Geocoding

Objek GeocoderResult menyatakan satu hasil geocoding. Permintaan geocode mungkin mengembalikan beberapa objek hasil:

results[]: {
 types[]: string,
 formatted_address: string,
 address_components[]: {
   short_name: string,
   long_name: string,
   postcode_localities[]: string,
   types[]: string
 },
 partial_match: boolean,
 place_id: string,
 postcode_localities[]: string,
 geometry: {
   location: LatLng,
   location_type: GeocoderLocationType
   viewport: LatLngBounds,
   bounds: LatLngBounds
 }
}

Bidang-bidang ini dijelaskan di bawah:

  • types[] adalah larik yang menunjukkan tipe hasil yang dikembalikan. Larik ini berisi nol atau beberapa tag yang mengidentifikasi tipe fitur yang dikembalikan dalam hasil. Misalnya, geocode "Chicago" akan mengembalikan "locality" yang menunjukkan "Chicago" adalah kota, juga mengembalikan "political" yang menunjukkan Chicago adalah entitas politik.
  • formatted_address adalah string berisi alamat yang bisa dibaca orang untuk lokasi ini. Sering kali alamat ini sama dengan "alamat pos", yang terkadang berbeda antara satu negara dengan negara lainnya. (Perhatikan, beberapa negara, seperti Britania Raya, tidak memperbolehkan distribusi alamat pos sebenarnya karena adanya pembatasan pemberian lisensi.) Alamat ini biasanya terdiri dari satu atau beberapa komponen alamat. Misalnya, alamat "111 8th Avenue, New York, NY" berisi komponen alamat terpisah untuk "111 8th Avenue" (alamat jalan), "New York" (kota) dan "NY" (negara bagian AS). Komponen alamat tersebut tercantum di bawah ini. Untuk informasi selengkapnya tentang tipe, lihat Tipe di bawah ini.
  • address_components[] adalah larik berisi komponen alamat terpisah, seperti dijelaskan di atas.
  • partial_match menunjukkan geocoder tidak mengembalikan hasil yang benar-benar cocok dengan permintaan asal, meskipun geocoder bisa mencocokkan sebagian dari alamat yang diminta. Anda mungkin ingin memeriksa permintaan asal untuk mengetahui adanya salah eja dan/atau alamat yang tidak lengkap.

    Kecocokan parsial paling sering terjadi untuk alamat jalan yang tidak ditemukan di lokasi yang Anda teruskan dalam permintaan. Kecocokan parsial juga mungkin dikembalikan bila sebuah permintaan memiliki kecocokan terhadap dua atau beberapa lokasi di daerah yang sama. Misalnya, "21 Henr St, Bristol, UK" akan mengembalikan kecocokan parsial untuk Henry Street dan Henrietta Street. Perhatikan, jika permintaan menyertakan komponen alamat yang salah eja, layanan geocoding mungkin akan menyarankan alamat alternatif. Saran yang terpicu melalui cara ini juga akan dinilai sebagai kecocokan parsial.

  • place_id adalah identifier unik suatu tempat, yang bisa digunakan bersama Google API lainnya. Misalnya, Anda bisa menggunakan place_id bersama pustaka Google Places API untuk mendapatkan detail bisnis setempat, seperti nomor telepon, jam buka, ulasan pengguna, dan lainnya. Lihat ringkasan ID tempat.
  • postcode_localities[] adalah larik yang menunjukkan semua lokalitas yang dimuat dalam kode pos. Ini hanya ada bila hasilnya adalah kode pos yang berisi beberapa lokalitas.
  • geometry berisi informasi berikut:

    • location berisi nilai geocode garis lintang dan garis bujur. Perhatikan, kita mengembalikan lokasi ini sebagai objek LatLng, bukan sebagai string yang diformat.
    • location_type menyimpan data tambahan tentang lokasi yang ditetapkan. Nilai-nilai berikut saat ini didukung:

      • ROOFTOP menunjukkan hasil yang dikembalikan mencerminkan sebuah geocode akurat.
      • RANGE_INTERPOLATED menunjukkan hasil yang dikembalikan mencerminkan perkiraan (biasanya di jalan) interpolasi antara dua titik tepat (seperti persimpangan). Hasil interpolasi umumnya dikembalikan bila rooftop-geocode tidak tersedia untuk alamat jalan.
      • GEOMETRIC_CENTER menunjukkan hasil yang dikembalikan adalah pusat geometris dari hasil seperti polyline (misalnya, jalan) atau poligon (region).
      • APPROXIMATE menunjukkan hasil yang dikembalikan adalah perkiraan.

    • viewport menyimpan viewport yang disarankan untuk hasil yang dikembalikan.
    • bounds (secara opsional dikembalikan) menyimpan LatLngBounds yang bisa sepenuhnya berisi hasil yang dikembalikan. Perhatikan, batas-batas ini mungkin tidak cocok dengan viewport yang disarankan. (Misalnya, San Francisco menyertakan Farallon Islands, yang secara teknis merupakan bagian dari kota, namun tidak boleh dikembalikan dalam viewport.)

Alamat akan dikembalikan oleh Geocoder menggunakan setelan bahasa pilihan browser, atau bahasa yang ditetapkan saat memuat API JavaScript menggunakan parameter language. (Untuk informasi selengkapnya, lihat Pelokalan.)

Tipe Komponen Alamat

Larik types[] dalam hasil yang dikembalikan menunjukkan tipe alamat. Tipe ini juga mungkin dikembalikan dalam larik address_components[] untuk menunjukkan tipe komponen alamat tertentu. Alamat dalam geocoder mungkin memiliki beberapa tipe; tipe tersebut bisa dianggap sebagai "tag". Misalnya, banyak kota diberi tag bertipe political dan locality.

Tipe berikut ini didukung dan dikembalikan oleh HTTP Geocoder:

  • street_address menunjukkan alamat jalan secara tepat.
  • route menunjukkan rute yang telah diberi nama (misalnya "US 101").
  • intersection menunjukkan persimpangan utama, biasanya persimpangan dua jalan besar.
  • political menunjukkan entitas politik. Biasanya, tipe ini menunjukkan poligon dari beberapa pemerintahan sipil.
  • country menunjukkan entitas politik nasional, dan biasanya merupakan tipe urutan tertinggi yang dikembalikan oleh Geocoder.
  • administrative_area_level_1 menunjukkan entitas sipil urutan pertama di bawah tingkat negara. Di Amerika Serikat, tingkat administratif ini adalah negara bagian. Tidak semua negara memiliki tingkat administratif ini.
  • administrative_area_level_2 menunjukkan entitas sipil urutan kedua di bawah tingkat negara. Di Amerika Serikat, tingkat administratif ini adalah county. Tidak semua negara memiliki tingkat administratif ini.
  • administrative_area_level_3 menunjukkan entitas sipil urutan ketiga di bawah tingkat negara. Tipe ini menunjukkan divisi sipil kecil. Tidak semua negara memiliki tingkat administratif ini.
  • administrative_area_level_4 menunjukkan entitas sipil urutan keempat di bawah tingkat negara. Tipe ini menunjukkan divisi sipil kecil. Tidak semua negara memiliki tingkat administratif ini.
  • administrative_area_level_5 menunjukkan entitas sipil urutan kelima di bawah tingkat negara. Tipe ini menunjukkan divisi sipil kecil. Tidak semua negara memiliki tingkat administratif ini.
  • colloquial_area menunjukkan nama alternatif yang umum digunakan untuk entitas.
  • locality menunjukkan gabungan entitas politik kota besar atau kota kecil.
  • sublocality menunjukkan entitas sipil urutan pertama di bawah daerah. Beberapa lokasi mungkin akan menerima salah satu tipe tambahan: sublocality_level_1 hingga sublocality_level_5. Setiap tingkat subdaerah adalah entitas sipil. Angka yang lebih besar menunjukkan area geografis yang lebih kecil.
  • neighborhood menunjukkan daerah sekitar yang telah diberi nama.
  • premise menunjukkan lokasi yang telah diberi nama, biasanya bangunan atau sekumpulan bangunan dengan nama umum
  • subpremise menunjukkan entitas urutan pertama di bawah lokasi yang telah diberi nama, biasanya sebuah bangunan dalam sekumpulan bangunan dengan nama umum.
  • postal_code menunjukkan kode pos seperti yang biasa digunakan untuk penulisan alamat pos dalam negara tersebut.
  • natural_feature menunjukkan fitur alami yang menonjol.
  • airport menunjukkan sebuah bandara.
  • park menunjukkan taman yang telah diberi nama.

Daftar kosong dari tipe menunjukkan tidak ada tipe yang diketahui untuk komponen alamat tertentu, misalnya Lieu-dit di Prancis.

Selain yang disebutkan di atas, komponen alamat mungkin menunjukkan tipe berikut:

  • post_box menunjukkan kotak pos tertentu.
  • street_number menunjukkan nomor rumah secara akurat.
  • floor menunjukkan lantai pada alamat bangunan.
  • room menunjukkan kamar pada alamat bangunan.

Kode Status

Kode status mungkin mengembalikan salah satu nilai berikut:

  • "OK" menunjukkan tidak terjadi kesalahan; alamat berhasil di-parse dan setidaknya satu geocode dikembalikan.
  • ZERO_RESULTS menunjukkan geocode berhasil namun tidak mengembalikan hasil. Ini bisa terjadi jika geocoder meneruskan address yang tidak ada.
  • OVER_QUERY_LIMIT menunjukkan Anda telah melebihi kuota.
  • REQUEST_DENIED menunjukkan permintaan Anda ditolak.
  • INVALID_REQUEST biasanya menunjukkan kueri (address, components atau latlng) tidak ada.
  • "UNKNOWN_ERROR" menunjukkan permintaan tidak bisa diproses karena kesalahan server. Permintaan mungkin berhasil jika Anda mencoba lagi.

Dalam contoh ini, kita melakukan geocode suatu alamat dan menempatkan marker pada nilai garis lintang dan garis bujur yang dikembalikan. Perhatikan, handler diteruskan sebagai literal fungsi anonim.

  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
      zoom: 8,
      center: latlng
    }
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
  }

  function codeAddress() {
    var address = document.getElementById('address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == 'OK') {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

<body onload="initialize()">
 <div id="map" style="width: 320px; height: 480px;"></div>
  <div>
    <input id="address" type="textbox" value="Sydney, NSW">
    <input type="button" value="Encode" onclick="codeAddress()">
  </div>
</body>

Tampilkan contoh (geocoding-simple.html)

Geocoding Terbalik (Pencarian Alamat)

Istilah geocoding umumnya mengacu pada penerjemahan alamat yang bisa dibaca orang menjadi sebuah lokasi pada peta. Proses menerjemahkan terbalik suatu lokasi peta menjadi alamat yang bisa dibaca orang, dikenal sebagai geocoding terbalik.

Geocoder mendukung geocoding terbalik secara langsung. Sebagai ganti memberikan address tekstual, berikan sepasang garis lintang/garis bujur yang dipisah koma dalam parameter location. Sebagai alternatif, berikan placeId untuk menemukan alamat bagi ID tempat yang diberikan.

Geocoding Terbalik melalui Lokasi

Contoh berikut melakukan geocode atas nilai garis lintang/garis bujur dan memusatkan peta di lokasi itu, yang memunculkan jendela info berisi alamat yang telah diformat. Kita mengembalikan hasil kedua, karena kurang spesifik dibandingkan hasil pertama (dalam kasus ini, nama daerah sekitar):

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 40.731, lng: -73.997}
  });
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  document.getElementById('submit').addEventListener('click', function() {
    geocodeLatLng(geocoder, map, infowindow);
  });
}

function geocodeLatLng(geocoder, map, infowindow) {
  var input = document.getElementById('latlng').value;
  var latlngStr = input.split(',', 2);
  var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
  geocoder.geocode({'location': latlng}, function(results, status) {
    if (status === 'OK') {
      if (results[1]) {
        map.setZoom(11);
        var marker = new google.maps.Marker({
          position: latlng,
          map: map
        });
        infowindow.setContent(results[1].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}
<div id="floating-panel">
  <input id="latlng" type="text" value="40.714224,-73.961452">
  <input id="submit" type="button" value="Reverse Geocode">
</div>
<div id="map"></div>
/* 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;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  width: 350px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}
#latlng {
  width: 225px;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 40.731, lng: -73.997}
  });
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  document.getElementById('submit').addEventListener('click', function() {
    geocodeLatLng(geocoder, map, infowindow);
  });
}

function geocodeLatLng(geocoder, map, infowindow) {
  var input = document.getElementById('latlng').value;
  var latlngStr = input.split(',', 2);
  var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
  geocoder.geocode({'location': latlng}, function(results, status) {
    if (status === 'OK') {
      if (results[1]) {
        map.setZoom(11);
        var marker = new google.maps.Marker({
          position: latlng,
          map: map
        });
        infowindow.setContent(results[1].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}

Tampilkan contoh (geocoding-reverse.html)

Perhatikan, dalam contoh sebelumnya kita menampilkan hasil kedua (dengan memilih results[1]. Geocoder terbalik sering kali mengembalikan lebih dari satu hasil. Geocoding "alamat" tidak cuma alamat pos, melainkan cara apa saja untuk menamai suatu lokasi secara geografis. Misalnya, saat geocoding titik di kota Chicago, titik yang diberi geocode bisa diberi label sebagai alamat jalan, sebagai kota (Chicago), sebagai negara bagian (Illinois) atau sebagai negara (Amerika Serikat). Semua adalah alamat untuk geocoder tersebut. Geocoder terbalik akan mengembalikan semua hasil ini.

Geocoder terbalik akan mencocokkan entitas politik (negara, provinsi, kota dan lingkungan), alamat jalan, dan kode pos.

Daftar lengkap alamat yang dikembalikan oleh kueri sebelumnya akan ditampilkan di bawah ini.

results[0].formatted_address: "275-291 Bedford Ave, Brooklyn, NY 11211, USA",
results[1].formatted_address: "Williamsburg, NY, USA",
results[2].formatted_address: "New York 11211, USA",
results[3].formatted_address: "Kings, New York, USA",
results[4].formatted_address: "Brooklyn, New York, USA",
results[5].formatted_address: "New York, New York, USA",
results[6].formatted_address: "New York, USA",
results[7].formatted_address: "United States"

Alamat akan dikembalikan dengan urutan dari yang paling cocok hingga yang paling tidak cocok. Biasanya, alamat yang lebih akurat akan menjadi hasil yang paling menonjol, seperti dalam kasus ini. Perhatikan, kita mengembalikan berbagai tipe alamat, dari alamat jalan yang paling spesifik hingga entitas politik yang kurang spesifik seperti lingkungan, kota, county, negara bagian, dll. Jika Anda ingin mencocokkan alamat yang lebih umum, Anda sebaiknya memeriksa bidang results[].types.

Catatan: Geocoding terbalik bukanlah ilmu pasti. Geocoder akan mencoba untuk menemukan lokasi alamat yang paling dekat dalam toleransi tertentu.

Geocoding Terbalik melalui ID Tempat

Contoh berikut menerima ID tempat, menemukan alamat yang sesuai, dan memusatkan peta di lokasi itu. Ini juga akan memunculkan jendela info yang menampilkan alamat terformat untuk tempat yang relevan:

// Initialize the map.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 40.72, lng: -73.96}
  });
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  document.getElementById('submit').addEventListener('click', function() {
    geocodePlaceId(geocoder, map, infowindow);
  });
}

// This function is called when the user clicks the UI button requesting
// a reverse geocode.
function geocodePlaceId(geocoder, map, infowindow) {
  var placeId = document.getElementById('place-id').value;
  geocoder.geocode({'placeId': placeId}, function(results, status) {
    if (status === 'OK') {
      if (results[0]) {
        map.setZoom(11);
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
        });
        infowindow.setContent(results[0].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}
<div id="floating-panel">
  <!-- Supply a default place ID for a place in Brooklyn, New York. -->
  <input id="place-id" type="text" value="ChIJd8BlQ2BZwokRAFUEcm_qrcA">
  <input id="submit" type="button" value="Reverse Geocode by Place ID">
</div>
<div id="map"></div>
/* 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;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  width: 440px;
}
#place-id {
  width: 250px;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// Initialize the map.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 40.72, lng: -73.96}
  });
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  document.getElementById('submit').addEventListener('click', function() {
    geocodePlaceId(geocoder, map, infowindow);
  });
}

// This function is called when the user clicks the UI button requesting
// a reverse geocode.
function geocodePlaceId(geocoder, map, infowindow) {
  var placeId = document.getElementById('place-id').value;
  geocoder.geocode({'placeId': placeId}, function(results, status) {
    if (status === 'OK') {
      if (results[0]) {
        map.setZoom(11);
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
        });
        infowindow.setContent(results[0].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}

Tampilkan contoh (geocoding-place-id.html)

Mencondongkan Viewport

Anda juga bisa menginstruksikan Geocoding Service agar lebih memilih hasil dalam viewport yang diberikan (dinyatakan berupa kotak pembatas). Anda melakukannya dengan menyetel parameter bounds dalam literal objek GeocoderRequest untuk mendefinisikan batas-batas viewport ini. Perhatikan, pencondongan hanya mengutamakan hasil dalam batas-batas ini; jika hasil yang lebih relevan berada di luar batas-batas ini, mungkin akan disertakan.

Misalnya, geocode untuk "Winnetka" biasanya akan mengembalikan daerah pinggiran kota Chicago:

{
  "types":["locality","political"],
  "formatted_address":"Winnetka, IL, USA",
  "address_components":[{
    "long_name":"Winnetka",
    "short_name":"Winnetka",
    "types":["locality","political"]
  },{
    "long_name":"Illinois",
    "short_name":"IL",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"United States",
    "short_name":"US",
    "types":["country","political"]
  }],
  "geometry":{
    "location":[ -87.7417070, 42.1083080],
    "location_type":"APPROXIMATE"
  },
  "place_id": "ChIJW8Va5TnED4gRY91Ng47qy3Q"
}

Akan tetapi, menetapkan parameter bounds yang mendefinisikan kotak pembatas untuk hasil San Fernando Valley, Los Angeles dalam geocode ini akan mengembalikan daerah sekitar bernama "Winnetka" di lokasi itu:

{
  "types":["sublocality","political"],
  "formatted_address":"Winnetka, California, USA",
  "address_components":[{
    "long_name":"Winnetka",
    "short_name":"Winnetka",
    "types":["sublocality","political"]
  },{
    "long_name":"Los Angeles",
    "short_name":"Los Angeles",
    "types":["administrative_area_level_3","political"]
  },{
    "long_name":"Los Angeles",
    "short_name":"Los Angeles",
    "types":["administrative_area_level_2","political"]
  },{
    "long_name":"California",
    "short_name":"CA",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"United States",
    "short_name":"US",
    "types":["country","political"]
  }],
  "geometry":{
    "location": [34.213171,-118.571022],
    "location_type":"APPROXIMATE"
  },
  "place_id": "ChIJ0fd4S_KbwoAR2hRDrsr3HmQ"
}

Mencondongkan Kode Region

Anda juga bisa menyetel Geocoding Service agar mengembalikan hasil yang dicondongkan ke region tertentu secara eksplisit menggunakan parameter region. Parameter ini mengambil kode region, yang ditetapkan sebagai subtag region bahasa IANA. Umumnya, tag-tag ini memetakan langsung ke nilai yang berisi dua karakter ccTLD ("top-level domain") yang sudah dikenal, seperti "uk" dalam "co.uk" misalnya. Dalam beberapa kasus, tag region juga mendukung kode ISO-3166-1, yang kadang-kadang berbeda dari nilai ccTLD (misalnya "GB" untuk "Great Britain").

Permintaan geocoding bisa dikirim untuk setiap domain yang menjadi tempat aplikasi utama Google Maps menawarkan geocoding. Perhatikan, pencondongan hanya mengutamakan hasil untuk domain tertentu; jika hasil yang lebih relevan ada di luar batas-batas ini, mungkin akan disertakan.

Misalnya, geocode untuk "Toledo" mengembalikan hasil ini, karena domain default untuk Geocoding Service disetel ke United States.

{
  "types":["locality","political"],
  "formatted_address":"Toledo, OH, USA",
  "address_components":[{
    "long_name":"Toledo",
    "short_name":"Toledo",
    "types":["locality","political"]
  },{
    "long_name":"Ohio",
    "short_name":"OH",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"United States",
    "short_name":"US",
    "types":["country","political"]
  }],
  "place_id": "ChIJeU4e_C2HO4gRRcM6RZ_IPHw"
}

Sebuah geocode untuk "Toledo" dengan bidang region disetel ke 'es' (Spanyol) akan mengembalikan kota di Spanyol:

{
  "types":["locality","political"],
  "formatted_address":"Toledo, España",
  "address_components":[{
    "long_name":"Toledo",
    "short_name":"Toledo",
    "types":["locality","political"]
  },{
    "long_name":"Toledo",
    "short_name":"TO",
    "types":["administrative_area_level_2","political"]
  },{
    "long_name":"Castilla-La Mancha",
    "short_name":"CM",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"España",
    "short_name":"ES",
    "types":["country","political"]
  }],
  "place_id": "ChIJ8f21C60Lag0R_q11auhbf8Y"
}

Pemfilteran Komponen

Anda juga bisa menyetel Geocoding Service agar mengembalikan hasil alamat yang dibatasi pada area tertentu. Tetapkan batasan tersebut menggunakan parameter componentRestrictions. Sebuah filter yang terdiri dari satu atau beberapa: route, locality, administrativeArea, postalCode atau country. Hanya hasil yang cocok dengan semua filter yang akan dikembalikan. Nilai-nilai filter mendukung metode yang sama untuk koreksi ejaan dan kecocokan parsial seperti permintaan geocoding lainnya.

Contoh fungsi berikut memperagakan penggunaan parameter componentRestrictions untuk memfilter berdasarkan country dan postalCode:

function codeAddress() {
geocoder.geocode({
  componentRestrictions: {
    country: 'AU',
    postalCode: '2000'
  }
}, function(results, status) {
  if (status == 'OK') {
    map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
      map: map,
      position: results[0].geometry.location
    });
  } else {
    window.alert('Geocode was not successful for the following reason: ' + status);
  }
});
}

Kirim masukan tentang...

Google Maps JavaScript API
Google Maps JavaScript API
Butuh bantuan? Kunjungi halaman dukungan kami.