Pengantar
Tutorial ini menunjukkan cara menambahkan peta Google sederhana beserta penanda ke halaman web. Tutorial ini cocok untuk orang yang memiliki pengetahuan tingkat pemula atau menengah dalam HTML dan CSS, serta sedikit memahami JavaScript.
Berikut adalah peta yang akan Anda buat menggunakan tutorial ini. Penanda diposisikan di Uluru (juga dikenal sebagai Ayers Rock) di Taman Nasional Uluru-Kata Tjuta.
Memulai
Ada tiga langkah untuk membuat peta Google beserta penanda di halaman web Anda:
Anda membutuhkan browser web. Pilih salah satu browser yang sudah terkenal seperti Google Chrome (direkomendasikan), Firefox, Safari, atau Edge, berdasarkan platform Anda dari daftar browser yang didukung.
Langkah 1: 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:
Buka Konsol Google Cloud.
Buat atau pilih sebuah project.
Klik Continue untuk mengaktifkan API dan layanan terkait.
Pada halaman Credentials, dapatkan API key (dan tetapkan pembatasan kunci API). Catatan: Jika Anda memiliki kunci API yang tidak dibatasi, atau kunci dengan pembatasan browser, Anda boleh menggunakan kunci tersebut.
Untuk mencegah pencurian kuota dan mengamankan kunci API Anda, lihat Menggunakan Kunci API.
Aktifkan penagihan. Lihat Penggunaan dan Penagihan untuk informasi selengkapnya.
Setelah Anda mendapatkan kunci API, tambahkan kunci tersebut ke cuplikan berikut dengan mengklik "YOUR_API_KEY". Salin dan tempel tag skrip bootloader untuk digunakan sendiri halaman web mereka.
<script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>
Langkah 2: 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> <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> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>
Perhatikan bahwa ini adalah halaman yang sangat dasar dengan heading level tiga (h3
) dan
satu elemen div
. Anda bisa menambahkan materi yang disukai ke laman web.
Memahami kode
Pada tahap ini dalam contoh, kita memiliki:
- Mendeklarasikan aplikasi sebagai HTML5 menggunakan deklarasi
!DOCTYPE html
. - Membuat elemen div bernama "map" untuk menyimpan peta.
- Memuat Maps JavaScript API menggunakan loader bootstrap.
Mendeklarasikan Aplikasi Anda sebagai HTML5
Sebaiknya deklarasikan DOCTYPE
sesungguhnya dalam aplikasi web Anda.
Dalam contoh di sini, kami telah mendeklarasikan aplikasi sebagai HTML5 menggunakan
HTML5 sederhana DOCTYPE
seperti yang ditunjukkan di bawah ini:
<!DOCTYPE html>
Sebagian besar browser saat ini akan merender konten yang dideklarasikan dengan DOCTYPE
ini
dalam "mode standar" yang berarti bahwa aplikasi Anda harus lebih
sesuai lintas browser. DOCTYPE
juga dirancang untuk menurunkan tingkat secara halus;
browser yang tidak memahaminya akan mengabaikannya, dan menggunakan "mode quirks" dapat
menampilkan konten mereka.
Perhatikan bahwa beberapa CSS yang bekerja dalam quirks mode tidak valid dalam
mode standar. Secara khusus, semua ukuran berbasis persentase harus mewarisi ukurannya dari elemen blok induk, dan jika ada pendahulunya yang gagal menetapkan ukuran, maka ukurannya dianggap 0x0 piksel. Sebagai
Oleh karena itu, kami menyertakan pernyataan style
berikut:
<style> #map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } </style>
Membuat elemen div
Agar peta ditampilkan pada halaman web, kita harus menentukan tempat untuk menampilkannya. Umumnya,
kita melakukannya dengan membuat elemen div
bernama dan mendapatkan referensi ke
dalam document object model (DOM) browser.
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 hanya sebagai blok abu-abu, karena
Anda belum menambahkan peta. Kode di bawah ini menjelaskan CSS yang menetapkan
ukuran dan warna div
.
/* 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 nilai di atas 0 piksel agar peta dapat terlihat. Dalam hal ini, div
ditetapkan ke tinggi 400 piksel dan lebar 100% untuk menampilkan peta selebar halaman web Anda. Perhatikan bahwa div biasanya mengukur lebarnya
dari elemen yang dimuatnya, dan div kosong biasanya memiliki ketinggian 0. Untuk ini
Anda harus selalu menetapkan tinggi pada div
secara eksplisit.
Memuat Maps JavaScript API
Loader bootstrap menyiapkan Maps JavaScript API untuk dimuat (tidak ada library yang dimuat hingga importLibrary()
dipanggil).
<script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>
Lihat Langkah 3: Mendapatkan kunci API untuk petunjuk cara mendapatkan kunci API Anda.
Langkah 3: Menambahkan peta beserta 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 let map; async function initMap(): Promise<void> { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } ); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' }); } initMap();
JavaScript
// Initialize and add the map let map; async function initMap() { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", }); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", }); } initMap();
Dalam kode di atas, library Map
dan AdvancedMarkerView
dimuat saat
fungsi initMap()
dipanggil.
Memahami kode
Pada tahap ini dalam tutorial, kita telah:
- Menentukan fungsi JavaScript yang membuat peta di div.
- Membuat
AdvancedMarkerElement
untuk menambahkan penanda ke peta.
Menambahkan peta
Kode di bawah ini membuat objek Google Maps baru dan menambahkan properti ke peta, termasuk titik pusat dan tingkat zoom. Lihat dokumentasi untuk opsi properti lainnya.
TypeScript
// The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } );
JavaScript
// The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", });
Ada dua opsi yang diperlukan untuk setiap peta: center
dan zoom
. Dalam contoh di atas
kode, new Map()
akan membuat objek Google Maps baru. Properti center
memberi tahu
API tempat untuk memusatkan peta.
Properti zoom
menentukan tingkat zoom untuk peta. Zoom: 0 adalah zoom
terendah dan menampilkan seluruh Bumi. Tetapkan nilai zoom lebih tinggi untuk memperbesar tampilan Bumi dengan resolusi lebih tinggi.
Menampilkan peta seluruh Bumi sebagai gambar tunggal akan memerlukan peta yang sangat besar, atau peta kecil dengan resolusi sangat rendah. Oleh karena itu, gambar peta dalam Google Maps dan Maps JavaScript API dipecah menjadi "ubin" peta dan "tingkat zoom." Pada tingkat zoom rendah, satu rangkaian kecil ubin peta mencakup area area; pada tingkat zoom yang lebih tinggi, ubin memiliki resolusi lebih tinggi dan mencakup area yang lebih kecil. Daftar berikut menunjukkan perkiraan tingkat detail yang dapat Anda yang Anda harapkan untuk dilihat di setiap tingkat zoom:
- 1: Dunia
- 5: Daratan luas atau benua
- 10: Kota
- 15: Jalan
- 20: Bangunan
Tiga gambar berikut memperlihatkan Tokyo dari lokasi yang sama pada tingkat zoom 0, 7 dan 18.
Menambahkan penanda
Kode di bawah menempatkan penanda di peta. Properti position
menetapkan
posisi penanda.
TypeScript
// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' });
JavaScript
// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", });
Kode contoh lengkap
Lihat kode contoh lengkapnya di sini:
TypeScript
// Initialize and add the map let map; async function initMap(): Promise<void> { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } ); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' }); } initMap();
JavaScript
// Initialize and add the map let map; async function initMap() { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", }); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", }); } initMap();
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; }
HTML
<html> <head> <title>Add Map</title> <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> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>
Mencoba Contoh
Pelajari penanda lebih lanjut:
Tips dan pemecahan masalah
- Pelajari lebih lanjut cara mendapatkan lintang/bujur koordinat, atau mengubah alamat menjadi koordinat geografis.
- Anda dapat mengatur opsi seperti gaya dan properti untuk menyesuaikan peta. Untuk informasi selengkapnya tentang menyesuaikan peta, baca panduan untuk menata gaya, dan menggambar di peta.
- Gunakan Konsol Alat Developer di browser web untuk menguji dan menjalankan kode, membaca laporan error, dan menyelesaikan masalah pada 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.
- Buka Google Maps di browser.
- Klik kanan lokasi persis di peta yang Anda perlukan koordinatnya.
- 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 mengubah alamat menjadi koordinat lintang dan bujur menggunakan layanan Geocoding. Panduan developer memberikan informasi mendetail tentang memulai layanan Geocoding.