Menambahkan Peta Google ke Halaman Web

Anda dapat menambahkan peta Google ke halaman web menggunakan kode HTML, CSS, dan JavaScript. Halaman ini menunjukkan cara menambahkan peta ke halaman web, lalu mengakses instance peta secara terprogram.

Ringkasan

Untuk memuat peta, halaman web Anda harus melakukan proses berikut:

  • Muat Maps JavaScript API menggunakan loader bootstrap. Di sinilah kunci API Anda diteruskan. Kunci API dapat ditambahkan ke file sumber HTML atau JavaScript.
  • Menambahkan peta ke halaman HTML, dan menambahkan gaya CSS yang diperlukan.
  • Memuat library maps dan melakukan inisialisasi peta.

Menambahkan peta menggunakan elemen gmp-map

Elemen gmp-map adalah cara yang lebih disarankan untuk menambahkan peta Google ke halaman web. Elemen ini adalah elemen HTML kustom yang dibuat menggunakan komponen web. Untuk menambahkan peta ke halaman web menggunakan elemen gmp-map, lakukan langkah-langkah berikut.

  1. Tambahkan elemen script yang berisi bootstrap ke halaman HTML, atau tambahkan ke file sumber JavaScript atau TypeScript tanpa elemen script. Konfigurasi bootstrap dengan kunci API Anda dan opsi lainnya. Anda dapat memilih impor pustaka dinamis atau pemuatan skrip langsung. Contoh ini menunjukkan penambahan bootstrap pemuatan skrip dinamis ke halaman HTML:

    <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>

    Pelajari lebih lanjut cara memuat Google Maps JavaScript API

  2. Di halaman HTML, tambahkan elemen gmp-map. Tentukan koordinat lintang dan bujur untuk center (wajib), nilai zoom untuk zoom (wajib), dan map-id jika diperlukan (wajib untuk beberapa fitur seperti Penanda Lanjutan).

<gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
</gmp-map>

Kode contoh lengkap

TypeScript

async function initMap(): Promise<void> {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Access the map.
    const mapElement = document.querySelector('gmp-map')!;
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;

    console.log({ mapElement, innerMap });
}

void initMap();

JavaScript

async function initMap() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Access the map.
    const mapElement = document.querySelector('gmp-map');
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;

    console.log({ mapElement, innerMap });
}

void initMap();

CSS

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

HTML

<html>
    <head>
        <title>Simple Map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
            });
        </script>
    </head>

    <body>
        <gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
        </gmp-map>
    </body>
</html>

Mencoba Contoh

Menambahkan peta menggunakan elemen div dan JavaScript

Untuk menambahkan peta ke halaman web menggunakan elemen div, lakukan langkah-langkah berikut.

  1. Tambahkan elemen script yang berisi bootstrap ke halaman HTML, atau tambahkan ke file sumber JavaScript atau TypeScript tanpa elemen script. Konfigurasi bootstrap dengan kunci API Anda dan opsi lainnya. Anda dapat memilih impor pustaka dinamis atau pemuatan skrip langsung. Contoh ini menunjukkan cara menambahkan bootstrap dinamis ke halaman HTML:

    <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>

    Pelajari lebih lanjut cara memuat Google Maps JavaScript API

  2. Di halaman HTML, tambahkan elemen div untuk menyimpan peta.

    <div id="map"></div>

  3. Di CSS, tetapkan tinggi peta ke 100%. Atribut CSS height diperlukan agar peta dapat terlihat.

    #map {
  height: 100%;
}

  4. Di file JS atau TS, buat fungsi untuk memuat library maps dan melakukan inisialisasi peta. Tentukan koordinat lintang dan bujur untuk center, dan tingkat zoom yang akan digunakan untuk zoom. Jika perlu, tambahkan ID peta menggunakan properti mapId. Karena peta akan menggunakan raster secara default, minta peta vektor dengan menentukan opsi peta "VECTOR"; jenis peta vektor direkomendasikan untuk pengalaman pengguna terbaik, karena memberikan fidelitas visual yang lebih baik serta kemampuan untuk mengontrol kemiringan dan arah pada peta.

    TypeScript

    let map: google.maps.Map;
async function initMap(): Promise<void> {
    // Import the needed libraries
    const { Map } = await google.maps.importLibrary('maps');

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map') as HTMLElement, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: 'VECTOR',
    });

    console.log(map);
}

void initMap();

    JavaScript

    let map;
async function initMap() {
    // Import the needed libraries
    const { Map } = await google.maps.importLibrary('maps');

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: 'VECTOR',
    });

    console.log(map);
}

void initMap();

Lihat contoh kode sumber yang lengkap

TypeScript

let map: google.maps.Map;
async function initMap(): Promise<void> {
    // Import the needed libraries
    const { Map } = await google.maps.importLibrary('maps');

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map') as HTMLElement, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: 'VECTOR',
    });

    console.log(map);
}

void initMap();

JavaScript

let map;
async function initMap() {
    // Import the needed libraries
    const { Map } = await google.maps.importLibrary('maps');

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: 'VECTOR',
    });

    console.log(map);
}

void 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>Simple Map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>

        <script>
            // prettier-ignore
            (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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8" 
            });
        </script>
    </head>

    <body>
        <div id="map"></div>
    </body>
</html>

Mencoba Contoh

Menetapkan dan mendapatkan properti pada instance peta

Untuk berinteraksi dengan instance peta, pilih elemen yang memuatnya. Kode untuk melakukan tindakan ini akan bervariasi, bergantung pada apakah Anda menggunakan elemen gmp-map atau elemen div.

Mendapatkan instance peta dari elemen gmp-map

Untuk mendapatkan instance peta saat menggunakan elemen gmp-map, gunakan document.querySelector untuk mengambil instance mapElement, seperti yang ditunjukkan di sini.

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

Kemudian, tetapkan properti pada instance mapElement:

mapElement.zoom = 8;

Class MapElement menggunakan class Map secara internal; akses class Map menggunakan properti MapElement.innerMap, seperti yang ditunjukkan di sini:

mapElement.innerMap.setOptions({
    mapTypeControl: false,
});

Mendapatkan instance peta dari elemen div

Saat menggunakan elemen div, dapatkan instance peta dan tetapkan opsi pada waktu inisialisasi:

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

Setelah inisialisasi, tetapkan opsi pada instance map seperti yang ditunjukkan di sini:

map.setOptions({
    zoom: 8,
});