Dodawanie znacznika Google Map w języku JavaScript

Wprowadzenie

W tym samouczku pokazujemy, jak dodać do strony internetowej prostą mapę Google ze znacznikiem. Kurs jest przeznaczony dla osób, które mają podstawową lub średniozaawansowaną znajomość HTML i CSS oraz małą znajomość JavaScript.

Poniżej znajduje się mapa, którą utworzysz w ramach tego samouczka. Znacznik znajduje się w Uluru (zwanym też Ayers Rock) w Parku Narodowym Uluru-Kata Tjuta.

Pierwsze kroki

Aby utworzyć mapę Google ze znacznikiem na stronie internetowej, wykonaj 3 działania:

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

Potrzebujesz przeglądarki. Wybierz znaną przeglądarkę, np. Google Chrome (zalecana), Firefox, Safari lub Edge, na podstawie platformy z listy obsługiwanych przeglądarek.

Krok 1. Pobierz klucz interfejsu API

W tej sekcji wyjaśniamy, jak uwierzytelnić aplikację w interfejsie Maps JavaScript API za pomocą własnego klucza API.

Aby uzyskać klucz interfejsu API:

  1. Otwórz konsolę Google Cloud.

  2. Utwórz lub wybierz projekt.

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

  4. Na stronie Dane logowania pobierz klucz interfejsu API (i ustaw ograniczenia dotyczące klucza interfejsu API). Uwaga: jeśli masz już 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 API, zapoznaj się z artykułem Korzystanie z kluczy API.

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

  7. Po uzyskaniu klucza API dodaj go do poniższego fragmentu kodu, klikając „YOUR_API_KEY”. Skopiuj i wklej tag skryptu programu ładującego, aby użyć go na własnej stronie internetowej.

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

Krok 2. Utwórz stronę HTML

Oto kod podstawowej strony internetowej HTML:

<!doctype html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>

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

index.html

Pamiętaj, że jest to bardzo podstawowa strona z poziomem nagłówka 3 (h3) i jednym elementem div. Możesz dodawać do strony internetowej dowolną treść.

Zrozumienie kodu

Na tym etapie mamy:

  • Aplikacja została zadeklarowana jako HTML5 za pomocą deklaracji !DOCTYPE html.
  • Utworzono element div o nazwie „map” do przechowywania mapy.
  • Wczytano interfejs Maps JavaScript API za pomocą ładowarki bootstrap.

Zadeklaruj, że Twoja aplikacja jest w formacie HTML5

Zalecamy zadeklarowanie w aplikacji internetowej wartości true dla atrybutu DOCTYPE. W przykładach poniżej deklarujemy nasze aplikacje jako HTML5 za pomocą prostego kodu HTML5 DOCTYPE:

<!DOCTYPE html>

Większość obecnych przeglądarek będzie renderować treści zadeklarowane za pomocą tego DOCTYPEw „standardowym trybie”, co oznacza, że aplikacja powinna być bardziej zgodna z wieloma przeglądarkami. DOCTYPE jest też zaprojektowany tak, aby działać w trybie awaryjnym. Przeglądarki, które go nie rozumieją, będą go ignorować i używały „trybu niestandardowego” do wyświetlania treści.

Pamiętaj, że niektóre reguły CSS, które działają w trybie Quirks, nie są prawidłowe w trybie standardowym. W szczególności wszystkie rozmiary oparte na wartościach procentowych muszą dziedziczyć wartości od nadrzędnych elementów bloku. Jeśli któryś z tych elementów nie ma określonego rozmiaru, przyjmuje się, że ma on wymiary 0 x 0 pikseli. Z tego powodu przedstawiamy następujące oświadczenie:style

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

Tworzenie elementu div

Aby mapa wyświetlała się na stronie internetowej, musimy zarezerwować dla niej miejsce. Zwykle robimy to, tworząc element o nazwie div i uzyskiwanie odwołania do tego elementu w modelu dokumentu (DOM) przeglądarki.

Podany niżej kod definiuje obszar strony przeznaczony na mapę Google.

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

Na tym etapie samouczka element div jest widoczny jako szary blok, ponieważ nie masz jeszcze dodanej mapy. Poniższy kod zawiera opis CSS, który określa 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 div mapy. Aby mapa była widoczna, ustaw szerokość i wysokość na większą niż 0 pikseli.div W tym przypadku div ma wysokość 400 pikseli i szerokość 100%, aby wyświetlać obraz na całej szerokości strony internetowej. Pamiętaj, że szerokość divów jest zwykle określana przez element nadrzędny, a puste divy mają zwykle wysokość 0. Z tego powodu musisz zawsze wyraźnie ustawić wysokość w elemencie div.

Wczytywanie interfejsu Maps JavaScript API

Ładowarka bootstrap przygotowuje interfejs JavaScript API Map do wczytania (do wywołania funkcji importLibrary() nie są wczytywane żadne biblioteki).

<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 dotyczące uzyskiwania własnego klucza interfejsu API znajdziesz w sekcji Krok 3. Uzyskaj klucz interfejsu API.

Krok 3. Dodaj mapę ze znacznikiem

Z tej sekcji dowiesz się, jak wczytać interfejs Maps JavaScript API na stronie internetowej i jak pisać własny kod JavaScript, który korzysta z interfejsu API do dodawania mapy 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();
index.ts

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();
index.js

W powyższym kodzie biblioteki Map i AdvancedMarkerElement są ładowane, gdy wywoływana jest funkcja initMap().

Zrozumienie kodu

Na tym etapie samouczka mamy:

  • Zdefiniuj funkcję JavaScriptu, która tworzy mapę w elemencie div.
  • Utworzono AdvancedMarkerElement, aby dodać znacznik do mapy.

Dodawanie mapy

Podany niżej kod tworzy nowy obiekt Map Google i dodaje do mapy właściwości, w tym środek i poziom powiększenia. Zapoznaj się z dokumentacją dotyczącą innych opcji obiektu.

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',
  }
);
index.ts

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

index.js

W przypadku każdej mapy wymagane są 2 opcje: center i zoom. W powyższym kodzie element new Map() tworzy nowy obiekt Map Google. Właściwość center informuje interfejs API, gdzie ma wyśrodkować mapę.

Właściwość zoom określa poziom powiększenia mapy. Zoom: 0 to najmniejszy zoom, który wyświetla całą Ziemię. Aby powiększyć widok Ziemi w wyższych rozdzielczościach, ustaw wyższą wartość powiększenia.

Udostępnianie mapy całej Ziemi w ramach pojedynczego obrazu wymagałoby albo ogromnej mapy, albo małej mapy o bardzo niskiej rozdzielczości. W rezultacie obrazy mapy w Mapach Google i Maps JavaScript API są podzielone na „płytki” mapy i „poziomy powiększenia”. Przy małym powiększeniu niewielki zestaw kafelków mapy obejmuje duży obszar. Przy większym powiększeniu kafelki mają większą rozdzielczość i obejmują mniejszy obszar. Poniższa lista pokazuje przybliżony poziom szczegółowości na poszczególnych poziomach powiększenia:

  • 1: Świat
  • 5. Ląd lub kontynent
  • 10: Miasto
  • 15: Ulice
  • 20: Budynki

Trzy poniższe obrazy przedstawiają to samo miejsce w Tokio na poziomach powiększenia 0, 7 i 18.

Dodaj znacznik

Poniższy kod umieszcza na mapie znacznik. 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'
});
index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: "Uluru",
});
index.js

Pełny przykładowy kod

Pełny przykładowy kod znajdziesz tutaj:

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();
index.ts

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();
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>Add Map</title>

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

Wypróbuj

Więcej informacji o znacznikach:

Wskazówki i rozwiązywanie problemów

  • Dowiedz się więcej o pobieraniu współrzędnych geograficznych lub konwertowaniu adresu na współrzędne geograficzne.
  • Możesz dostosować mapę, dostosowując opcje takie jak styl i właściwości. Więcej informacji o dostosowywaniu map znajdziesz w przewodnikach dotyczących stylizacji i rysowania na mapie.
  • W przeglądarce możesz korzystać z konsoli narzędzi dla programistów, aby testować i uruchamiać kod, czytać raporty o błędach oraz rozwiązywać problemy z kodem.
  • Aby otworzyć konsolę w Chrome, użyj tych skrótów klawiszowych:
    Command + Option + J (na Macu) lub Control + Shift + J (w systemie Windows).

  • Aby uzyskać współrzędne szerokości i długości geograficznej lokalizacji w Mapach Google, wykonaj podane niżej czynności.

    1. Otwórz Mapy Google w przeglądarce.
    2. Kliknij prawym przyciskiem myszy na mapie dokładną lokalizację, której współrzędne chcesz poznać.
    3. W wyświetlonym menu kontekstowym wybierz Co tu jest. U dołu ekranu mapa wyświetla kartę. Szerokość i długość geograficzną znajdziesz w ostatnim wierszu karty.

  • Za pomocą usługi geokodowania możesz przekonwertować adres na współrzędne szerokości i długości geograficznej. W przewodnikach dla programistów znajdziesz szczegółowe informacje o pierwszych krokach z usługą geokodowania.