Google is committed to advancing racial equity for Black communities. See how.

Menambahkan peta ke situs Anda (JavaScript)

Abstrak

Dalam codelab ini, Anda akan mempelajari semua yang dibutuhkan untuk mulai menggunakan Google Maps Platform untuk web. Anda akan mempelajari semua dasar-dasarnya, mulai dari melakukan persiapan hingga memuat Maps JavaScript API, menampilkan peta pertama Anda, menggunakan penanda dan pengelompokan penanda, menggambar di peta, dan menangani interaksi pengguna.

Yang akan Anda buat

e52623cb8578d625.png

Di codelab ini, Anda membuat aplikasi web sederhana yang melakukan hal berikut:

  • Memuat Maps JavaScript API
  • Menampilkan peta yang berpusat di Sydney, Australia
  • Menampilkan penanda kustom untuk atraksi populer di Sydney
  • Menerapkan pengelompokan penanda
  • Memungkinkan interaksi pengguna yang memusatkan kembali peta dan menggambar lingkaran pada peta saat penanda diklik

Yang akan Anda pelajari

  • Memulai Google Maps Platform
  • Memuat Maps API JavaScript secara dinamis dari kode JavaScript
  • Memuat peta
  • Menggunakan penanda, penanda kustom, dan pengelompokan penanda
  • Menggunakan sistem peristiwa Maps JavaScript API untuk menyediakan interaksi pengguna
  • Mengontrol peta secara dinamis
  • Menggambar pada peta

Prasyarat

Anda harus mempelajari item di bawah untuk menyelesaikan Codelab ini. Jika Anda sudah terbiasa menggunakan Google Maps Platform, langsung buka Codelab.

Produk Google Maps Platform yang Diperlukan

Dalam Codelab ini, Anda akan menggunakan produk Google Maps Platform berikut:

Persyaratan Lainnya untuk Codelab ini

Untuk menyelesaikan codelab ini, Anda memerlukan akun, layanan, dan alat berikut:

  • Akun Google Cloud Platform dengan penagihan diaktifkan
  • Kunci API Google Maps Platform dengan Maps JavaScript API diaktifkan
  • Pengetahuan dasar tentang JavaScript, HTML, dan CSS
  • Node.js terinstal di komputer Anda
  • Editor teks atau IDE pilihan Anda

Memulai Google Maps Platform

Jika Anda belum pernah menggunakan Google Maps Platform, ikuti panduan Memulai Google Maps Platform atau tonton playlist Memulai Google Maps Platform untuk menyelesaikan langkah-langkah berikut:

  1. Buat akun penagihan.
  2. Buat project.
  3. Aktifkan API dan SDK Google Maps Platform.
  4. Buat kunci API.

Menyiapkan Google Maps Platform

Jika Anda belum memiliki akun Google Cloud Platform dan project dengan penagihan diaktifkan, lihat panduan Memulai Google Maps Platform untuk membuat akun penagihan dan project.

  1. Di Cloud Console, klik menu drop-down project, lalu pilih project yang ingin Anda gunakan untuk codelab ini.

  1. Aktifkan API dan SDK Google Maps Platform yang diperlukan untuk codelab ini di Google Cloud Marketplace. Untuk melakukannya, ikuti langkah-langkah dalam video ini atau dokumentasi ini.
  2. Buat kunci API di halaman Kredensial di Cloud Console. Anda dapat mengikuti langkah-langkah dalam video ini atau dokumentasi ini. Semua permintaan ke Google Maps Platform memerlukan kunci API.

Penyiapan Node.js

Jika Anda belum memilikinya, buka https://nodejs.org/ untuk mendownload dan menginstal runtime Node.js di komputer.

Node.js disertai dengan npm, sebuah pengelola paket yang Anda perlukan untuk menginstal dependensi untuk codelab ini.

Penyiapan template permulaan project

Sebelum memulai codelab ini, lakukan hal berikut untuk mendownload template project permulaan, serta kode solusi lengkap:

  1. Download atau lakukan fork repo GitHub untuk codelab ini di https://github.com/googlecodelabs/maps-platform-101-js.

Project permulaan terletak di direktori /starter dan menyertakan struktur file dasar yang Anda butuhkan untuk menyelesaikan codelab. Semua yang Anda butuhkan ada di direktori /starter/src. 2. Setelah mendownload project permulaan, jalankan npm install di direktori /starter. Tindakan ini akan menginstal semua dependensi yang diperlukan yang tercantum di package.json. 3. Setelah dependensi diinstal, jalankan npm start di direktori.

Project permulaan telah disiapkan agar Anda dapat menggunakan webpack-dev-server, yang mengompilasi dan menjalankan kode yang Anda tulis secara lokal. webpack-dev-server juga otomatis memuat ulang aplikasi Anda di browser setiap kali Anda membuat perubahan kode.

Jika ingin melihat kode solusi lengkap berjalan, Anda dapat menyelesaikan langkah-langkah penyiapan di atas pada direktori /solution.

Sebelum memulai, pastikan Anda mengikuti langkah-langkah yang ada di Melakukan Penyiapan. Selesai? Oke, kini saatnya membuat aplikasi web pertama Anda menggunakan Google Maps Platform.

Dasar penggunaan Google Maps Platform untuk web adalah Maps JavaScript API. API ini menyediakan antarmuka JavaScript untuk menggunakan semua fitur Google Maps Platform, termasuk peta, penanda, alat gambar, dan layanan Google Maps Platform lainnya, seperti Places.

Mulai dengan memuat Maps JavaScript API.

Jika pernah menggunakan Maps JavaScript API sebelumnya, Anda mungkin terbiasa memuatnya dengan memasukkan tag script ke dalam file HTML seperti ini:

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

Ini masih menjadi cara yang sangat valid untuk memuat API, namun dalam JavaScript modern, dependensi biasanya disertakan secara dinamis dari kode. Untuk menyelesaikan tag script setara di atas dari kode, lakukan hal berikut:

  1. Buka /src/app.js. File ini adalah tempat Anda akan mengerjakan seluruh pekerjaan untuk codelab ini.
  2. Buat fungsi loadMapsJSAPI(), dan deklarasikan variabel untuk kunci API Google Maps Platform dan URI untuk memuat Maps JavaScript API.

Perhatikan bahwa Anda perlu mengganti YOUR API KEY dalam kode contoh di bawah dengan kunci API Anda yang sebenarnya.

function loadMapsJSAPI() {
  const googleMapsAPIKey = 'YOUR API KEY';
  const googleMapsAPIURI = `https://maps.googleapis.com/maps/api/js?key=${googleMapsAPIKey}&callback=runApp`;
}
  1. Buat stub untuk callback runApp.

Perhatikan bahwa dalam variabel googleMapsAPIURI, ada parameter callback=runApp. Ini mendeklarasikan nama fungsi yang ingin kita jalankan secara otomatis setelah Maps JavaScript API dimuat sepenuhnya. Untuk saat ini, ganti (stubbing) dengan pernyataan console.log:

function runApp() {
  console.log('Maps JS API loaded');
}
  1. Buat tag script.

Selanjutnya, buat tag script secara dinamis dengan parameter yang sesuai.

Untuk melakukannya, tambahkan cuplikan kode di bawah ke loadMapsJSAPI(). Ini akan menyisipkan tag script ke dalam DOM, dan memuat Maps JavaScript API secara asinkron dengan cara yang sama ketika Anda melakukan hardcode secara langsung di index.html.

const script = document.createElement('script');
script.src = googleMapsAPIURI;
script.defer = true;
script.async = true;
  1. Lampirkan fungsi callback Anda ke window.

Karena Anda memuat Maps API JavaScript secara dinamis, bukannya secara inline dalam file HTML menggunakan tag script, Anda perlu menambahkan callback langsung ke objek window DOM agar dapat diakses oleh Maps JavaScript API. Untuk melakukannya, tambahkan ini ke loadMapsJSAPI():

  window.runApp = runApp;
  1. Tambahkan tag script ke head. Sekarang Anda hanya perlu menambahkan tag script ke document.head untuk memuat Maps JavaScript API saat halaman web dimuat.
document.head.appendChild(script);
  1. Muat Maps JavaScript API.

Untuk menjalankan pemuatan Maps JavaScript API, panggil loadMapsJSAPI() di bagian atas app.js:

loadMapsJSAPI();

Jika semuanya berhasil, Anda akan melihat pernyataan console.log dari callback runApp() di konsol browser:

4fa88d1618cc7fd.png

Sebagai ringkasan, Anda sejauh ini telah memuat Maps JavaScript API dari kode secara dinamis dan menentukan fungsi callback yang dijalankan setelah Maps JavaScript API selesai dimuat.

File app.js Anda akan terlihat seperti ini:

loadMapsJSAPI();
function runApp() {
  console.log('Maps JS API loaded');
}

function loadMapsJSAPI(googleMapsAPIKey) {
  const googleMapsAPIKey = 'YOUR API KEY';
  const googleMapsAPIURI = `https://maps.googleapis.com/maps/api/js?key=${googleMapsAPIKey}&callback=runApp`;

  const script = document.createElement('script');
  script.src = googleMapsAPIURI;
  script.defer = true;
  script.async = true;

  window.runApp = runApp;

  document.head.appendChild(script);
}

Setelah Maps JavaScript API dimuat, Anda akan memuat peta di langkah berikutnya.

Kini saatnya untuk menampilkan peta pertama Anda.

Bagian yang paling umum digunakan pada Maps JavaScript API adalah google.maps.Map, yang merupakan class yang memungkinkan kita membuat dan memanipulasi instance peta. Lihat cara melakukannya dengan membuat fungsi baru yang disebut displayMap().

  • Definisikan setelan peta Anda.

Maps JavaScript API mendukung berbagai setelan yang berbeda untuk peta, namun hanya dua yang diperlukan:

  • center: menetapkan lintang dan garis bujur untuk pusat peta.
  • zoom: menetapkan tingkat zoom awal peta.

Gunakan kode berikut untuk memusatkan peta di Sydney, Australia, dan berikan tingkat zoom 14, yang merupakan tingkat zoom yang tepat untuk menampilkan pusat kota.

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14
  };
}
  • Dapatkan div tempat peta akan dimasukkan ke DOM.

Sebelum dapat menampilkan peta, Anda harus memberi tahu Maps JavaScript API tempat tampilan peta di halaman. Jika melihat sekilas di index.html, Anda akan melihat bahwa sudah ada div yang terlihat seperti ini:

<div id="map"></div>

Untuk memberi tahu Maps JavaScript API bahwa ini adalah tempat Anda ingin memasukkan peta, gunakan document.getElementById untuk mendapatkan referensi DOM-nya:

const mapDiv = document.getElementById('map');
  • Buat instance google.maps.Map.

Untuk meminta Maps JavaScript API membuat peta baru yang dapat ditampilkan, buat instance google.maps.Map, dan teruskan mapDiv dan mapOptions.

Anda juga menampilkan instance Map dari fungsi ini sehingga Anda dapat melakukan lebih banyak hal dengan instance peta ini nantinya:

  const map = new google.maps.Map(mapDiv, mapOptions);
  return map;
  • Tampilkan peta.

Setelah menentukan semua logika untuk membuat instance peta, Anda tinggal memanggil displayMap() dari fungsi callback runApp() agar peta dipanggil setelah Maps JavaScript API dimuat:

function runApp() {
  console.log('Maps JS API loaded');
  const map = displayMap();
}

Sekarang Anda akan melihat peta Sydney yang indah di browser Anda.

fb0cd6bc38532780.png

Sebagai ringkasan, pada langkah ini Anda telah menentukan opsi tampilan untuk peta, membuat instance peta baru, dan memasukkannya ke dalam DOM.

Fungsi displayMap() Anda akan terlihat seperti ini:

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}

Selanjutnya, Anda akan menambahkan beberapa penanda ke peta.

Ada banyak hal yang dilakukan developer dengan Maps JavaScript API, namun menempatkan penanda pada peta tentunya menjadi hal yang paling populer. Penanda memungkinkan Anda menampilkan titik tertentu pada peta, dan merupakan elemen UI yang umum untuk menangani interaksi pengguna. Jika pernah menggunakan Google Maps sebelumnya, Anda mungkin terbiasa dengan penanda default, yang terlihat seperti ini:

590815267846f166.png

Pada langkah ini, Anda akan menggunakan google.maps.Marker untuk menempatkan penanda pada peta.

  1. Tentukan objek untuk lokasi penanda Anda.

Untuk memulai, buat fungsi addMarkers() baru, dan deklarasikan objek locations yang memiliki sekumpulan titik lintang/bujur berikut untuk tempat wisata populer di Sydney.

Selain itu, perhatikan bahwa Anda perlu meneruskan instance Map ke fungsi tersebut. Anda akan menggunakannya nanti saat membuat instance penanda.

function addMarkers(map) {
  const locations = {
    operaHouse: { lat: -33.8567844, lng: 151.213108 },
    tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
    manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
    hyderPark: { lat: -33.8690081, lng: 151.2052393 },
    theRocks: { lat: -33.8587568, lng: 151.2058246 },
    circularQuay: { lat: -33.858761, lng: 151.2055688 },
    harbourBridge: { lat: -33.852228, lng: 151.2038374 },
    kingsCross: { lat: -33.8737375, lng: 151.222569 },
    botanicGardens: { lat: -33.864167, lng: 151.216387 },
    museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
    maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
    kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
    aquarium: { lat: -33.869627, lng: 151.202146 },
    darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
    barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
  }
}
  1. Buat instance google.maps.Marker untuk setiap penanda yang ingin Anda tampilkan.

Untuk membuat penanda, gunakan kode di bawah ini untuk melakukan iterasi melalui objek locations menggunakan loop for...in, buat kumpulan opsi tentang bagaimana setiap penanda akan dirender, lalu buat instance google.maps.Marker untuk setiap lokasi.

Perhatikan properti icon dari markerOptions. Masih ingat dengan pin peta default yang dibahas sebelumnya? Tahukah Anda bahwa Anda juga bisa menyesuaikan pin tersebut untuk menjadi gambar yang diinginkan? Anda bisa melakukannya.

Properti icon memungkinkan Anda menyediakan jalur ke setiap file gambar yang ingin Anda gunakan sebagai penanda kustom. Jika Anda memulai codelab ini dengan menggunakan template project kami, maka gambar sudah disertakan dalam /src/images.

Perhatikan juga bahwa Anda perlu menyimpan instance penanda dalam array dan menampilkannya dari fungsi sehingga dapat digunakan nanti.

  const markers = [];
  for (const location in locations) {
    const markerOptions = {
      map: map,
      position: locations[location],
      icon: './img/custom_pin.png'
    }
    const marker = new google.maps.Marker(markerOptions);
    markers.push(marker);
  }
  return markers;
  1. Tampilkan penanda.

Maps JavaScript API secara otomatis membuat dan menampilkan penanda setiap kali instance google.maps.Marker yang baru dibuat, jadi sekarang Anda hanya perlu mengupdate fungsi callback runApp() untuk memanggil addMarkers() dan meneruskan ke instance Map Anda:

function runApp() {
  const map = displayMap();
  const markers = addMarkers(map);
}

Sekarang Anda akan melihat penanda kustom di peta:

1e4a55de15215480.png

Sebagai ringkasan, pada langkah ini, Anda telah menentukan sekumpulan lokasi penanda dan membuat instance google.maps.Marker dengan ikon penanda kustom untuk setiap lokasi.

Fungsi addMarkers() Anda akan terlihat seperti ini:

function addMarkers(map) {
  const locations = {
    operaHouse: { lat: -33.8567844, lng: 151.213108 },
    tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
    manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
    hyderPark: { lat: -33.8690081, lng: 151.2052393 },
    theRocks: { lat: -33.8587568, lng: 151.2058246 },
    circularQuay: { lat: -33.858761, lng: 151.2055688 },
    harbourBridge: { lat: -33.852228, lng: 151.2038374 },
    kingsCross: { lat: -33.8737375, lng: 151.222569 },
    botanicGardens: { lat: -33.864167, lng: 151.216387 },
    museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
    maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
    kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
    aquarium: { lat: -33.869627, lng: 151.202146 },
    darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
    barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
  }
  const markers = [];
  for (const location in locations) {
    const markerOptions = {
      map: map,
      position: locations[location],
      icon: './img/custom_pin.png'
    }
    const marker = new google.maps.Marker(markerOptions);
    markers.push(marker);
  }
  return markers;
}

Pada langkah berikutnya, Anda akan melihat cara meningkatkan kualitas pengalaman pengguna terkait penanda yang menggunakan pengelompokan penanda.

Saat menggunakan banyak penanda atau penanda yang letaknya saling berdekatan, Anda mungkin mengalami masalah ketika penanda tumpang-tindih atau tampak bergerombol, yang menyebabkan pengalaman pengguna menjadi buruk. Misalnya, setelah membuat penanda di langkah terakhir, Anda mungkin melihat tampilan ini:

6e39736160c6bce4.png

Di sinilah pengelompokan penanda diperlukan. Pengelompokan penanda adalah fitur lain yang umum diterapkan, yang mengelompokkan penanda yang letaknya berdekatan menjadi satu ikon, yang akan berubah bergantung pada tingkat zoom, seperti di bawah ini:

4f372caab95d7499.png

Algoritme untuk pengelompokan penanda membagi area peta yang terlihat menjadi sebuah petak, lalu mengelompokkan ikon yang berada di sel yang sama. Untungnya, Anda tidak perlu khawatir tentang hal tersebut karena tim Google Maps Platform telah membuat library utilitas open source yang berguna, yang disebut MarkerClustererPlus. Library ini akan melakukan semuanya untuk Anda secara otomatis. Anda dapat melihat sumber untuk MarkerClustererPlus di GitHub.

  1. Impor MarkerCluster.

Untuk project template untuk codelab ini, library utilitas MarkerClustererPlus sudah disertakan dalam dependensi yang dideklarasikan dalam file package.json, sehingga Anda sudah menginstalnya saat menjalankan npm install di awal codelab ini.

Untuk mengimpor library, tambahkan hal berikut ke bagian atas file app.js Anda:

import MarkerClusterer from '@google/markerclustererplus';
  1. Buat instance MarkerClusterer yang baru.

Untuk membuat cluster penanda, Anda perlu melakukan dua hal: menyediakan ikon yang ingin Anda gunakan untuk cluster penanda, dan membuat instance MarkerClusterer yang baru.

Pertama, deklarasikan objek yang menetapkan jalur ke ikon yang ingin Anda gunakan. Dalam project template, sudah ada kumpulan gambar yang disimpan di ./img/m. Perhatikan bahwa nama file gambar diberi nomor secara berurutan dengan awalan yang sama: m1.png, m2.png, m3.png, dan seterusnya.

Saat Anda menetapkan properti imagePath dalam opsi untuk pengelompok penanda, Anda cukup memberikan awalan file dan jalur, dan pengelompok penanda secara otomatis akan menggunakan semua file dengan awalan tersebut dan menambahkan angka ke bagian akhir.

Kedua, buat instance MarkerClusterer yang baru, dan teruskan ke instance Map, tempat Anda ingin cluster penanda ditampilkan dan array instance Marker dikelompokkan.

function clusterMarkers(map, markers) {
  const clustererOptions = { imagePath: './img/m' }
  const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
}
  1. Tampilkan cluster penanda.

Panggil clusterMarkers() dari fungsi callback runApp(). Cluster penanda secara otomatis ditambahkan ke peta saat instance MarkerClusterer dibuat di panggilan fungsi.

function runApp() {
  console.log('Maps JS API loaded');
  const map = displayMap();
  const markers = addMarkers(map);
  clusterMarkers(map, markers);
}

Sekarang Anda akan melihat beberapa cluster penanda pada peta.

e52623cb8578d625.png

Perhatikan bahwa jika Anda memperbesar atau memperkecil, MarkerClustererPlus akan otomatis mengubah nomor dan ukuran cluster untuk Anda. Anda juga dapat mengklik ikon cluster penanda untuk memperbesar dan melihat semua penanda yang disertakan dalam cluster tersebut.

d572fa11aca13eeb.png

Sebagai ringkasan, pada langkah ini Anda telah mengimpor library utilitas open source MarkerClustererPlus dan menggunakannya untuk membuat instance MarkerClusterer yang secara otomatis mengelompokkan penanda yang dibuat di langkah sebelumnya.

Fungsi clusterMarkers() Anda akan terlihat seperti ini:

function clusterMarkers(map, markers) {
  const clustererOptions = { imagePath: './img/m' }
  const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
}

Selanjutnya, Anda akan mempelajari cara menangani interaksi pengguna.

Sekarang Anda memiliki peta yang terlihat bagus yang menampilkan beberapa tujuan wisata paling populer di Sydney. Pada langkah ini, Anda akan menambahkan penanganan tambahan tertentu untuk interaksi pengguna menggunakan sistem peristiwa Maps JavaScript API untuk lebih meningkatkan kualitas pengalaman pengguna peta Anda.

Maps JavaScript API menyediakan sistem peristiwa komprehensif yang menggunakan pengendali peristiwa JavaScript agar Anda dapat menangani berbagai interaksi pengguna dalam kode. Misalnya, Anda dapat membuat pemroses peristiwa untuk memicu eksekusi kode untuk interaksi seperti pengguna mengklik peta dan penanda, menggeser tampilan peta, memperbesar dan memperkecil, dan lainnya.

Pada langkah ini, Anda akan menambahkan pemroses klik ke penanda Anda, lalu secara terprogram membuat peta bergeser untuk menempatkan penanda yang diklik pengguna di pusat peta.

  1. Tetapkan pemroses klik pada penanda Anda.

Semua objek dalam Maps JavaScript API yang mendukung sistem peristiwa menerapkan sekumpulan fungsi standar untuk menangani interaksi pengguna, seperti addListener, removeListener, dan lainnya.

Untuk menambahkan pemroses peristiwa klik ke setiap penanda, lakukan iterasi array markers lalu panggil addListener pada instance penanda untuk melampirkan pemroses untuk peristiwa click:

function addPanToMarker(map, markers) {
  markers.map(marker => {
    marker.addListener('click', event => {

    });
  });
}
  1. Geser ke penanda saat diklik.

Peristiwa click dipicu setiap kali pengguna mengklik atau mengetuk penanda, dan menampilkan peristiwa sebagai objek JSON dengan informasi tentang elemen UI yang diklik. Untuk meningkatkan kualitas pengalaman pengguna peta, Anda dapat menangani peristiwa click dan menggunakan objek LatLng untuk mendapatkan lintang dan bujur penanda yang diklik.

Setelah Anda melakukannya, cukup teruskan ke fungsi panTo() bawaan instance Map untuk membuat peta bergeser kembali ke pusat dengan lancar pada penanda yang diklik dengan menambahkan kode berikut dalam fungsi callback pengendali peristiwa:

const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
map.panTo(location);
  1. Tetapkan pemroses klik.

Panggil addPanToMarker() dari runApp(), dan teruskan peta serta penanda ke sini untuk menjalankan kode dan menetapkan pemroses klik.

function runApp() {
  console.log('Maps JS API loaded');
  const map = displayMap();
  const markers = addMarkers(map);
  clusterMarkers(map, markers);
  addPanToMarker(map, markers);
}

Sekarang buka browser dan klik penanda Anda. Anda akan melihat peta bergeser kembali ke pusat secara otomatis saat penanda diklik.

Sebagai rangkuman, dalam langkah ini, Anda telah menggunakan sistem peristiwa Maps JavaScript API untuk menetapkan pemroses klik ke semua penanda pada peta, mengambil garis lintang dan garis bujur penanda dari peristiwa klik yang diaktifkan, dan menggunakannya untuk membuat peta kembali ke pusat setiap kali penanda diklik.

Fungsi addPanToMarker() Anda akan terlihat seperti ini:

function addPanToMarker(map, markers) {
  markers = markers.map(marker => {
    marker.addListener('click', event => {
      const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
      map.panTo(location);
    });
  });
  return markers;
}

Tinggal satu langkah lagi. Berikutnya, Anda akan meningkatkan lagi kualitas pengalaman pengguna peta dengan menggunakan fitur gambar Maps JavaScript API.

Sejauh ini, Anda telah membuat peta Sydney yang menampilkan penanda untuk tujuan wisata yang populer dan menangani interaksi pengguna. Untuk langkah terakhir dalam codelab ini, Anda akan menggunakan fitur gambar Maps JavaScript API untuk menambahkan fitur tambahan yang berguna ke pengalaman peta Anda.

Bayangkan peta ini akan digunakan oleh pengguna yang ingin menjelajahi kota Sydney. Fitur yang berguna akan memvisualisasikan radius di sekeliling penanda saat diklik. Ini akan mempermudah pengguna memahami tujuan lain apa saja yang bisa ditempuh dengan berjalan kaki dari penanda yang diklik.

Maps JavaScript API mencakup sekumpulan fungsi untuk menggambar bentuk pada peta, seperti persegi, poligon, garis, dan lingkaran. Selanjutnya, Anda akan merender lingkaran untuk menampilkan radius 800 meter (sekitar setengah mil) di sekeliling penanda saat diklik.

  1. Gambar lingkaran dengan google.maps.Circle.

Fungsi gambar di Maps JavaScript API memberi Anda berbagai opsi tentang bagaimana objek yang digambar akan muncul pada peta. Untuk merender radius lingkaran, deklarasikan sekumpulan opsi untuk lingkaran, seperti warna, ketebalan garis luar, tempat lingkaran akan dipusatkan dan radiusnya, lalu buat instance google.maps.Circle yang baru untuk membuat lingkaran baru:

function drawCircle(map, location) {
  const circleOptions = {
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    map: map,
    center: location,
    radius: 800
  }
  const circle = new google.maps.Circle(circleOptions);
  return circle;
}
  1. Gambar lingkaran saat penanda diklik.

Untuk menggambar lingkaran saat pengguna mengklik penanda, Anda hanya perlu memanggil fungsi drawCircle() yang sudah Anda tulis di atas dari callback pemroses klik di addPanToMarker(), dan meneruskan peta dan lokasi penanda.

Perhatikan bagaimana pernyataan kondisional juga ditambahkan yang akan memanggil circle.setMap(null). Tindakan ini akan menghapus lingkaran yang sebelumnya dirender dari peta jika pengguna mengklik penanda lain, sehingga Anda tidak akan mendapatkan peta yang tertutup lingkaran saat pengguna menjelajahi peta.

Fungsi addPanToMarker() Anda akan terlihat seperti ini:

function addPanToMarker(map, markers) {
  let circle;
  markers.map(marker => {
    marker.addListener('click', event => {
      const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
      map.panTo(location);
      if (circle) {
        circle.setMap(null);
      }
      circle = drawCircle(map, location);
    });
  });
}

Selesai. Buka browser Anda, dan klik salah satu penanda. Anda akan melihat radius lingkaran yang dirender di sekelilingnya:

254baef70c3ab4d5.png

Anda telah berhasil membuat aplikasi web pertama Anda menggunakan Google Maps Platform, termasuk memuat Maps JavaScript API, memuat peta, menggunakan penanda, mengontrol dan menggambar pada peta, dan menambahkan interaksi pengguna.

Untuk melihat kode yang sudah selesai, lihat project yang telah selesai di direktori /solutions.

Apa langkah selanjutnya?

Dalam codelab ini, Anda telah mempelajari apa saja yang dapat Anda lakukan dengan Maps JavaScript API. Selanjutnya, coba tambahkan beberapa fitur berikut ke peta:

  • Ubah jenis peta untuk menampilkan peta satelit, hibrid, dan medan.
  • Aktifkan pelokalan untuk memuat peta dalam berbagai bahasa.
  • Sesuaikan interaksi pengguna lainnya seperti zoom dan kontrol peta.
  • Tambahkan jendela info untuk menampilkan informasi saat penanda diklik.
  • Lihat library tambahan yang tersedia untuk Maps JavaScript API yang mengaktifkan fungsi tambahan, seperti Places, gambar, dan visualisasi.

Untuk terus mempelajari lebih lanjut cara bekerja dengan Google Maps Platform di web, lihat link berikut: