Wprowadzenie
W tym samouczku pokazujemy, jak dodać do strony internetowej prostą mapę Google ze znacznikiem. Przyda się ona użytkownikom, którzy mają już opanowane podstawy HTML lub CSS i trochę posługiwali się tym językiem. Zaawansowany przewodnik na temat tworzenia map znajdziesz w przewodniku dla programistów.
Poniżej znajdziesz mapę, którą utworzysz w ramach tego samouczka. Znacznik znajduje się w Uluru (nazywanym też Ayers Rock) w Parku Narodowym Uluru-Kata Tjuta.
Sekcja poniżej zawiera 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
Aby utworzyć mapę Google ze znacznikiem na stronie internetowej, wykonaj 3 czynności:
Potrzebujesz przeglądarki. Wybierz jedną z popularnych przeglądarek, takich jak Google Chrome (zalecane), Firefox, Safari lub Edge, na podstawie Twojej 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 jest bardzo prosta strona z nagłówkiem 3 (h3) i 1 elementem div. Do strony internetowej możesz dodać dowolne treści.
Omówienie kodu
Poniższy kod tworzy stronę HTML składającą się z nagłówka i treści.
<html> <head> </head> <body> </body> </html>
Za pomocą poniższego kodu możesz dodać nad poziomem mapy nagłówek 3.
<h3>My Google Maps Demo</h3>
Kod poniżej określa obszar strony przeznaczonej do mapy Google.
<!--The div element for the map --> <div id="map"></div>
Na tym etapie samouczka div jest tylko szarym blokiem, bo nie dodano jeszcze mapy. W kodzie poniżej widać kod CSS, który ustawia rozmiar i kolor elementu 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 div jako rozmiar mapy. Szerokość i wysokość div muszą być większe niż 0 pikseli, by mapa była widoczna. W tym przypadku div ma wysokość 400 pikseli, a szerokość – 100%, aby wyświetlać całą szerokość strony internetowej.
Krok 2. Dodaj mapę ze znacznikiem
W tej sekcji dowiesz się, jak wczytać interfejs API JavaScript Map Google na swojej stronie internetowej oraz jak napisać własny kod JavaScript, który korzysta z interfejsu API do dodawania mapy 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 tag script ładuje 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 wczytaniu interfejsu API. Atrybut async umożliwia przeglądarce analizowanie pozostałej części strony podczas wczytywania interfejsu API. Po załadowaniu przeglądarki przeglądarka wstrzyma i natychmiast uruchomi skrypt. Parametr key zawiera klucz interfejsu API.
Jeżeli nie wiesz, jak to zrobić, przejdź do sekcji Krok 3. Uzyskaj klucz interfejsu API.
Poniższy kod zawiera funkcję initMap, która inicjuje i dodaje mapę podczas wczytywania strony. Użyj tagu script, aby dołączyć własny kod JavaScript zawierający funkcję initMap.
function initMap() {}
Dodaj funkcję document.getElementById(), aby znaleźć mapę div na stronie internetowej.
Poniższy 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 wskazuje interfejsowi API, gdzie ma znaleźć się mapa.
Dowiedz się więcej o uzyskiwaniu współrzędnych szerokości i długości geograficznej lub przekształcaniu adresu we współrzędne geograficzne.
Właściwość zoom określa poziom powiększenia mapy. Powiększenie: 0 oznacza najniższy
powiększenie Ziemi. Ustaw większą wartość powiększenia, aby powiększyć
obraz Ziemi w wyższej rozdzielczości.
Poniższy 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. Uzyskaj klucz interfejsu API
W tej sekcji dowiesz się, jak uwierzytelniać aplikację w interfejsie Maps JavaScript API za pomocą własnego klucza interfejsu API.
Aby uzyskać klucz interfejsu API, wykonaj te czynności:
Otwórz Google Cloud Console.
Utwórz lub wybierz projekt.
Kliknij Dalej, aby włączyć 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 sekcją Używanie kluczy interfejsu API.
Włącz płatności. Więcej informacji znajdziesz w artykule Użycie i płatności.
Skopiuj cały kod z tego samouczka do edytora tekstu.
Zamień wartość parametru
keyw adresie URL na własny klucz interfejsu API (właśnie uzyskany klucz interfejsu API).<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script>Zapisz ten plik z nazwą zakończoną na
.html, np.index.html.Wczytaj plik HTML w przeglądarce, przeciągając go z komputera do przeglądarki. Możesz też kliknąć dwukrotnie plik. Działa to na większości systemów operacyjnych.
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 po stylowaniu i rysowaniu na mapach.
- 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 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). Wykonaj poniższe czynności, aby poznać szerokość i długość geograficzną lokalizacji w Mapach Google.
- Otwórz Mapy Google w przeglądarce.
- Kliknij prawym przyciskiem myszy dokładną lokalizację na mapie, której współrzędne chcesz sprawdzić.
- Z wyświetlonego menu kontekstowego wybierz Co tu jest?. Na dole ekranu wyświetli się karta. Znajdź szerokość i długość geograficzną w ostatnim wierszu karty.
Możesz zmienić adres na szerokość i długość geograficzną, korzystając z usługi geokodowania. Przewodniki dla programistów zawierają szczegółowe informacje o pierwszych krokach z usługą geokodowania.