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

Menambahkan Peta Google bersama Marker ke Situs Web Anda

Pengantar

Tutorial ini menampilkan cara menambahkan peta Google sederhana bersama marker ke laman web. Tutorial ini cocok untuk orang yang masih pemula atau menengah pengetahuannya dalam HTML dan CSS, dan sedikit memahami JavaScript. Untuk panduan lanjutan membuat peta, bacalah panduan developer.

Di bawah ini adalah peta yang akan Anda buat menggunakan tutorial ini.

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

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  height: 400px;
  width: 100%;
 }
 <!-- 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>

Cobalah sendiri

Arahkan ke atas kanan blok kode untuk menyalin kode atau membukanya dalam JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Memulai

Ada tiga langkah untuk membuat peta Google dengan marker pada laman web Anda:

  1. Buat sebuah laman HTML
  2. Tambahkan peta bersama sebuah marker
  3. Dapatkan kunci API

Anda membutuhkan browser web. Pilih browser yang sudah terkenal seperti Google Chrome (disarankan), Firefox, Safari, atau Internet Explorer, berdasarkan platform Anda.

Langkah 1: Buat sebuah laman HTML

Inilah kode untuk laman web HTML dasar:

<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  width: 100%;
  height: 400px;
  background-color: grey;
}
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 100%;
        height: 400px;
        background-color: grey;
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
  </body>
</html>

Perhatikan, ini adalah laman yang sangat mendasar dengan tiga tingkat heading (h3), sebuah elemen div tunggal, dan elemen style yang semuanya dijelaskan dalam tabel di bawah. Anda bisa menambahkan materi yang disukai ke laman web.

Cobalah sendiri

Di sudut kanan atas kode contoh di atas ada dua tombol. Klik tombol paling kiri untuk membuka contoh di JSFiddle.

Memahami kode

Tabel ini menjelaskan setiap bagian kode di atas.

Kode dan keterangan
<html>
 <head>
 </head>
 <body>
 </body>
</html>

Membuat laman HTML yang terdiri dari kepala dan tubuh.
<h3>My Google Maps Demo</h3>

Menambahkan tiga tingkat heading di atas peta.
<div id="map"></div>

Mendefinisikan area laman untuk peta Google Anda.
Pada tahap tutorial ini, div muncul sebagai blok abu-abu, karena Anda belum menambahkan sebuah peta. Warnanya abu-abu karena CSS yang Anda terapkan. Lihat di bawah ini.
<style>
 #map {
   width: 100%;
   height: 400px;
   background-color: grey;
 }
</style>

Elemen style di head menyetel ukuran div untuk peta Anda.
Setel lebar dan tinggi div menjadi lebih besar dari 0 px agar peta bisa terlihat.
Dalam hal ini, div disetel setinggi 500 piksel, dan lebarnya 100% untuk menampilkan selebar laman web Anda. Terapkan background-color: grey ke div untuk menampilkan area peta Anda di laman web.

Langkah 2: Tambahkan peta bersama sebuah marker

Bagian ini menampilkan cara memuat Google Maps JavaScript API ke dalam laman web Anda, dan cara menulis JavaScript sendiri yang menggunakan API untuk menambahkan peta bersama sebuah marker padanya.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  height: 400px;
  width: 100%;
 }
 <!-- 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>
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Cobalah sendiri

Di sudut kanan atas kode contoh di atas ada dua tombol. Klik tombol paling kiri untuk membuka contoh di JSFiddle.

Memahami kode

Perhatikan, contoh di atas tidak lagi berisi CSS yang mewarnai div dengan abu-abu. Hal ini karena div sekarang berisi sebuah peta.

Tabel ini menjelaskan setiap bagian kode di atas.

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

script memuat API dari URL yang ditetapkan.
Parameter callback mengeksekusi fungsi initMap setelah API dimuat lengkap.
Atribut async memungkinkan browser melanjutkan rendering bagian laman selebihnya selagi API dimuat.
Parameter key berisi kunci API Anda. Anda tidak perlu kunci API sendiri saat bereksperimen dengan tutorial ini di JSFiddle. Lihat Langkah 3: Dapatkan kunci API untuk petunjuk tentang mendapatkan kunci API sendiri nanti.
<script>
  function initMap() {
  }
</script>

Fungsi initMap memulai dan menambahkan peta bila laman web dimuat. Gunakan tag script untuk menyertakan JavaScript Anda sendiri yang berisi fungsi initMap.
getElementById

Tambahkan fungsi ini untuk menemukan div peta di laman web.
new google.maps.Map()

Tambahkan objek Google Maps baru ini untuk membangun peta di elemen div.
{
  var uluru = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

}

Tambahkan properti ke peta, termasuk center dan tingkat zoom. Lihat dokumentasi untuk opsi properti lainnya.
Properti center memberi tahu API tempat untuk memusatkan peta. Koordinat peta disetel dalam urutan: lintang, bujur.
Properti zoom menetapkan tingkat zoom untuk peta. Zoom: 0 adalah zoom terendah, dan menampilkan seluruh bumi. Setel nilai zoom lebih tinggi untuk memperbesar tampilan bumi pada resolusi lebih tinggi.
var marker = new google.maps.Marker({
  position: uluru,
  map: map
});

Tambahkan kode ini untuk menempatkan marker pada peta. position Properti ini menyetel posisi marker.

Langkah 3: Dapatkan kunci API

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

Ikuti langkah-langkah ini untuk mendapatkan kunci API:

  1. Masuklah ke Google API Console.
  2. Buat atau pilih sebuah proyek.
  3. Klik Continue untuk mengaktifkan API dan layanan terkait.
  4. Pada laman Credentials, dapatkan kunci API (dan setel pembatasan kunci API).

    Catatan: Jika Anda memiliki kunci API tidak terbatas, atau kunci dengan pembatasan browser, Anda boleh menggunakan kunci itu.

  5. Untuk mencegah pencurian kuota, amankan kunci API Anda dengan mengikuti praktik terbaik ini.

  6. (Opsional) Aktifkan penagihan. Lihat Batas Penggunaan untuk informasi selengkapnya.

  7. Salin seluruh kode tutorial dari laman ini ke editor teks Anda. Jika Anda belum memiliki editor teks, ini ada beberapa sarannya: Anda bisa menggunakan: Notepad++ (untuk Windows); TextEdit (untuk macOS); gedit, KWrite, di antaranya (untuk mesin Linux).
  8. Ganti nilai parameter key dalam URL dengan kunci API Anda sendiri (yakni kunci API yang baru saja Anda peroleh).

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
      async defer>
    </script>
    
  9. Simpan file ini dengan nama yang berakhiran .html, seperti google-maps.html.

  10. Muat file HTML di browser web dengan menyeretnya dari desktop Anda ke browser. Atau, klik dua kali juga bisa digunakan pada hampir semua sistem operasi.

Tips dan pemecahan masalah

  • Gunakan antarmuka JSFiddle untuk menampilkan kode HTML, CSS, dan JavaScript dalam panel terpisah. Anda bisa menjalankan kode dan menampilkan keluaran dalam panel Results.
  • Anda bisa mengatur opsi seperti gaya dan properti untuk menyesuaikan peta. Untuk informasi selengkapnya mengenai penyesuaian peta, baca selengkapnya tentang Maps JavaScript API.
  • Gunakan Developer Tools Console di browser web Anda untuk menguji dan menjalankan kode, membaca laporan kesalahan, dan mengatasi masalah pada kode Anda.

    Pintasan keyboard untuk membuka konsol di Chrome: Command+Option+J (di Mac), atau Control+Shift+J (di Windows).

Kirim masukan tentang...

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