Menambahkan Peta Google dengan Penanda ke Situs Web Anda

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Pengantar

Tutorial ini menunjukkan cara menambahkan peta Google sederhana dengan penanda ke halaman web. Artikel ini cocok bagi orang yang memiliki pengetahuan awal atau menengah tentang HTML dan CSS, serta sedikit pengetahuan tentang JavaScript. Untuk panduan lanjutan pembuatan peta, baca panduan developer.

Di bawah ini adalah peta yang akan Anda buat menggunakan tutorial ini. Penanda diposisikan di Uluru (juga dikenal sebagai Ayers Rock) di Taman Nasional Uluru-Kata Tjuta.

Bagian di bawah ini menampilkan seluruh kode yang Anda butuhkan untuk membuat peta dalam tutorial ini.

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;

CSS

/* Set the size of the div element that contains the map */
#map {
  height: 400px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}

HTML

<html>
  <head>
    <title>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

Coba Sampel

Memulai

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

  1. Membuat halaman HTML
  2. Menambahkan peta dengan penanda
  3. Mendapatkan kunci API

Anda membutuhkan browser web. Pilih salah satu yang terkenal seperti Google Chrome (direkomendasikan), Firefox, Safari, atau Edge, berdasarkan platform Anda dari daftar browser yang didukung.

Langkah 1: Buat halaman HTML

Berikut adalah kode untuk halaman web HTML dasar:

<!DOCTYPE html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

Perhatikan bahwa ini adalah halaman yang sangat mendasar dengan judul tingkat tiga (h3) dan satu elemen div. Anda bisa menambahkan materi yang disukai ke laman web.

Memahami kode

Kode di bawah membuat halaman HTML yang terdiri dari head dan body.

<html>
 <head>
 </head>
 <body>
 </body>
</html>

Anda dapat menambahkan tingkat judul tiga di atas peta menggunakan kode di bawah.

<h3>My Google Maps Demo</h3>

Kode di bawah menentukan area halaman untuk peta Google Anda.

<!--The div element for the map -->
<div id="map"></div>

Pada tahap tutorial ini, div muncul sebagai blok abu-abu karena Anda belum menambahkan peta. Kode di bawah ini menjelaskan CSS yang menetapkan ukuran dan warna div.

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* Set the size of the div element that contains the map */
#map {
  height: 400px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}

Dalam kode di atas, elemen style menetapkan ukuran div untuk peta Anda. Tetapkan lebar dan tinggi div ke lebih dari 0px agar peta dapat terlihat. Dalam hal ini, div disetel ke tinggi 400 piksel dan lebar 100% untuk menampilkan lebar di seluruh halaman web Anda.

Langkah 2: Tambahkan peta dengan penanda

Bagian ini menunjukkan cara memuat Maps JavaScript API ke dalam halaman web Anda, dan cara menulis JavaScript Anda sendiri yang menggunakan API tersebut untuk menambahkan peta dengan penanda di dalamnya.

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;

CSS

/* Set the size of the div element that contains the map */
#map {
  height: 400px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}

HTML

<html>
  <head>
    <title>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

Coba Sampel

Memahami kode

Pada kode di bawah, script memuat API dari URL yang ditentukan.

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

Dalam kode di atas, parameter callback mengeksekusi fungsi initMap setelah API dimuat. Atribut async memungkinkan browser terus menguraikan sisa halaman Anda saat API dimuat. Setelah dimuat, browser akan dijeda dan segera mengeksekusi skrip. Parameter key berisi kunci API Anda.

Lihat Langkah 3: Dapatkan kunci API untuk mengetahui petunjuk cara mendapatkan kunci API Anda nanti.

Kode di bawah berisi fungsi initMap yang menginisialisasi dan menambahkan peta saat halaman web dimuat. Gunakan tag script untuk menyertakan JavaScript Anda sendiri yang berisi fungsi initMap.

  function initMap() {}

Tambahkan fungsi document.getElementById() untuk menemukan peta div di halaman web.

Kode di bawah membuat objek Google Maps baru, dan menambahkan properti ke peta, termasuk pusat dan tingkat zoom. Lihat dokumentasi untuk opsi properti lainnya.

TypeScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(
  document.getElementById("map") as HTMLElement,
  {
    zoom: 4,
    center: uluru,
  }
);

JavaScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: uluru,
});

Dalam kode di atas, new google.maps.Map() membuat objek Google Maps baru. Properti center memberi tahu API tempat untuk memusatkan peta.

Pelajari lebih lanjut cara mendapatkan koordinat lintang/bujur, atau mengonversi alamat menjadi koordinat geografis.

Properti zoom menentukan tingkat zoom untuk peta. Zoom: 0 adalah zoom terendah, dan menampilkan seluruh bumi. Setel nilai zoom lebih tinggi untuk memperbesar tampilan bumi dengan resolusi lebih tinggi.

Kode di bawah menempatkan penanda di peta. Properti position menetapkan posisi penanda.

TypeScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});

JavaScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});

Pelajari penanda lebih lanjut:

Langkah 3: Dapatkan kunci API

Bagian ini menjelaskan cara mengautentikasi aplikasi ke Maps JavaScript API menggunakan kunci API Anda sendiri.

Ikuti langkah-langkah ini untuk mendapatkan kunci API:

  1. Buka Google Cloud Console.

  2. Buat atau pilih sebuah proyek.

  3. Klik Lanjutkan untuk mengaktifkan API dan layanan terkait.

  4. Pada halaman Credentials, dapatkan API key (dan tetapkan pembatasan kunci API). Catatan: Jika memiliki kunci API yang tidak dibatasi, atau kunci dengan pembatasan browser, Anda dapat menggunakan kunci tersebut.

  5. Untuk mencegah pencurian kuota dan mengamankan kunci API Anda, lihat Menggunakan Kunci API.

  6. Aktifkan penagihan. Lihat Penggunaan dan Penagihan untuk mengetahui informasi selengkapnya.

  7. Salin seluruh kode tutorial ini dari halaman ini ke editor teks Anda.

  8. Ganti nilai parameter key di URL dengan kunci API Anda sendiri (yaitu kunci API yang baru saja Anda peroleh).

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

  9. Simpan file ini dengan nama yang diakhiri dengan .html, seperti index.html.

  10. Muat file HTML di browser web dengan menariknya dari desktop ke browser Anda. Atau, mengklik dua kali file akan berfungsi di sebagian besar sistem operasi.

Tips dan pemecahan masalah

  • Anda dapat menyesuaikan opsi seperti gaya dan properti untuk menyesuaikan peta. Untuk informasi selengkapnya tentang menyesuaikan peta, baca panduan untuk menata gaya, dan menggambar di peta.
  • Gunakan Developer Tools Console di browser web untuk menguji dan menjalankan kode, membaca laporan error, dan menyelesaikan masalah dengan kode.
  • Gunakan pintasan keyboard berikut untuk membuka konsol di Chrome:
    Command+Option+J (di Mac), atau Control+Shift+J (di Windows).
  • Ikuti langkah-langkah di bawah ini untuk mendapatkan koordinat lintang dan bujur untuk lokasi di Google Maps.

    1. Buka Google Maps di browser.
    2. Klik kanan lokasi persis di peta yang memerlukan koordinat.
    3. Pilih Ada apa di sini dari menu konteks yang muncul. Peta menampilkan kartu di bagian bawah layar. Temukan koordinat lintang dan bujur di baris terakhir kartu.
  • Anda dapat mengonversi alamat menjadi koordinat lintang dan bujur menggunakan layanan Geocoding. Panduan developer memberikan informasi mendetail tentang memulai layanan Geocoding.