Cara menggunakan javascript stack size

Maps JavaScript API memungkinkan Anda menyesuaikan peta dengan konten dan gambar Anda sendiri untuk ditampilkan di halaman web dan perangkat seluler. Maps JavaScript API menampilkan empat jenis peta dasar (roadmap, satelit, hibrida, dan medan) yang dapat Anda ubah menggunakan lapisan dan gaya, kontrol dan peristiwa, serta berbagai layanan dan library.

Table of Contents Show

Halo, Dunia
Mencoba Contoh
Mendeklarasikan Aplikasi Anda sebagai HTML5
Memuat Maps JavaScript API
Pemuatan Inline
Pemuatan Dinamis
Pemuatan Dinamis
Atribut Tag Skrip
Memuat API secara sinkron
Elemen DOM Peta
Tingkat Zoom
Memecahkan masalah
Error Kunci API dan Penagihan
Jika kode Anda tidak berfungsi:

Audiens

Dokumentasi ini didesain untuk orang yang memahami pemrograman JavaScript dan konsep pemrograman berorientasi objek. Anda juga harus memahami Google Maps dari sudut pandang pengguna. Ada banyak tutorial JavaScript yang tersedia di Web.

Dokumentasi konseptual ini dirancang untuk memungkinkan Anda secara cepat mulai menjelajahi dan mengembangkan aplikasi dengan Maps JavaScript API. Kami juga memublikasikan Referensi Maps JavaScript API.

Halo, Dunia

Cara termudah untuk mulai mempelajari Maps JavaScript API adalah melihat contoh sederhana. Contoh berikut menampilkan peta yang berpusat di Sydney, New South Wales, Australia.

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

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

Catatan: Baca panduan tentang cara menggunakan TypeScript dan Google Maps.

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;index.js

Catatan: JavaScript dikompilasi dari cuplikan TypeScript.

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

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

HTML

<html>
  <head>
    <title>Simple 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>
    <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>index.html

Lihat contoh

Mencoba Contoh

Stackblitz.com CodeSandbox.io JSFiddle.net Google Cloud Shell

Bahkan dalam contoh sederhana ini, ada beberapa hal yang perlu diperhatikan:

Kami mendeklarasikan aplikasi sebagai HTML5 menggunakan deklarasi

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;index.js

Kami membuat elemen

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;index.js

8 bernama "map" untuk menyimpan peta.

Kami menentukan fungsi JavaScript yang membuat peta dalam

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;index.js

Kami memuat Maps JavaScript API menggunakan tag

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

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

Langkah-langkah ini dijelaskan di bawah.

Mendeklarasikan Aplikasi Anda sebagai HTML5

Sebaiknya deklarasikan

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

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

1 sesungguhnya dalam aplikasi web Anda. Dalam contoh di sini, kami telah mendeklarasikan aplikasi sebagai HTML5 menggunakan

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

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

1 HTML5 sederhana seperti yang ditampilkan di bawah ini:

<!DOCTYPE html>

Sebagian besar browser saat ini akan merender konten yang dideklarasikan dengan

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

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

1 ini dalam "mode standar" yang berarti bahwa aplikasi Anda harus mematuhi persyaratan lintas browser.

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

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

1 juga dirancang untuk menurunkan tingkat secara halus; browser yang tidak memahaminya akan mengabaikannya, dan menggunakan "mode quirks" untuk menampilkan kontennya.

Perhatikan, beberapa CSS yang bekerja dalam quirks mode tidak valid dalam mode standar. Secara khusus, semua ukuran berbasis-persentase harus mewarisi dari elemen blok induk, dan jika ada pendahulunya yang gagal menetapkan ukuran, maka dianggap berukuran 0 x 0 piksel. Oleh karena itu, kami menyertakan deklarasi

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

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

5 berikut:

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

Deklarasi CSS ini menunjukkan bahwa penampung peta

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

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

6 (dengan ID

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

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

7) harus menempati 100% dari tinggi dari bodi HTML. Perhatikan bahwa kami juga harus mendeklarasikan persentase tersebut untuk

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

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

8 dan

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

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

9 secara khusus.

Memuat Maps JavaScript API

Maps JavaScript API dimuat menggunakan tag

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

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

0, yang dapat ditambahkan secara inline di file HTML atau secara dinamis menggunakan file JavaScript terpisah. Sebaiknya Anda meninjau kedua pendekatan tersebut, dan memilih salah satu pendekatan yang paling sesuai dengan struktur kode dalam project Anda.

Pemuatan Inline

Untuk memuat Maps JavaScript API secara inline dalam file HTML, tambahkan tag

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

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

0 seperti yang ditunjukkan di bawah.

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

Pemuatan Dinamis

Untuk memuat Maps JavaScript API secara dinamis menggunakan file JavaScript terpisah, lihat contoh di bawah. Pendekatan ini memungkinkan Anda menangani semua kode untuk menangani API dari file

<html>
  <head>
    <title>Simple 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>
    <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>index.html

2 terpisah, dan setara dengan menambahkan tag skrip secara inline.

// Create the script tag, set the appropriate attributes
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap';
script.async = true;

// Attach your callback function to the `window` object
window.initMap = function() {
  // JS API is loaded and available
};

// Append the 'script' element to 'head'
document.head.appendChild(script);

Pemuatan Dinamis

Paket @googlemaps/js-api-loader tersedia untuk membuat pengalaman pemuatan dinamis yang lebih lancar. Aplikasi ini dapat diinstal melalui NPM dengan hal berikut:

npm install @googlemaps/js-api-loader

Paket ini dapat diimpor ke dalam aplikasi dengan:

import { Loader } from "@googlemaps/js-api-loader"

Loader mengekspos antarmuka callback dan Promise. Berikut ini adalah contoh penggunaan metode Promise default

<html>
  <head>
    <title>Simple 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>
    <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>index.html

TypeScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;index.js

0Catatan: Baca panduan tentang cara menggunakan TypeScript dan Google Maps.

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;index.js

Atribut Tag Skrip

Perhatikan pada contoh di atas bahwa beberapa atribut ditetapkan pada tag

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

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

0, yang direkomendasikan. Berikut adalah penjelasan dari setiap atribut.

<html>
  <head>
    <title>Simple 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>
    <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>index.html

5: URL tempat Maps JavaScript API dimuat, termasuk semua simbol dan definisi yang Anda perlukan untuk menggunakan Maps JavaScript API. URL dalam contoh ini memiliki dua parameter:

<html>
  <head>
    <title>Simple 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>
    <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>index.html

6, tempat Anda memberikan kunci API, dan

<html>
  <head>
    <title>Simple 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>
    <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>index.html

7, yang Anda gunakan untuk menentukan nama fungsi global yang akan dipanggil setelah Maps JavaScript API dimuat sepenuhnya. Baca selengkapnya tentang parameter URL.

<html>
  <head>
    <title>Simple 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>
    <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>index.html

8: Meminta browser untuk mendownload dan mengeksekusi skrip secara asinkron. Ketika dieksekusi, skrip akan memanggil fungsi yang ditentukan menggunakan parameter

<html>
  <head>
    <title>Simple 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>
    <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>index.html

Library

Saat memuat Maps JavaScript API melalui URL, Anda dapat memilih untuk memuat library tambahan melalui penggunaan parameter URL

<!DOCTYPE html>

0. Library adalah modul kode yang menyediakan fungsi tambahan ke Maps JavaScript API utama, tetapi tidak dimuat kecuali jika Anda memintanya secara khusus. Untuk informasi selengkapnya, lihat Library di Maps JavaScript API.

Memuat API secara sinkron

Dalam tag

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

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

0 yang memuat Maps JavaScript API, atribut

<!DOCTYPE html>

2 dan parameter

<html>
  <head>
    <title>Simple 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>
    <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>index.html

7 dapat dihilangkan. Hal ini akan menyebabkan pemuatan API diblokir hingga API selesai didownload.

Ini mungkin akan memperlambat pemuatan halaman Anda. Namun itu berarti Anda bisa menulis tag script berikutnya dengan anggapan API tersebut sudah dimuat.

Penting: Lihat panduan Kebijakan Keamanan Konten untuk mempelajari lebih lanjut cara mengonfigurasi CSP untuk Maps JavaScript API.

Elemen DOM Peta

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;index.js

Agar peta ditampilkan pada halaman web, kita harus memesan tempatnya. Umumnya, kami melakukannya dengan membuat elemen

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;index.js

8 bernama dan mendapatkan referensi ke elemen ini dalam document object model (DOM) browser.

Dalam contoh di atas, kita menggunakan CSS untuk menetapkan ketinggian div peta ke "100%". Ini akan diperluas agar ukurannya pada perangkat seluler sesuai. Anda mungkin perlu menyesuaikan nilai-nilai lebar dan tinggi berdasarkan ukuran layar dan padding browser. Perhatikan, div biasanya mengambil lebarnya dari elemen yang dimuatnya, dan div kosong biasanya memiliki ketinggian 0. Karena itu, Anda harus selalu menetapkan tinggi secara eksplisit pada

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

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

Opsi Peta

Ada dua opsi yang diperlukan untuk setiap peta:

<!DOCTYPE html>

6 dan

<!DOCTYPE html>

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;index.js

Tingkat Zoom

Resolusi awal untuk menampilkan peta ditetapkan oleh properti

<!DOCTYPE html>

7, dengan zoom

<!DOCTYPE html>

9 sesuai dengan peta Bumi yang diperkecil sepenuhnya, dan tingkat zoom yang lebih besar akan memperbesar dengan resolusi yang lebih tinggi.

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;index.js

Menampilkan peta seluruh Bumi sebagai gambar tunggal akan memerlukan peta yang teramat besar, atau peta kecil dengan resolusi sangat rendah. Akibatnya, gambar peta dalam Google Maps dan Maps JavaScript API akan dipecah menjadi "ubin" peta dan "tingkat zoom". Pada tingkat zoom rendah, satu rangkaian kecil ubin peta mencakup area yang luas; di tingkat zoom yang lebih tinggi, ubin memiliki resolusi lebih tinggi dan mencakup area yang lebih kecil. Daftar berikut menampilkan perkiraan tingkat detail yang akan Anda lihat di setiap tingkat zoom:

1: Dunia
5: Daratan luas/benua
10: Kota
15: Jalan
20: Bangunan

Tiga gambar berikut memperlihatkan Tokyo dari lokasi yang sama pada tingkat zoom 0, 7 dan 18.

Untuk informasi tentang cara Maps JavaScript API memuat ubin berdasarkan tingkat zoom saat ini, lihat panduan untuk .

Objek Peta

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;index.js

Class JavaScript yang mewakili peta adalah class

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

0. Objek di class ini mendefinisikan sebuah peta pada halaman. (Anda bisa membuat lebih dari satu instance class ini — setiap objek akan mendefinisikan peta terpisah pada halaman.) Kita membuat instance baru dari class ini menggunakan operator

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

1 JavaScript.

Saat membuat instance peta baru, Anda menetapkan elemen HTML

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

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

6 di halaman sebagai penampung untuk peta. Node HTML adalah turunan dari objek

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

3 JavaScript, dan kita memperoleh referensi ke elemen ini melalui metode

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

Kode ini menentukan variabel (bernama

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

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

7) dan menetapkan variabel tersebut ke objek

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

0 baru. Fungsi

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

7 dikenal sebagai konstruktor dan definisinya ditampilkan di bawah ini:

KonstruktorDeskripsi

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

8Membuat peta baru dalam penampung HTML tertentu - biasanya elemen DIV - menggunakan parameter (opsional) yang diteruskan.

Memecahkan masalah

Pengingat: Untuk menggunakan Maps JavaScript API:

Semua permintaan Maps JavaScript API harus menyertakan kunci API; kami tidak lagi mendukung akses tanpa kunci.
Anda harus mengaktifkan penagihan pada setiap project.

Error Kunci API dan Penagihan

Pada kondisi tertentu, peta yang lebih gelap, atau gambar Street View 'negatif', yang diberi watermark dengan teks "hanya untuk tujuan pengembangan", mungkin akan ditampilkan. Perilaku ini biasanya mengindikasikan terjadi masalah pada kunci API atau penagihan. Untuk menggunakan produk Google Maps Platform, penagihan harus diaktifkan di akun Anda, dan semua permintaan harus menyertakan kunci API yang valid. Alur berikut akan membantu Anda memecahkan masalah ini:

Apakah Anda menggunakan kunci API?

Saya tidak yakin. Bagaimana cara memeriksa apakah saya menggunakan kunci API?

Kunci API diteruskan sebagai parameter

<html>
  <head>
    <title>Simple 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>
    <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>index.html

6 pada URL yang digunakan untuk memuat Maps JavaScript API. Berikut adalah beberapa opsi untuk memeriksa apakah Anda menggunakan kunci API:

Gunakan ekstensi Chrome Google Maps Platform API Checker. Ekstensi ini memungkinkan Anda mengetahui apakah situs Anda mengimplementasikan Maps API berlisensi Google dengan benar atau tidak.
Jika Anda menggunakan library atau plugin untuk memuat Maps JavaScript API, periksa setelan library tersebut dan cari opsi kunci API.
Periksa . Jika Anda melihat pesan berikut, Anda tidak menggunakan kunci API Anda dengan benar:

Peringatan Google Maps JavaScript API:
Error Google Maps JavaScript API:

Untuk developer web:

Jika Anda memiliki akses ke kode sumber dari aplikasi Anda, cari tag

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

0 yang digunakan untuk memuat Maps JavaScript API. Saat memuat Maps JavaScript API, ganti

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

1 pada kode di bawah dengan kunci API Anda.

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;index.js

Periksa traffic jaringan yang dihasilkan oleh situs Anda pada browser. Di Chrome, Anda dapat melihatnya melalui tab Network pada DevTools. Di sini Anda akan melihat permintaan jaringan yang dibuat oleh situs Anda. Permintaan yang dibuat menggunakan Maps JavaScript API akan berada pada jalur

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

2. Di sini Anda dapat mengonfirmasi apakah permintaan menggunakan parameter

<html>
  <head>
    <title>Simple 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>
    <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>index.html

6. Sebaiknya menurut

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

2 saat membuka tab Network.

Tidak, saya tidak menggunakan kunci API.

Untuk mendapatkan kunci API, klik tombol di bawah ini. Jika Anda tidak melihat penyiapan terpandu, ikuti petunjuk lengkap pada .
Mulai

Ya, saya menggunakan kunci API.

Bagus! Sekarang periksa apakah akun penagihan telah dikaitkan ke project Anda.

Apakah akun penagihan dikaitkan ke project Anda?

Saya tidak yakin. Bagaimana cara memeriksa apakah akun penagihan dikaitkan ke project saya?

Buka halaman Billing di Google Cloud Console dan pilih project tempat kunci API Anda dibuat. Untuk mengonfirmasi bahwa kunci tersebut terkait dengan project:

Buka bagian Credentials, yang dapat diakses melalui sidebar sebelah kiri pada Google Maps Platform > Credentials.
Pastikan bahwa kunci API yang saat ini digunakan di situs Anda telah tercantum. Jika belum, beralihlah ke project lain, lalu periksa kredensial project tersebut.
Jika tidak dapat menemukan project untuk kunci API Anda, kemungkinan Anda telah kehilangan akses ke project tersebut. Minta bantuan orang lain di organisasi Anda. Jika project asli tidak dapat ditemukan, Anda harus:
1. Membuat project baru. Hal ini dapat dilakukan dengan memilih New Project dari daftar project, atau dengan memilih Create Project melalui halaman Resource Manager.
2. Membuat kunci API baru. Hal ini dapat dilakukan di halaman Credentials. Setelah membuka halaman, klik Create credentials, lalu pilih API key.

Setelah menemukan project Anda di Cloud Console, periksa apakah akun penagihan telah dikaitkan dengan membuka bagian Billing pada menu samping kiri.

Tidak, akun penagihan tidak dikaitkan ke project saya.

Buka halaman Enable Billing di Cloud Console dan tambahkan akun penagihan ke project Anda. Untuk informasi tambahan, lihat Memulai Google Maps Platform.

Ya, akun penagihan telah dikaitkan ke project saya.

Bagus! Sekarang pastikan bahwa metode penagihan yang diberikan sudah valid.

Apakah metode penagihan yang diberikan sudah tidak valid (misalnya kartu kredit yang sudah tidak berlaku)?

Anda dapat menambahkan, menghapus, atau memperbarui metode pembayaran di Cloud Console.

Apakah ada kelebihan pada batas harian yang Anda tetapkan sendiri pada API?

Jika Anda telah menetapkan batas harian pada API, yang umumnya dilakukan untuk mencegah peningkatan tak terduga, Anda dapat memperbaiki masalah ini dengan .

Anda dapat memeriksa batas harian dengan membuka APIs & Services Dashboard di Cloud Console. Setelah membukanya:

Pilih project jika diminta.
Pilih API dari daftar, lalu klik tab Quotas.

Apakah kunci API Anda memiliki batasan alamat IP?

Kunci API dengan pembatasan alamat IP hanya dapat digunakan pada layanan web yang ditujukan untuk penggunaan dari sisi server (seperti Geocoding API dan Web Service API lainnya). Sebagian besar layanan web ini memiliki layanan yang setara pada Maps JavaScript API (misalnya, lihat Layanan Geocoding). Untuk menggunakan layanan sisi klien Maps JavaScript API, Anda harus membuat kunci API terpisah yang dapat diamankan menggunakan pembatasan perujuk HTTP (lihat ).

Jika kode Anda tidak berfungsi:

Untuk membantu Anda menyiapkan dan menjalankan kode peta, Brendan Kenny dan Mano Marks menunjukkan beberapa kesalahan umum dan cara memperbaikinya di video ini.