Menggunakan Geocoding dan Places API dengan Gaya visual berbasis data

Anda dapat menggunakan Geocoding API, atau Places API, di Maps JavaScript API untuk menelusuri wilayah, dan mendapatkan informasi selengkapnya tentang tempat yang ditampilkan oleh layanan pencarian wilayah. Geocoding API dan Places API adalah alternatif yang efektif dan stabil untuk mendapatkan ID tempat. Jika sudah menggunakan ID tempat, Anda dapat menggunakan kembali ID tersebut dengan mudah menggunakan Gaya visual berbasis data.

Tambahkan Geocoding dan Places ke aplikasi Maps JavaScript API dengan cara berikut:

Menggunakan Geocoding API

Geocoding API memungkinkan Anda mengonversi alamat menjadi koordinat geografis, dan sebaliknya. Penggunaan berikut dapat digabungkan dengan Gaya visual berbasis data:

  • Gunakan Geocoding untuk mendapatkan area pandang untuk suatu wilayah.
  • Terapkan pemfilteran komponen ke panggilan Geocoding Anda guna mendapatkan ID tempat untuk wilayah administratif 1-4, lokalitas, atau kode pos.
  • Gunakan geocoding terbalik untuk menemukan ID tempat berdasarkan koordinat lintang/bujur, atau bahkan menampilkan ID tempat untuk semua komponen di lokasi tertentu.

Mendapatkan area pandang untuk suatu wilayah

Layanan Geocoding dapat mengambil ID tempat dan menampilkan area pandang, yang dapat Anda teruskan ke fungsi map.fitBounds() untuk melakukan zoom ke poligon batas pada peta. Contoh berikut menunjukkan penggunaan layanan Geocoding untuk mendapatkan area pandang, kemudian memanggil map.fitBounds():

// Set up the geocoder.
geocoder = new google.maps.Geocoder();

...

// Call Geocoding API and zoom to the resulting bounds.
function zoomToPolygon(placeid) {
    geocoder
        .geocode({ placeId: placeid })
        .then(({ results }) => {
            map.fitBounds(results[0].geometry.viewport, 155);
        })
        .catch((e) => {
            console.log('Geocoder failed due to: ' + e)
        });
}

Menggunakan geocoding terbalik

Geocoding terbalik dapat digunakan untuk menemukan ID tempat. Contoh fungsi layanan Geocoding berikut menampilkan ID tempat untuk semua komponen alamat pada koordinat lintang/bujur yang ditentukan:

// Set up the geocoder.
geocoder = new google.maps.Geocoder();

...

// Call Geocoding API.
function getPlaceIds(latLng) {
    geocoder
        .geocode({ latLng })
        .then(({ results }) => {
            console.log('Geocoding result:');
            console.log(results[0]);
            console.log(results[0].place_id);
            console.log(results[0].address_components);
        })
        .catch((e) => {
            console.log('Geocoder failed due to: ' + e)
        });
}

Ini adalah panggilan layanan Web geocoding terbalik yang setara:

https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930

Untuk menggunakan geocoding terbalik dengan pemfilteran komponen guna mendapatkan komponen alamat untuk satu atau beberapa jenis berikut di lokasi yang ditentukan:

  • administrativeArea
  • country
  • locality
  • postalCode

Contoh fungsi berikutnya menunjukkan penggunaan layanan Geocoding, yang menambahkan pembatasan komponen dengan geocoding terbalik untuk mendapatkan semua komponen alamat di lokasi yang ditentukan hanya untuk jenis locality:

// Set up the geocoder.
geocoder = new google.maps.Geocoder();

...

function getPlaceIdWithRestrictions(latLng) {
    geocoder
        .geocode({ latLng,
            componentRestrictions: {
              country: "US",
              locality: "chicago",
            },
        })
        .then(({ results }) => {
            console.log('Geocoding result with restriction:');
            console.log(results[0]);
            console.log(results[0].place_id);
            console.log(results[0].address_components);
            console.log(results[0].address_components[1].types[0]);
            console.log(results[0].address_components[1].long_name);
        })
        .catch((e) => {
            console.log('getPlaceId Geocoder failed due to: ' + e)
        });
}

Ini adalah panggilan layanan Web geocoding terbalik yang setara:

https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930&result_type=locality

Menggunakan Place Autocomplete untuk menemukan wilayah

Widget Place Autocomplete menyediakan cara yang mudah bagi pengguna Anda untuk menelusuri wilayah. Untuk mengonfigurasi widget Place Autocomplete agar hanya menampilkan wilayah, tetapkan types ke (regions), seperti yang ditunjukkan dalam cuplikan berikut:

// Set up the Autocomplete widget to return only region results.
const autocompleteOptions = {
  fields: ["place_id", "type"],
  strictBounds: false,
  types: ["(regions)"],
};

Mendapatkan detail tempat untuk suatu wilayah

Data detail tempat untuk suatu wilayah dapat sangat berguna. Misalnya, Anda dapat:

  • Menelusuri ID tempat batas berdasarkan nama tempat.
  • Mendapatkan area pandang untuk zoom hingga batas.
  • Mendapatkan jenis fitur untuk batas (misalnya, locality).
  • Mendapatkan alamat berformat, yang me-resolve ke "Place Name, State, Country" di wilayah Amerika Serikat (misalnya, "Ottumwa, IA, USA").
  • Mendapatkan data bermanfaat lainnya seperti foto.

Contoh ini menunjukkan penggunaan layanan Places untuk membuat permintaan Find Place from Query guna mendapatkan ID tempat untuk Negara Bagian Washington:

const request = {
    query: 'Washington',
    fields: ['place_id'],
  };

function findPlaceId() {
    placesService
        .findPlaceFromQuery(request, function (results, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
                console.log(results[0]);
            }
        });
}

Ini adalah panggilan layanan Web Find Place yang setara:

https://maps.googleapis.com/maps/api/place/findplacefromtext/json?fields=place_id&input=Washington&inputtype=textquery&key=YOUR_API_KEY

Contoh berikut membuat permintaan detail tempat layanan Places untuk mendapatkan place.geometry.viewport, lalu memanggil map.fitBounds() untuk memusatkan peta pada poligon batas yang dipilih.

const request = {
  placeId: placeid,
  fields: [
    "name",
    "formatted_address",
    "geometry",
    "photos",
    "type",
  ],
};

placesService.getDetails(request, (place, status) => {
  if (
    status === google.maps.places.PlacesServiceStatus.OK &&
    place &&
    place.geometry &&
    place.geometry.location
  ) {
    // Zoom to the boundary polygon.
    let viewport = place.geometry.viewport;
    map.fitBounds(viewport, 155);

    // Print some place details to the console.
    const types = place.types;
    console.log("Feature type: " + types[0]);
    console.log("Formatted address: " + formatted_address);
    }
  }
});