Wprowadzenie
Z tego samouczka dowiesz się, jak za pomocą kodu HTML dodać do strony internetowej mapę Google z znacznikiem. Oto mapa, którą utworzysz za pomocą tego samouczka. Dwa znaczniki są umieszczone – jeden w Mountain View w Kalifornii, a drugi w Seattle w stanie Waszyngton.
Rozpocznij
Oto kroki, które omówimy, by utworzyć mapę Google ze znacznikiem w języku HTML:
- Uzyskiwanie klucza interfejsu API
- Tworzenie kodu HTML, CSS i JavaScript
- Dodawanie mapy
- 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. Uzyskaj 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:
Otwórz konsolę Google Cloud.
Utwórz lub wybierz projekt.
Kliknij Dalej, aby włączyć ten interfejs API i powiązane usługi.
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 dotyczącymi przeglądarki, możesz go użyć.
Aby zapobiec kradzieży limitu i zabezpieczyć klucz interfejsu API, zapoznaj się z artykułem Korzystanie z kluczy interfejsu API.
Włącz płatności. Więcej informacji znajdziesz w sekcji Wykorzystanie i rozliczenia.
Możesz teraz używać klucza interfejsu 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 spojler: wypróbuj gotowy przykład w JSFiddle.
Krok 3. Dodaj mapę
Aby dodać mapę Google do strony, skopiuj element HTML gmp-map
i wklej go w sekcji body
na stronie 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 kodu i wklej go w całości (gmp-map
) dodany 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>
Poprzedni kod dodaje 2 znaczniki i zmienia parametry zoom
oraz center
w gmp-map
, aby lepiej je wyświetlać. 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ę, używając własnego 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 (Mac) lub Control + Shift + J (Windows). Wykonaj poniższe czynności, aby uzyskać współrzędne geograficzne wybranej lokalizacji w Mapach Google.
- Otwórz Mapy Google w przeglądarce.
- Kliknij prawym przyciskiem myszy dokładną lokalizację na mapie, dla której chcesz dodać współrzędne.
- W wyświetlonym menu kontekstowym wybierz Co tu jest. U dołu ekranu mapa wyświetla kartę. Znajdź współrzędne szerokości i długości geograficznej w ostatnim wierszu karty.
Możesz przekonwertować adres na współrzędne geograficzne, korzystając z usługi Geocoding. W przewodnikach dla programistów znajdziesz szczegółowe informacje o pierwszych krokach z usługą geokodowania.
Pełny przykładowy kod
Poniżej znajdziesz ostateczną mapę i pełny przykładowy kod 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>