Dodawanie mapy Google ze znacznikami za pomocą kodu HTML

Wprowadzenie

Z tego samouczka dowiesz się, jak dodać do strony internetowej mapę Google ze znacznikiem za pomocą niestandardowych elementów HTML. Oto mapa, którą utworzysz w tym samouczku. Znacznik jest umieszczony w Ottumwa w stanie Iowa.

Rozpocznij

Oto czynności, które wykonamy, aby utworzyć mapę Google ze znacznikiem za pomocą HTML:

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

Potrzebujesz przeglądarki. Wybierz znaną przeglądarkę, np. Google Chrome (zalecana), Firefox, Safari lub Edge, w zależności od platformy z listy obsługiwanych przeglądarek.

Krok 1. Uzyskaj klucz interfejsu API

W 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 konsolę Google Cloud.

  2. Utwórz lub wybierz projekt.

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

  4. Na stronie Dane logowania uzyskaj 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ć klucz interfejsu API, przeczytaj artykuł Korzystanie z kluczy interfejsu API.

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

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

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

Oto kod podstawowej strony internetowej 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 program ładujący bootstrap dla interfejsu Maps JavaScript API, jak pokazano w tym fragmencie kodu (dodaj własny klucz interfejsu API):

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

Ponieważ strona HTML powinna być samodzielna, dodaj kod CSS bezpośrednio do strony:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <style>
      gmp-map {
        height: 100%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
      defer
    ></script>
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

Krok 3. Dodaj mapę

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

<gmp-map center="41.027748173921374, -92.41852445367961" zoom="13" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

Spowoduje to utworzenie mapy wyśrodkowanej na Ottumwa w stanie Iowa, ale nie będzie na niej jeszcze znacznika.

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="41.027748173921374, -92.41852445367961"
    zoom="13"
    map-id="DEMO_MAP_ID">
    <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"></gmp-advanced-marker>
</gmp-map>

Powyższy kod dodaje znacznik do mapy. Aby używać zaawansowanych znaczników, musisz mieć identyfikator mapy (możesz użyć DEMO_MAP_ID).

Wypróbuj gotowy przykład w JSFiddle.

Wskazówki i rozwiązywanie problemów

  • Mapę możesz dostosować za pomocą niestandardowych stylów.
  • Aby testować i uruchamiać kod, czytać raporty o błędach i rozwiązywać problemy z kodem, użyj konsoli narzędzi dla deweloperów w przeglądarce.
  • Aby otworzyć konsolę w Chrome, użyj tych skrótów klawiszowych:
    Command+Option+J (na Macu) lub Ctrl+Shift+J (w systemie Windows).

  • Aby uzyskać współrzędne geograficzne lokalizacji w Mapach Google, wykonaj te czynności.

    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 wyświetlonego menu kontekstowego wybierz Co tu jest? U dołu ekranu pojawi się karta. Współrzędne geograficzne znajdziesz w ostatnim wierszu karty.

  • Adres możesz przekonwertować na współrzędne geograficzne za pomocą usługi Geocoding. Szczegółowe informacje o tym, jak zacząć korzystać z usługi Geocoding, znajdziesz w przewodnikach dla deweloperów.

Pełny przykładowy kod

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

<html>
    <head>
        <title>Add a Map with Markers using HTML</title>
        <style>
            gmp-map {
                height: 100%;
            }
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="module" src="./index.js"></script>
        <script
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly&internal_usage_attribution_ids=gmp_git_jsapisamples_v1_web-components"
            defer></script>
    </head>
    <body>
        <gmp-map
            center="41.027748173921374, -92.41852445367961"
            zoom="13"
            map-id="DEMO_MAP_ID">
            <gmp-advanced-marker
                position="41.027748173921374, -92.41852445367961"
                title="Ottumwa, IA"></gmp-advanced-marker>
        </gmp-map>
    </body>
</html>