Dodawanie mapy Google do strony internetowej

Możesz dodać mapę Google do strony internetowej, używając kodu HTML, CSS i JavaScript. Na tej stronie dowiesz się, jak dodać mapę do strony internetowej na 2 sposoby: za pomocą niestandardowego elementu HTML gmp-map i elementu div.

Przegląd

Aby wczytać mapę, Twoja strona internetowa musi:

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

Dodawanie mapy za pomocą elementu gmp-map

Element gmp-map to niestandardowy element HTML utworzony przy użyciu komponentów internetowych. Aby dodać mapę do strony internetowej za pomocą elementu gmp-map, wykonaj te czynności.

  1. Do strony HTML dodaj element script zawierający ładowanie skonfigurowane za pomocą klucza interfejsu API oraz wszelkie inne opcje. W poniższym przykładzie wczytywania pominięto parametr callback, ponieważ nie jest on potrzebny.

    <script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=maps&v=beta" defer>
</script>

  2. Do strony HTML dodaj element gmp-map. Określ współrzędne szerokości i długości geograficznej dla obszaru center i wartość powiększenia dla: zoom. W tym przykładzie określono również atrybut stylu height.

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

Uzupełnij przykładowy kod

<html>
  <head>
    <title>Add a Map using HTML</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>
    <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=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps&v=beta"
      defer
    ></script>
  </body>
</html>
index.html

Dodaj mapę za pomocą elementu div i JavaScriptu

Element div jest nadal obsługiwany w przypadku wczytywania map. Aby dodać mapę do strony internetowej za pomocą elementu div, wykonaj poniższe czynności.

  1. Do strony HTML dodaj element script zawierający moduł wczytywania skonfigurowany za pomocą Twojego klucza interfejsu API i innych opcji. Możesz też dodać kod wczytujący system Boottrap bezpośrednio do pliku TypeScript lub JavaScript, z wyłączeniem tagów script.

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

  2. Do strony HTML dodaj element div, aby umieścić mapę.

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

  3. W pliku CSS ustaw wysokość mapy na 100%.

    #map {
  height: 100%;
}

  4. W pliku JavaScript utwórz funkcję do wczytywania biblioteki maps i inicjowania mapy. Określ współrzędne szerokości i długości geograficznej obszaru center oraz poziom powiększenia, który będzie używany w przypadku zoom.

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

Uzupełnij 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>
    <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>

    <!-- 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>
index.html

Zobacz próbkę