Dodawanie mapy Google do strony internetowej

Mapę Google możesz dodać do strony internetowej za pomocą kodu HTML, CSS i JavaScript. Na tej stronie dowiesz się, jak dodać mapę do strony internetowej, a następnie uzyskać dostęp do jej instancji za pomocą kodu.

Przegląd

Aby wczytać mapę, strona internetowa musi wykonać te czynności:

  • Wczytaj interfejs Maps JavaScript API za pomocą programu do wczytywania. W tym miejscu przekazywany jest klucz interfejsu API. Można go dodać do plików źródłowych HTML lub JavaScript.
  • Dodaj mapę do strony HTML i dodaj potrzebne style CSS.
  • Wczytaj bibliotekę maps i zainicjuj mapę.

Dodawanie mapy za pomocą elementu gmp-map

Element gmp-map to preferowany sposób dodawania mapy Google do strony internetowej. Jest to niestandardowy element HTML utworzony za pomocą komponentów internetowych. Aby dodać mapę do strony internetowej za pomocą elementu gmp-map, wykonaj te czynności.

  1. Dodaj element script zawierający bootstrap do strony HTML lub dodaj go do pliku źródłowego JavaScript lub TypeScript bez elementu script. Skonfiguruj wczytywanie początkowe za pomocą klucza interfejsu API i innych opcji. Możesz wybrać dynamiczne importowanie biblioteki lub bezpośrednie wczytywanie skryptu. Ten przykład pokazuje, jak dodać do strony HTML bezpośrednie wczytywanie skryptu bootstrap:

    <script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
    defer
></script>

    Więcej informacji o wczytywaniu interfejsu Maps JavaScript API

  2. Na stronie HTML dodaj element gmp-map. Określ współrzędne szerokości i długości geograficznej dla parametru center (wymagany), wartość powiększenia dla parametru zoom (wymagany) i w razie potrzeby parametr map-id (jest on wymagany w przypadku niektórych funkcji, np. znaczników zaawansowanych). Atrybut CSS height jest wymagany, aby mapa była widoczna. Można go określić w kodzie HTML lub CSS. W tym przykładzie atrybut height style jest określony w kodzie HTML, aby uprościć przykład.

    <gmp-map
    center="37.4220656,-122.0840897"
    zoom="10"
    map-id="DEMO_MAP_ID"
    style="height: 500px"></gmp-map>
    index.html

Kompletny przykładowy kod

<html>
    <head>
        <title>Add a Map using HTML</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly"
            defer></script>
    </head>
    <body>
        <gmp-map
            center="37.4220656,-122.0840897"
            zoom="10"
            map-id="DEMO_MAP_ID"
            style="height: 500px"></gmp-map>
    </body>
</html>
index.html

Dodawanie mapy za pomocą elementu div (starsza wersja) i JavaScriptu

Aby dodać mapę do strony internetowej za pomocą elementu div, wykonaj te czynności.

  1. Dodaj element script zawierający bootstrap do strony HTML lub dodaj go do pliku źródłowego JavaScript lub TypeScript bez elementu script. Skonfiguruj wczytywanie początkowe za pomocą klucza interfejsu API i innych opcji. Możesz wybrać dynamiczne importowanie biblioteki lub bezpośrednie wczytywanie skryptu. Ten przykład pokazuje, jak dodać dynamiczny bootstrap do strony 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>

    Więcej informacji o wczytywaniu interfejsu Maps JavaScript API

  2. Na stronie HTML dodaj element div, który będzie zawierać mapę.

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

  3. W arkuszu CSS ustaw wysokość mapy na 100%. Atrybut CSS height jest wymagany, aby mapa była widoczna.

    #map {
  height: 100%;
}

  4. W pliku JavaScript utwórz funkcję, która wczytuje bibliotekę maps i inicjuje mapę. Określ współrzędne geograficzne dla center i poziom powiększenia dla zoom. W razie potrzeby dodaj identyfikator mapy za pomocą właściwości map-id.

    let map;
async function initMap() {
    const { Map } = (await google.maps.importLibrary('maps'));
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
    });
}
initMap();
    index.js

Kompletny przykładowy kod

TypeScript

let map: google.maps.Map;
async function initMap(): Promise<void> {
    const { Map } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;
    map = new Map(document.getElementById('map') as HTMLElement, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
    });
}

initMap();
index.ts

JavaScript

let map;
async function initMap() {
    const { Map } = (await google.maps.importLibrary('maps'));
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
    });
}
initMap();
index.js

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>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
    </head>
    <body>
        <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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </body>
</html>
index.html

Wypróbuj przykład

Ustawianie i pobieranie właściwości instancji mapy

Aby wejść w interakcję z instancją mapy, wybierz element zawierający. Kod, który to umożliwia, zależy od tego, czy użyto elementu gmp-map czy div.

Pobieranie instancji mapy z elementu gmp-map

Aby uzyskać instancję mapy podczas korzystania z elementu gmp-map, użyj document.querySelector, aby pobrać instancję mapElement, jak pokazano poniżej.

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

Następnie ustaw właściwości instancji mapElement:

mapElement.zoom = 8;

Klasa MapElement używa wewnętrznie klasy Map. Dostęp do klasy Map można uzyskać za pomocą właściwości MapElement.innerMap, jak pokazano tutaj:

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

Pobieranie instancji mapy z elementu div

Gdy używasz elementu div, uzyskaj instancję mapy i ustaw opcje podczas inicjowania:

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

Po zainicjowaniu ustaw opcje w instancji map, jak pokazano tutaj:

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