Dodawanie mapy Google ze znacznikiem do witryny

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Wstęp

W tym samouczku pokazujemy, jak dodać do strony internetowej prostą mapę Google ze znacznikiem. Dla osób o średnim lub średnio zaawansowanym poziomie doświadczenia z językiem HTML i CSS i JavaScriptem. Zaawansowany przewodnik po tworzeniu map znajdziesz w przewodniku dla programistów.

Poniżej znajdziesz mapę tworzoną za pomocą tego samouczka. Znacznik znajduje się w miejscu Uluru (nazywanym też Ayers Rock) w Parku Narodowym Uluru-Kata Tjuta.

W sekcji poniżej znajdziesz cały kod potrzebny do utworzenia mapy w tym samouczku.

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;

CSS

/* 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 */
}

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>

    <!-- 
     The `defer` attribute causes the callback 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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

Fragment

Pierwsze kroki

Tworzenie mapy Google ze znacznikiem na stronie internetowej składa się z 3 kroków:

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

Potrzebujesz przeglądarki. Wybierz jedną z popularnych przeglądarek, takich jak Google Chrome (zalecany), Firefox, Safari lub Edge, na podstawie listy obsługiwanych przeglądarek.

Krok 1. 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>
    <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>

    <!-- 
     The `defer` attribute causes the callback 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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

To bardzo prosta strona z nagłówkiem poziomu 3 (h3) i pojedynczym elementem div. Do strony internetowej możesz dodawać dowolne treści.

Omówienie kodu

Kod poniżej tworzy stronę HTML składającą się z nagłówka i treści.

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

Kod poniżej możesz dodać nad mapą poziomu nagłówka powyżej 3.

<h3>My Google Maps Demo</h3>

Ten kod określa obszar strony dla Twojej mapy Google.

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

Na tym samouczku div jest widoczny jako szary blok, ponieważ nie została jeszcze dodana mapa. Kod poniżej opisuje usługę porównywania cen, która ustawia rozmiar i kolor div.

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* 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ść na div. W tym przypadku parametr div jest ustawiony na wysokość 400 pikseli, a szerokość 100% na szerokość strony internetowej.

Krok 2. Dodaj mapę ze znacznikiem

Z tej sekcji dowiesz się, jak wczytać interfejs API JavaScript Map Google na stronie internetowej i jak utworzyć własny kod JavaScript, korzystając z interfejsu API, aby dodać mapę ze znacznikiem.

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;

CSS

/* 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 */
}

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>

    <!-- 
     The `defer` attribute causes the callback 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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

Fragment

Omówienie kodu

W poniższym kodzie zasada script wczytuje interfejs API z określonego adresu URL.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

W powyższym kodzie parametr callback wykonuje funkcję initMap po załadowaniu interfejsu API. Atrybut async umożliwia przeglądarce analizowanie pozostałej części strony podczas wczytywania interfejsu API. załadowanie przeglądarki spowoduje natychmiastowe wstrzymanie skryptu i wykonanie go bezpośrednio. Parametr key zawiera klucz interfejsu API.

Instrukcje dotyczące uzyskiwania własnego klucza interfejsu API znajdziesz w sekcji Krok 3. Pobierz klucz interfejsu API.

Wymieniony poniżej kod zawiera funkcję initMap, która inicjuje i dodaje mapę podczas wczytywania strony. Użyj tagu script, aby dodać własny kod JavaScript zawierający funkcję initMap.

  function initMap() {}

Dodaj funkcję document.getElementById(), aby znaleźć mapę div na stronie internetowej.

Ten kod tworzy nowy obiekt Map Google i dodaje do mapy właściwości, w tym środek i poziom powiększenia. Informacje o innych opcjach właściwości znajdziesz w dokumentacji.

TypeScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(
  document.getElementById("map") as HTMLElement,
  {
    zoom: 4,
    center: uluru,
  }
);

JavaScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: uluru,
});

W powyższym kodzie new google.maps.Map() tworzy nowy obiekt Map Google. Właściwość center określa w interfejsie API, gdzie ma wyśrodkować mapę.

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

Właściwość zoom określa poziom powiększenia mapy. Powiększenie: 0 to najniższy poziom powiększenia i powoduje wyświetlenie całej Ziemi. Ustaw wartość powiększenia na wyższą, aby powiększyć obraz w obrazie o wyższej rozdzielczości.

Ten kod umieszcza na mapie znacznik. Właściwość position określa położenie znacznika.

TypeScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});

JavaScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});

Więcej informacji o znacznikach:

Krok 3. Pobierz klucz interfejsu API

Z tej sekcji dowiesz się, jak uwierzytelnić aplikację w interfejsie Maps JavaScript API, używając własnego klucza interfejsu API.

Aby uzyskać klucz interfejsu API:

  1. Otwórz Google Cloud Console.

  2. Utwórz lub wybierz projekt.

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

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

  5. Aby zapobiec kradzieży limitu i zabezpieczyć swój klucz API, przeczytaj artykuł Korzystanie z kluczy interfejsu API.

  6. Włącz płatności. Więcej informacji znajdziesz w artykule Użycie i płatności.

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

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

    <script async
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
    

  9. Zapisz ten plik z nazwą kończącą się na .html, np. index.html.

  10. Załaduj plik HTML w przeglądarce, przeciągając go z komputera do przeglądarki. W przypadku większości systemów operacyjnych kliknij dwukrotnie plik.

Wskazówki i rozwiązywanie problemów

  • Możesz dostosować opcje takie jak styl i właściwości, aby dostosować mapę. Więcej informacji o dostosowywaniu map znajdziesz w przewodnikach dotyczących stylowania i rysowania na mapie.
  • Za pomocą konsoli Narzędzi dla programistów w przeglądarce możesz testować i uruchamiać kod, czytać raporty o błędach i rozwiązywać problemy.
  • 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 dowiedzieć się, jak wyświetlić szerokość i długość geograficzną lokalizacji w Mapach Google, wykonaj poniższe czynności.

    1. Otwórz Mapy Google w przeglądarce.
    2. Kliknij prawym przyciskiem myszy dokładną lokalizację na mapie, której wymagają współrzędne.
    3. Z menu kontekstowego wybierz Co tu jest. Na dole ekranu wyświetli się karta. W ostatnim rzędzie karty znajdź współrzędne geograficzne.
  • Adres możesz przekształcić w szerokość geograficzną i długość geograficzną za pomocą usługi geokodowania. Szczegółowe informacje o tym, jak zacząć korzystać z usługi geokodowania, znajdziesz w przewodnikach dla programistów.