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:

  • Załaduj interfejs API JavaScript Maps za pomocą programu ładującego Bootstrap. 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.
  • Załaduj bibliotekę maps i zainicjuj mapę.

Dodaj mapę 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 przy użyciu elementu gmp-map, wykonaj następujące kroki.

  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 bootstrap za pomocą klucza interfejsu API i innych opcji. Możesz wybrać albo dynamiczny import bibliotek albo bezpośrednie ładowanie skryptu. W tym przykładzie pokazano dodanie skryptu ładującego Bootstrap bezpośrednio do strony HTML:

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

    Dowiedz się więcej o ładowaniu interfejsu API JavaScript Map Google

  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. zaawansowanych znaczników). 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: 400px"
></gmp-map>
    index.html

Pełny 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>
  </head>
  <body>
    <gmp-map
      center="37.4220656,-122.0840897"
      zoom="10"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    ></gmp-map>
   <!-- 
      The `defer` attribute causes the script 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. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly"
      defer
    ></script>
  </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 bootstrap 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

Pełny 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

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,
});