Halaman ini diterjemahkan oleh Cloud Translation API.

Membuat layanan penelusuran bisnis terdekat dengan Google Maps Platform (JavaScript)

1. Sebelum memulai

Pelajari cara menggunakan Maps dan Places API Google Maps Platform untuk membuat penelusuran bisnis lokal, yang menentukan geolokasi pengguna dan menampilkan tempat-tempat menarik di sekitar. Aplikasi ini mengintegrasikan geolokasi, Place Details, Place Photos, dan lainnya.

Prasyarat

Pengetahuan dasar tentang HTML, CSS, dan JavaScript
Project dengan akun penagihan (ikuti petunjuk di langkah berikutnya jika Anda tidak memilikinya).
Untuk langkah pengaktifan di bawah, Anda harus mengaktifkan Maps JavaScript API dan Places API.
Kunci API untuk project di atas.

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:

Membuat akun penagihan.
Membuat project.
Mengaktifkan API dan SDK Google Maps Platform (tercantum di bagian sebelumnya).
Membuat kunci API.

Yang akan Anda lakukan

Membuat halaman web yang menampilkan peta Google
Memusatkan peta pada lokasi pengguna
Cari tempat-tempat terdekat dan tampilkan hasilnya sebagai penanda yang dapat diklik
Ambil dan tampilkan detail selengkapnya tentang setiap tempat

Yang Anda butuhkan

Browser web, seperti Google Chrome (direkomendasikan), Firefox, Safari, atau Internet Explorer
Editor teks atau kode favorit Anda

Mendapatkan kode contoh

Buka antarmuka command line (Terminal di MacOS atau Command Prompt di Windows) dan download kode contoh dengan perintah ini:

git clone https://github.com/googlecodelabs/google-maps-nearby-search-js/

Jika tidak berhasil, klik tombol berikut untuk mendownload semua kode untuk codelab ini, lalu ekstrak file:

Mendownload kode

Ubah ke direktori yang baru saja Anda clone atau download.

cd google-maps-nearby-search-js

Folder stepN berisi status akhir yang diinginkan dari setiap langkah codelab ini. Folder tersebut disediakan sebagai referensi Lakukan semua tugas coding di direktori yang disebut work.

2. Membuat peta dengan pusat default

Ada tiga langkah untuk membuat peta Google di halaman web Anda:

Membuat halaman HTML
Menambahkan peta
Menempelkan kunci API Anda

1. Membuat halaman HTML

Di bawah ini adalah peta yang dibuat pada langkah ini. Peta ini berpusat di Sydney Opera House di Sydney, Australia. Jika pengguna menolak izin mendapatkan lokasi mereka, peta secara default ditetapkan ke lokasi ini dan tetap memberikan hasil penelusuran yang menarik.

Ubah direktori ke folder work/ Anda. Di seluruh codelab ini, lakukan pengeditan pada versi di folder work/.

cd work

Dalam direktori work/, gunakan editor teks Anda untuk membuat file kosong bernama index.html.
Salin kode berikut ke dalam index.html:

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Sushi Finder</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%;
      background-color: grey;
    }

    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    /* TODO: Step 4A1: Make a generic sidebar. */
  </style>
</head>

<body>
  <!-- TODO: Step 4A2: Add a generic sidebar -->

  <!-- Map appears here -->
  <div id="map"></div>

  <!-- TODO: Step 1B, Add a map -->
</body>

</html>

Buka file index.html di browser web.

open index.html

2. Menambahkan peta

Bagian ini menampilkan cara memuat Maps JavaScript API ke dalam halaman web dan menulis JavaScript Anda sendiri yang menggunakan API tersebut untuk menambahkan peta ke halaman web.

Tambahkan kode skrip ini di tempat Anda melihat  setelah div map dan sebelum tag </body> ditutup.

step1/index.html

<!-- TODO: Step 1B, Add a map -->
<script>
    /* Note: This example requires that you consent to location sharing when
     * prompted by your browser. If you see the error "Geolocation permission
     * denied.", it means you probably did not give permission for the browser * to locate you. */

    /* TODO: Step 2, Geolocate your user
     * Replace the code from here to the END TODO comment with new code from
     * codelab instructions. */
    let pos;
    let map;
    function initMap() {
        // Set the default location and initialize all variables
        pos = {lat: -33.857, lng: 151.213};
        map = new google.maps.Map(document.getElementById('map'), {
            center: pos,
            zoom: 15
        });
    }
    /* END TODO: Step 2, Geolocate your user */
</script>

<!-- TODO: Step 1C, Get an API key -->
<!-- TODO: Step 3A, Load the Places Library -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

3. Menempelkan kunci API Anda

Di baris setelah , salin dan ganti nilai parameter kunci di URL sumber skrip dengan kunci API yang Anda buat selama prasyarat.

step1/index.html

<!-- TODO: Step 1C, Get an API key -->
<!-- TODO: Step 3A, Load the Places Library -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Simpan file HTML yang sedang Anda kerjakan.

Melakukan pengujian

Muat ulang tampilan browser dari file yang telah Anda edit. Anda akan melihat peta muncul sekarang di tempat persegi panjang abu-abu sebelumnya. Jika Anda melihat pesan error, pastikan Anda telah mengganti "YOUR_API_KEY" dalam tag <script> akhir dengan kunci API Anda sendiri. Lihat di atas untuk mengetahui cara mendapatkan kunci API jika Anda belum memilikinya.

Kode contoh lengkap

Kode lengkap project ini sampai saat ini tersedia di GitHub.

3. Geolokasi pengguna Anda

Selanjutnya, Anda ingin menampilkan lokasi geografis pengguna atau perangkat di peta Google menggunakan fitur Geolokasi HTML5 browser bersama dengan Maps JavaScript API.

Berikut adalah contoh peta yang menampilkan lokasi geografis Anda jika Anda menjelajah dari Mountain View, California:

Apa yang dimaksud dengan geolokasi?

Geolokasi merujuk pada identifikasi lokasi geografis pengguna atau perangkat komputasi melalui berbagai mekanisme pengumpulan data. Biasanya, sebagian besar layanan geolokasi menggunakan alamat perutean jaringan atau perangkat GPS internal untuk menentukan lokasi ini. Aplikasi ini menggunakan properti navigator.geolocation standar Geolokasi W3C browser web untuk menentukan lokasi pengguna.

Cobalah sendiri

Ganti kode di antara komentar TODO: Step 2, Geolocate your user dan END TODO: Step 2, Geolocate your user dengan kode berikut:

step2/index.html

/* TODO: Step 2, Geolocate your user
    * Replace the code from here to the END TODO comment with this code
    * from codelab instructions. */
let pos;
let map;
let bounds;
let infoWindow;
let currentInfoWindow;
let service;
let infoPane;
function initMap() {
    // Initialize variables
    bounds = new google.maps.LatLngBounds();
    infoWindow = new google.maps.InfoWindow;
    currentInfoWindow = infoWindow;
    /* TODO: Step 4A3: Add a generic sidebar */

    // Try HTML5 geolocation
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(position => {
        pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
        };
        map = new google.maps.Map(document.getElementById('map'), {
        center: pos,
        zoom: 15
        });
        bounds.extend(pos);

        infoWindow.setPosition(pos);
        infoWindow.setContent('Location found.');
        infoWindow.open(map);
        map.setCenter(pos);

        /* TODO: Step 3B2, Call the Places Nearby Search */
    }, () => {
        // Browser supports geolocation, but user has denied permission
        handleLocationError(true, infoWindow);
    });
    } else {
    // Browser doesn't support geolocation
    handleLocationError(false, infoWindow);
    }
}

// Handle a geolocation error
function handleLocationError(browserHasGeolocation, infoWindow) {
    // Set default location to Sydney, Australia
    pos = {lat: -33.856, lng: 151.215};
    map = new google.maps.Map(document.getElementById('map'), {
    center: pos,
    zoom: 15
    });

    // Display an InfoWindow at the map center
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
    'Geolocation permissions denied. Using default location.' :
    'Error: Your browser doesn\'t support geolocation.');
    infoWindow.open(map);
    currentInfoWindow = infoWindow;

    /* TODO: Step 3B3, Call the Places Nearby Search */
}
/* END TODO: Step 2, Geolocate your user */
/* TODO: Step 3B1, Call the Places Nearby Search */

Melakukan pengujian

Simpan file Anda.
Muat ulang halaman.

Sekarang browser akan meminta izin untuk membagikan lokasi Anda kepada aplikasi.

Klik Blokir satu kali untuk melihat apakah tugas tersebut menangani error dengan baik dan tetap terpusat di Sydney.
Muat ulang lagi dan klik Izinkan untuk melihat apakah geolokasi berfungsi dan menggerakkan peta ke lokasi Anda saat ini.

Kode contoh lengkap

Kode lengkap project ini sampai saat ini tersedia di GitHub.

4. Menelusuri tempat-tempat terdekat

Nearby Search memungkinkan Anda menelusuri tempat dalam area yang ditetapkan dengan kata kunci atau ketikan. Nearby Search harus selalu menyertakan lokasi, yang bisa ditetapkan dalam salah satu dari dua cara:

Objek LatLngBounds yang menentukan area penelusuran persegi panjang
Area melingkar didefinisikan sebagai kombinasi dari properti location - yang menentukan pusat lingkaran sebagai objek LatLng — dan radius, yang diukur dalam meter

Mulai Nearby Search dengan panggilan ke metode PlacesService nearbySearch(), yang akan menampilkan array objek PlaceResult.

A. Memuat Places Library

Pertama, untuk mengakses layanan Places Library, perbarui URL sumber skrip Anda untuk memperkenalkan parameter libraries dan menambahkan places sebagai nilai.

step3/index.html

<!-- TODO: Step 3A, Load the Places Library -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">

B. Memanggil permintaan dan tangani respons Places Nearby Search

Selanjutnya, buat Permintaan PlaceSearch. Kolom wajib minimum adalah:

Kolom wajib minimum adalah:

bounds, yang harus berupa objek google.maps.LatLngBounds yang menentukan area penelusuran persegi panjang, atau location dan radius; yang pertama mengambil objek google.maps.LatLng, dan yang kedua mengambil bilangan bulat sederhana yang mewakili radius lingkaran dalam meter. Radius maksimum yang diizinkan adalah 50.000 meter. Perhatikan bahwa saat rankBy disetel ke DISTANCE, Anda harus menentukan lokasi, tetapi tidak dapat menentukan radius atau batasnya.
keyword yang akan dicocokkan dengan semua kolom yang tersedia, termasuk tetapi tidak terbatas pada nama, jenis, dan alamat, serta ulasan pelanggan dan konten pihak ketiga lainnya, atau type, yang membatasi hasil ke tempat yang cocok dengan jenis yang ditentukan. Hanya satu jenis yang dapat ditetapkan (jika lebih dari satu jenis disediakan, semua jenis setelah entri pertama akan diabaikan). Lihat daftar jenis yang didukung.

Untuk codelab ini, Anda akan menggunakan posisi pengguna saat ini sebagai lokasi untuk penelusuran dan menentukan peringkat hasil berdasarkan jarak.

Tambahkan hal berikut pada komentar TODO: Step 3B1 untuk menulis dua fungsi untuk memanggil penelusuran dan menangani respons.

Kata kunci sushi digunakan sebagai istilah penelusuran, tetapi Anda dapat mengubahnya. Kode untuk menentukan fungsi createMarkers disediakan di bagian berikutnya.

step3/index.html

/* TODO: Step 3B1, Call the Places Nearby Search */
// Perform a Places Nearby Search Request
function getNearbyPlaces(position) {
    let request = {
    location: position,
    rankBy: google.maps.places.RankBy.DISTANCE,
    keyword: 'sushi'
    };

    service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, nearbyCallback);
}

// Handle the results (up to 20) of the Nearby Search
function nearbyCallback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
    createMarkers(results);
    }
}

/* TODO: Step 3C, Generate markers for search results */

Tambahkan baris ini ke akhir fungsi initMap di komentar TODO: Step 3B2.

/* TODO: Step 3B2, Call the Places Nearby Search */
// Call Places Nearby Search on user's location
getNearbyPlaces(pos);

Tambahkan baris ini ke akhir fungsi handleLocationError di komentar TODO: Step 3B3.

/* TODO: Step 3B3, Call the Places Nearby Search */
// Call Places Nearby Search on the default location
getNearbyPlaces(pos);

C. Membuat penanda untuk hasil penelusuran

Marker mengidentifikasi lokasi pada peta. Secara default, marker menggunakan gambar standar. Untuk informasi tentang penyesuaian gambar penanda, lihat Penanda.

Konstruktor google.maps.Marker mengambil satu literal objek Marker options, yang menentukan properti awal penanda.

Bidang-bidang berikut sangat penting dan biasanya disetel saat membuat marker:

position (wajib) menentukan LatLng yang mengidentifikasi lokasi awal penanda.
map (opsional) menentukan Peta untuk menempatkan penanda. Jika Anda tidak menentukan peta saat pembuatan penanda, penanda akan dibuat, tetapi tidak dilampirkan ke (atau ditampilkan pada) peta. Anda dapat menambahkan penanda nanti dengan memanggil metode setMap() penanda.
Tambahkan kode berikut setelah komentar TODO: Step 3C untuk menetapkan posisi, peta, dan judul untuk satu penanda per tempat yang ditampilkan dalam respons. Anda juga menggunakan metode extend variabel bounds untuk memastikan bahwa bagian tengah dan semua penanda terlihat di peta.

step3/index.html

/* TODO: Step 3C, Generate markers for search results */
// Set markers at the location of each place result
function createMarkers(places) {
    places.forEach(place => {
    let marker = new google.maps.Marker({
        position: place.geometry.location,
        map: map,
        title: place.name
    });

    /* TODO: Step 4B: Add click listeners to the markers */

    // Adjust the map bounds to include the location of this marker
    bounds.extend(place.geometry.location);
    });
    /* Once all the markers have been placed, adjust the bounds of the map to
    * show all the markers within the visible area. */
    map.fitBounds(bounds);
}

/* TODO: Step 4C: Show place details in an info window */

Melakukan pengujian

Simpan dan muat ulang halaman, lalu klik Izinkan untuk memberikan izin geolokasi.

Anda akan melihat hingga 20 penanda berwarna merah di sekitar lokasi tengah peta.

Muat ulang halaman dan blokir izin geolokasi kali ini.

Apakah Anda masih mendapatkan hasil di pusat default peta Anda (dalam sampel, default-nya adalah Sydney, Australia)?

Kode contoh lengkap

Kode lengkap project ini sampai saat ini tersedia di GitHub.

5. Tampilkan Place Details sesuai permintaan

Setelah memiliki Place ID tempat (dikirimkan sebagai salah satu bidang dalam hasil Penelusuran Di Sekitar), Anda dapat meminta detail tambahan tentang tempat tersebut, misalnya alamat lengkap, nomor telepon, serta peringkat dan ulasan pengguna. Dalam codelab ini, Anda akan membuat sidebar untuk menampilkan Place Details yang lengkap dan membuat penanda menjadi interaktif sehingga pengguna dapat memilih tempat untuk melihat detail.

Anda memerlukan tempat untuk menampilkan Place Details, jadi di sini terdapat beberapa kode sederhana untuk sidebar yang dapat Anda gunakan untuk menggeser dan menampilkan detail tempat saat pengguna mengklik penanda.

Tambahkan kode berikut ke tag style setelah komentar TODO: Step 4A1:

step4/index.html

/* TODO: Step 4A1: Make a generic sidebar */
/* Styling for an info pane that slides out from the left. 
    * Hidden by default. */
#panel {
    height: 100%;
    width: null;
    background-color: white;
    position: fixed;
    z-index: 1;
    overflow-x: hidden;
    transition: all .2s ease-out;
}

.open {
    width: 250px;
}

/* Styling for place details */
.hero {
    width: 100%;
    height: auto;
    max-height: 166px;
    display: block;
}

.place,
p {
    font-family: 'open sans', arial, sans-serif;
    padding-left: 18px;
    padding-right: 18px;
}

.details {
    color: darkslategrey;
}

a {
    text-decoration: none;
    color: cadetblue;
}

Di bagian body tepat sebelum div map, tambahkan div untuk panel detail.

<!-- TODO: Step 4A2: Add a generic sidebar -->
<!-- The slide-out panel for showing place details -->
<div id="panel"></div>

Di fungsi initMap() setelah komentar TODO: Step 4A3, lakukan inisialisasi variabel infoPane seperti ini:

/* TODO: Step 4A3: Add a generic sidebar */
infoPane = document.getElementById('panel');

B. Menambahkan pemroses klik ke penanda

Pada fungsi createMarkers, tambahkan pemroses klik ke setiap penanda saat Anda membuatnya.

Pemroses klik mengambil detail tentang tempat yang dikaitkan dengan penanda tersebut dan memanggil fungsi untuk menampilkan detail.

Tempel kode berikut ke dalam fungsi createMarkers pada komentar kode TODO: Step 4B.

Metode showDetails diimplementasikan di bagian berikutnya.

step4/index.html

/* TODO: Step 4B: Add click listeners to the markers */
// Add click listener to each marker
google.maps.event.addListener(marker, 'click', () => {
    let request = {
    placeId: place.place_id,
    fields: ['name', 'formatted_address', 'geometry', 'rating',
        'website', 'photos']
    };

    /* Only fetch the details of a place when the user clicks on a marker.
    * If we fetch the details for all place results as soon as we get
    * the search response, we will hit API rate limits. */
    service.getDetails(request, (placeResult, status) => {
    showDetails(placeResult, marker, status)
    });
});

Dalam permintaan addListener, properti placeId menentukan satu tempat untuk permintaan detail dan properti fields adalah array nama kolom untuk informasi yang ingin Anda tampilkan tentang tempat tersebut. Untuk daftar lengkap kolom yang dapat diminta, lihat antarmuka PlaceResult.

C. Menampilkan Place Details di jendela info

Jendela info menampilkan konten (biasanya teks atau gambar) dalam dialog di atas lokasi tertentu pada peta. Jendela info memiliki area materi dan batang meruncing. Ujung batang dilekatkan ke lokasi yang ditetapkan pada peta. Biasanya, jendela info dilampirkan ke penanda, tetapi Anda juga dapat melampirkan jendela info ke lintang/bujur tertentu.

Tambahkan kode berikut di komentar TODO: Step 4C untuk membuat InfoWindow yang menampilkan nama dan rating bisnis, serta melampirkan jendela tersebut ke penanda.

Anda menentukan showPanel di bagian berikutnya untuk menampilkan detail pada sidebar.

step4/index.html

/* TODO: Step 4C: Show place details in an info window */
// Builds an InfoWindow to display details above the marker
function showDetails(placeResult, marker, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
    let placeInfowindow = new google.maps.InfoWindow();
    placeInfowindow.setContent('<div><strong>' + placeResult.name +
        '</strong><br>' + 'Rating: ' + placeResult.rating + '</div>');
    placeInfowindow.open(marker.map, marker);
    currentInfoWindow.close();
    currentInfoWindow = placeInfowindow;
    showPanel(placeResult);
    } else {
    console.log('showDetails failed: ' + status);
    }
}

/* TODO: Step 4D: Load place details in a sidebar */

Gunakan detail yang sama dengan yang ditampilkan dalam objek PlaceResult untuk mengisi div lain. Dalam contoh ini, gunakan infoPane yang merupakan nama variabel arbitrer untuk div dengan ID "panel". Setiap kali pengguna mengklik penanda baru, kode ini akan menutup sidebar jika sudah terbuka, menghapus detail lama, menambahkan detail baru, dan membuka sidebar.

Tambahkan kode berikut setelah komentar TODO: Step 4D.

step4/index.html

/* TODO: Step 4D: Load place details in a sidebar */
// Displays place details in a sidebar
function showPanel(placeResult) {
    // If infoPane is already open, close it
    if (infoPane.classList.contains("open")) {
    infoPane.classList.remove("open");
    }

    // Clear the previous details
    while (infoPane.lastChild) {
    infoPane.removeChild(infoPane.lastChild);
    }

    /* TODO: Step 4E: Display a Place Photo with the Place Details */

    // Add place details with text formatting
    let name = document.createElement('h1');
    name.classList.add('place');
    name.textContent = placeResult.name;
    infoPane.appendChild(name);
    if (placeResult.rating != null) {
    let rating = document.createElement('p');
    rating.classList.add('details');
    rating.textContent = `Rating: ${placeResult.rating} \u272e`;
    infoPane.appendChild(rating);
    }
    let address = document.createElement('p');
    address.classList.add('details');
    address.textContent = placeResult.formatted_address;
    infoPane.appendChild(address);
    if (placeResult.website) {
    let websitePara = document.createElement('p');
    let websiteLink = document.createElement('a');
    let websiteUrl = document.createTextNode(placeResult.website);
    websiteLink.appendChild(websiteUrl);
    websiteLink.title = placeResult.website;
    websiteLink.href = placeResult.website;
    websitePara.appendChild(websiteLink);
    infoPane.appendChild(websitePara);
    }

    // Open the infoPane
    infoPane.classList.add("open");
}

E. Menampilkan Foto Tempat dengan Detail Tempat

Hasil getDetails menampilkan array hingga 10 foto yang terkait dengan placeId. Di sini, Anda menampilkan foto pertama di atas nama tempat di sidebar.

Tempatkan kode ini sebelum pembuatan elemen name jika Anda ingin foto muncul di bagian atas sidebar.

step4/index.html

/* TODO: Step 4E: Display a Place Photo with the Place Details */
// Add the primary photo, if there is one
if (placeResult.photos != null) {
    let firstPhoto = placeResult.photos[0];
    let photo = document.createElement('img');
    photo.classList.add('hero');
    photo.src = firstPhoto.getUrl();
    infoPane.appendChild(photo);
}

Melakukan pengujian

Simpan dan muat ulang halaman di browser Anda dan berikan izin geolokasi.
Klik penanda untuk melihat jendela info yang muncul dari penanda yang menampilkan beberapa detail dan sidebar bergeser dari kiri untuk menampilkan detail selengkapnya.
Uji apakah penelusuran juga berfungsi jika Anda memuat ulang dan menolak izin geolokasi. Edit kata kunci penelusuran untuk kueri lain dan jelajahi hasil yang ditampilkan untuk penelusuran tersebut.

Kode contoh lengkap

Kode lengkap project ini sampai saat ini tersedia di GitHub.

6. Selamat

Selamat! Anda telah menggunakan banyak fitur Maps JavaScript API, termasuk Library Places.

Yang telah kita bahas

Membuat peta dengan class google.maps.Map
Menggunakan browser pengguna untuk geolokasi dan menampilkan hasilnya di peta
Menambahkan penanda ke peta Anda dan merespons peristiwa klik pengguna pada penanda tersebut
Menambahkan jendela info untuk menampilkan informasi selengkapnya saat pengguna mengklik penanda
Memuat Places Library dan melakukan Nearby Search
Mengambil dan menampilkan detail tempat serta foto tempat

Pelajari lebih lanjut

Untuk melakukan lebih banyak hal dengan peta, jelajahi dokumentasi Maps JavaScript API dan dokumentasi Places Library, keduanya berisi panduan, tutorial, referensi API, lebih banyak contoh kode, dan saluran dukungan. Beberapa fitur populer adalah Mengimpor Data ke Maps, Mulai Menata Gaya Peta Anda, dan menambahkan Layanan Street View.

Apa jenis codelab yang paling ingin kita buat berikutnya?

Contoh lainnya dalam menggunakan informasi Tempat yang kaya

Lebih banyak codelab menggunakan Maps JavaScript API API

Lebih banyak codelab untuk Android

Lebih banyak codelab untuk iOS

Memvisualisasikan data berbasis lokasi pada peta

Gaya visual kustom peta

Menggunakan StreetView

Apakah codelab yang Anda inginkan tidak tercantum di atas? Ajukan permintaan bersama masalah baru di sini.

Membuat layanan penelusuran bisnis terdekat dengan Google Maps Platform (JavaScript)

1. Sebelum memulai

Prasyarat

Memulai Google Maps Platform

Yang akan Anda lakukan

Yang Anda butuhkan

Mendapatkan kode contoh

2. Membuat peta dengan pusat default

1. Membuat halaman HTML

2. Menambahkan peta

3. Menempelkan kunci API Anda

Melakukan pengujian

Kode contoh lengkap

3. Geolokasi pengguna Anda

Apa yang dimaksud dengan geolokasi?

Cobalah sendiri

Melakukan pengujian

Kode contoh lengkap

4. Menelusuri tempat-tempat terdekat

A. Memuat Places Library

B. Memanggil permintaan dan tangani respons Places Nearby Search

C. Membuat penanda untuk hasil penelusuran

Melakukan pengujian

Kode contoh lengkap

5. Tampilkan Place Details sesuai permintaan

A. Membuat sidebar umum

B. Menambahkan pemroses klik ke penanda

C. Menampilkan Place Details di jendela info

D. Memuat detail tempat di sidebar

E. Menampilkan Foto Tempat dengan Detail Tempat

Melakukan pengujian

Kode contoh lengkap

6. Selamat

Yang telah kita bahas

Pelajari lebih lanjut

Apa jenis codelab yang paling ingin kita buat berikutnya?