Dodaj mapę Google ze znacznikami za pomocą kodu HTML

Wprowadzenie

Z tego samouczka dowiesz się, jak za pomocą kodu HTML dodać do strony internetowej mapę Google z znacznikiem. Oto mapa, którą utworzysz w ramach tego samouczka. Umieszczono 2 znaczniki: jeden w Mountain View w Kalifornii, a drugi w Seattle w stanie Waszyngton.

Rozpocznij

Oto instrukcje tworzenia mapy Google ze znacznikiem za pomocą kodu HTML:

  1. Pobieranie klucza interfejsu API
  2. Tworzenie kodu HTML, CSS i JavaScript
  3. Dodawanie mapy
  4. Dodawanie znacznika

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. Możesz teraz używać klucza API.

Krok 2. Utwórz kod HTML, CSS i JavaScript

Oto kod prostej strony internetowej w formacie HTML:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <!-- TODO: Add bootstrap script tag. -->
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

Aby wczytać mapę, musisz dodać tag script zawierający ładowarkę bootstrap dla interfejsu Maps JavaScript API, jak pokazano w tym fragmencie kodu (dodaj swój własny klucz interfejsu API):

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

Uwaga na spoilery: wypróbuj gotowy przykład w JSFiddle.

Krok 3. Dodaj mapę

Aby dodać do strony mapę Google, skopiuj element HTML gmp-map i wklej go w body strony HTML:

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

Powoduje to wyświetlenie takiej mapy:

Utworzona przez Ciebie mapa jest wyśrodkowana na obszarze metropolitalnym San Jose.

Krok 4. Dodaj znacznik

Aby dodać znacznik do mapy, użyj elementu HTML gmp-advanced-marker. Skopiuj ten fragment kodu i wklej go w miejsce całego elementu gmp-map dodanego w poprzednim kroku.

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

Powyższy kod dodaje 2 znaczniki i zmienia parametry zoom i center w elementach gmp-map, aby lepiej je pokazać. Aby używać zaawansowanych znaczników, musisz podać identyfikator mapy (możesz użyć DEMO_MAP_ID).

Wskazówki i rozwiązywanie problemów

  • Możesz dostosować mapę za pomocą niestandardowego stylu.
  • 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 geograficzne 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.

Pełny przykładowy kod

Poniżej znajdziesz gotową mapę i pełny przykładowy kod, który został użyty w tym samouczku.

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    >
      <gmp-advanced-marker
        position="37.4220656,-122.0840897"
        title="Mountain View, CA"
      ></gmp-advanced-marker>
      <gmp-advanced-marker
        position="47.648994,-122.3503845"
        title="Seattle, WA"
      ></gmp-advanced-marker>
    </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,marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.html