Dodaj do swojej witryny mapę Google ze znacznikiem

Wstęp

Ten samouczek pokazuje, jak dodać do strony internetowej prostą mapę Google ze znacznikiem. Spełnia wymagania osób, które znają HTML i CSS na poziomie podstawowym lub średnio zaawansowanym, a także pewną znajomość języka JavaScript.

Poniżej znajduje się mapa, którą utworzysz w tym samouczku. Znacznik znajduje się w Uluru (znanej też jako Ayers Rock) w Parku Narodowym Uluru-Kata Tjuta.


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

Wypróbuj fragment

Wprowadzenie

Aby utworzyć mapę Google ze znacznikiem na stronie internetowej, trzeba wykonać trzy czynności:

  1. Tworzenie strony HTML
  2. Dodawanie mapy ze znacznikiem
  3. Uzyskiwanie klucza interfejsu API

Potrzebujesz przeglądarki. Z listy obsługiwanych przeglądarek wybierz dobrze znany system, na przykład Google Chrome (zalecane), Firefox, Safari lub Edge, w zależności od używanej platformy.

Krok 1. Utwórz stronę HTML

Oto kod podstawowej strony internetowej w języku HTML:

<!doctype html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add 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>
    <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>

Pamiętaj, że to bardzo prosta strona z nagłówkiem trzecim (h3) i jednym elementem div. Do strony internetowej możesz dodać dowolną treść.

Interpretacja kodu

Poniższy kod tworzy stronę HTML składającą się z nagłówka i treści.

<html>
 <head>
 </head>
 <body>
 </body>
</html>

Za pomocą poniższego kodu możesz dodać nagłówek poziomu trzeciego nad mapą.

<h3>My Google Maps Demo</h3>

Poniższy kod określa obszar strony, którego dotyczy mapa Google.

<!--The div element for the map -->
<div id="map"></div>

Na tym etapie samouczka obiekt div jest wyświetlany jako szary blok, ponieważ nie dodano jeszcze mapy. Poniższy kod opisuje usługę porównywania cen, która ustawia rozmiar i kolor elementu 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 */
}

W powyższym kodzie element style ustawia rozmiar mapy div. Aby mapa była widoczna, ustaw szerokość i wysokość pola div na wartość większą niż 0 pikseli. W tym przypadku div ma wysokość 400 pikseli i szerokość 100%, aby wyświetlić całą stronę internetową.

Program wczytywania przygotowuje interfejs Maps JavaScript API do wczytania (biblioteki nie są wczytywane do chwili wywołania funkcji importLibrary()).

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

Instrukcje pobierania własnego klucza interfejsu API znajdziesz w sekcji Krok 3. Uzyskaj klucz interfejsu API.

Krok 2. Dodaj mapę ze znacznikiem

W tej sekcji dowiesz się, jak wczytać interfejs Maps JavaScript API na swoją stronę internetową i napisać własny kod JavaScript, który korzysta z tego interfejsu API, aby dodać do niej mapę ze znacznikiem.

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();

W powyższym kodzie biblioteki Map i AdvancedMarkerView są wczytywane po wywołaniu funkcji initMap().

Interpretacja kodu

Poniższy kod tworzy nowy obiekt Map Google i dodaje do mapy właściwości, w tym poziom środka i powiększenia. Inne opcje właściwości znajdziesz w dokumentacji.

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

W powyższym kodzie new Map() tworzy nowy obiekt Map Google. Właściwość center informuje interfejs API, gdzie wyśrodkować mapę.

Dowiedz się więcej o uzyskiwaniu współrzędnych szerokości i długości geograficznej i przekształcaniu adresu na współrzędne geograficzne.

Właściwość zoom określa poziom powiększenia mapy. Powiększenie: 0 to najniższe powiększenie i wyświetla całą planetę. Ustaw większą wartość powiększenia, aby powiększyć widok Ziemi w wyższych rozdzielczościach.

Poniższy kod dodaje znacznik na mapie. Właściwość position określa położenie znacznika.

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

Więcej informacji o znacznikach:

Krok 3. Uzyskaj klucz interfejsu API

Z tej sekcji dowiesz się, jak uwierzytelnić aplikację w interfejsie Maps JavaScript API za pomocą własnego klucza interfejsu API.

Aby uzyskać klucz interfejsu API, wykonaj te czynności:

  1. Otwórz Google Cloud Console.

  2. Utwórz lub wybierz projekt.

  3. Kliknij Dalej, aby włączyć interfejs API i wszystkie powiązane usługi.

  4. Na stronie Dane logowania pobierz klucz interfejsu API (i ustaw ograniczenia dotyczące klucza interfejsu API). Uwaga: jeśli masz klucz interfejsu API bez ograniczeń lub klucz z ograniczeniami dotyczącymi przeglądarki, możesz go użyć.

  5. Aby zapobiec kradzieży limitu i zabezpieczyć klucz interfejsu API, zapoznaj się z sekcją o korzystaniu z kluczy interfejsu API.

  6. Włącz płatności. Więcej informacji znajdziesz w sekcji Korzystanie i płatności.

  7. Skopiuj cały kod tego samouczka z tej strony do edytora tekstu.

  8. Zastąp wartość parametru key w adresie URL własnym kluczem interfejsu API (czyli właśnie uzyskanym kluczem interfejsu API).

    <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>
    
  9. Zapisz plik z nazwą, która kończy się na .html, np. index.html.

  10. Wczytaj plik HTML w przeglądarce, przeciągając go z pulpitu do przeglądarki. W większości systemów operacyjnych można też dwukrotnie kliknąć plik.

Wskazówki i rozwiązywanie problemów

  • Możesz dostosowywać opcje takie jak styl i właściwości, aby dostosować mapę. Więcej informacji o dostosowywaniu map znajdziesz w przewodnikach po stylu i rysowaniu na mapie.
  • Użyj konsoli Narzędzi dla programistów w przeglądarce, by przetestować i uruchomić kod, przeczytać raporty o błędach i rozwiązać problemy z kodem.
  • Aby otworzyć konsolę w Chrome, użyj tych skrótów klawiszowych:
    Command+Option+J (Mac) lub Control+Shift+J (Windows).
  • Wykonaj poniższe czynności, aby poznać współrzędne szerokości i długości geograficznej lokalizacji w Mapach Google.

    1. Otwórz Mapy Google w przeglądarce.
    2. Kliknij prawym przyciskiem myszy dokładną lokalizację na mapie, dla której potrzebujesz współrzędnych.
    3. Z menu kontekstowego wybierz Co tu jest. U dołu ekranu wyświetli się karta. W ostatnim wierszu karty znajdź szerokość i długość geograficzną.
  • Możesz przekonwertować adres na współrzędne geograficzne, korzystając z usługi geokodowania. Przewodniki dla programistów zawierają szczegółowe informacje o pierwszych krokach z usługą Geocoding.