Dodaj mapę Google ze znacznikami za pomocą kodu HTML

Wprowadzenie

Ten samouczek pokazuje, jak dodać do strony internetowej mapę Google za pomocą znacznika za pomocą HTML. Oto mapa, którą utworzysz za pomocą tego samouczka. Dwa znaczniki są jednej z tych lokalizacji – w Mountain View w Kalifornii, a drugie w Seattle (Waszyngton).

Rozpocznij

Oto kroki, które omówimy podczas tworzenia mapy Google za pomocą znacznika HTML:

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

Potrzebujesz przeglądarki. Wybierz dobrze znany kod, np. Google Chrome (zalecane), Firefox, Safari lub Edge, w zależności od używanej platformy listę obsługiwanych przeglądarek.

Krok 1. Uzyskaj klucz interfejsu API

Ta sekcja wyjaśnia, jak uwierzytelnić aplikację w Maps JavaScript API za pomocą własnego klucza interfejsu API.

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

  1. Przejdź do Konsola Google Cloud.

  2. Utwórz lub wybierz projekt.

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

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

  5. Aby zapobiec kradzieży limitu i zabezpieczyć klucz interfejsu API, zapoznaj się z artykułem Korzystanie z kluczy interfejsu API

  6. Włącz płatności. Zobacz Korzystanie i płatności .

  7. Możesz teraz używać klucza interfejsu API.

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

Oto kod podstawowej strony internetowej w języku 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 programu wczytującego Maps JavaScript API zgodnie z instrukcją następujący fragment (dodaj własny klucz interfejsu API):

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

Uwaga spojler: 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 obrębie body strony HTML:

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

W ten sposób powstaje ta mapa:

Utworzona właśnie mapa jest wyśrodkowana na obszarze miejskim San Jose.

Krok 4. Dodaj znacznik

Aby dodać znacznik do mapy, użyj elementu HTML gmp-advanced-marker. Skopiuj poniższy fragment i wklej go cały fragment (gmp-map) dodany w polu poprzedniego 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

Poprzedni kod dodaje dwa znaczniki i zmienia zoom oraz center na gmp-map, by lepiej pokazać te znaczniki. Identyfikator mapy jest wymagany aby używać znaczników zaawansowanych (DEMO_MAP_ID jest dobrym rozwiązaniem).

Wskazówki i rozwiązywanie problemów

  • Możesz dostosować mapę, używając własnego stylu.
  • Użyj konsoli narzędzi dla programistów w przeglądarce, by przetestować i uruchomić kod, odczytywanie raportów o błędach i rozwiązywanie problemów 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 kroki, aby poznać szerokość geograficzną 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, której chcesz wyświetlić. .
    3. Z wyświetlonego menu kontekstowego wybierz Co tu jest. U dołu mapy pojawi się karta. Znajdź szerokość geograficzną długości i długości geograficznej w ostatnim wierszu karty.

  • Możesz przekonwertować adres na współrzędne geograficzne za pomocą Usługa geokodowania. Przewodniki dla programistów zawierają szczegółowe informacje jak zacząć korzystać z usługi geokodowania.

Pełny przykładowy kod

Poniżej znajduje się ostateczna mapa i pełny przykładowy kod, który został użyty do aplikacji Google Web Designer.

<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