Wstęp
Z tego samouczka dowiesz się, jak dodać do strony internetowej prostą mapę Google ze znacznikiem. Jest przeznaczona dla osób początkujących i średniozaawansowanych w zakresie HTML i CSS oraz od niewielkiej wiedzy o JavaScripcie.
Poniżej znajduje się mapa, którą utworzysz za pomocą tego samouczka. Znacznik znajduje się na terenie Uluru (znanej też jako Ayers Rock) w Parku Narodowym Uluru-Kata Tjuta.
TypeScript
// Initialize and add the map
let map;
async function initMap(): Promise<void> {
// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
// The map, centered at Uluru
map = new Map(
document.getElementById('map') as HTMLElement,
{
zoom: 4,
center: position,
mapId: 'DEMO_MAP_ID',
}
);
// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
map: map,
position: position,
title: 'Uluru'
});
}
initMap();
JavaScript
// Initialize and add the map
let map;
async function initMap() {
// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
zoom: 4,
center: position,
mapId: "DEMO_MAP_ID",
});
// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
map: map,
position: position,
title: "Uluru",
});
}
initMap();
CSS
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
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>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
</body>
</html>
Zobacz próbkę
Pierwsze kroki
Tworzenie mapy Google ze znacznikiem na stronie internetowej odbywa się w 3 krokach:
Potrzebujesz przeglądarki. Z listy obsługiwanych przeglądarek wybierz dobrze znaną przeglądarkę, np. Google Chrome (zalecane), Firefox, Safari lub Edge.
Krok 1. Uzyskaj klucz interfejsu API
Z 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:
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 przeglądarki, możesz go użyć.
Aby zapobiec kradzieży limitu i zabezpieczyć klucz interfejsu API, zapoznaj się z artykułem na temat używania kluczy interfejsu API.
Włącz płatności. Więcej informacji znajdziesz w artykule Korzystanie i płatności.
Po otrzymaniu klucza interfejsu API dodaj go do poniższego fragmentu, klikając „YOUR_API_KEY”. Skopiuj i wklej tag skryptu rozruchowego do użytku na własnej stronie internetowej.
<script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>style="height: 400px"
Krok 2. Utwórz stronę HTML
Oto kod podstawowej strony internetowej w języku 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>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
</body>
</html>
Pamiętaj, że jest to bardzo podstawowa strona z nagłówkiem poziomu 3 (h3) i pojedynczym elementem div. Do strony internetowej możesz dodać dowolną treść.
Zrozumienie kodu
Poniższy kod tworzy stronę HTML składającą się z nagłówka i treści.
<html> <head> </head> <body> </body> </html>
Możesz dodać nagłówek trzeciego poziomu nad mapą, korzystając z poniższego kodu.
<h3>My Google Maps Demo</h3>
Poniższy kod określa obszar strony mapy Google.
<!--The div element for the map --> <div id="map"></div>
Na tym etapie samouczka div jest wyświetlany jako szary blok, ponieważ nie dodano jeszcze mapy. Poniższy kod opisuje kod CSS, który ustawia rozmiar i kolor div.
/* 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 rozmiar mapy (div). Aby mapa była widoczna, ustaw szerokość i wysokość na więcej niż 0 pikseli w polu div. W tym przypadku element div ma wysokość 400 pikseli, a szerokość 100%, co oznacza, że wyświetla się na całej szerokości strony internetowej.
Moduł wczytywania danych przygotowuje interfejs Maps JavaScript API do wczytania (żadne biblioteki nie są wczytywane, dopóki nie zostanie wywołana funkcja importLibrary()).
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "YOUR_API_KEY",
v: "weekly",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
Instrukcje uzyskiwania własnego klucza interfejsu API znajdziesz w sekcji Krok 3. Uzyskaj klucz interfejsu API.
Krok 3. Dodaj mapę ze znacznikiem
Z tej sekcji dowiesz się, jak wczytać interfejs Maps JavaScript API na swoją stronę internetową oraz jak napisać własny kod JavaScript, który za pomocą tego interfejsu API doda do niej mapę ze znacznikiem.
TypeScript
// Initialize and add the map
let map;
async function initMap(): Promise<void> {
// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
// The map, centered at Uluru
map = new Map(
document.getElementById('map') as HTMLElement,
{
zoom: 4,
center: position,
mapId: 'DEMO_MAP_ID',
}
);
// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
map: map,
position: position,
title: 'Uluru'
});
}
initMap();
JavaScript
// Initialize and add the map
let map;
async function initMap() {
// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
zoom: 4,
center: position,
mapId: "DEMO_MAP_ID",
});
// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
map: map,
position: position,
title: "Uluru",
});
}
initMap();
W powyższym kodzie biblioteki Map i AdvancedMarkerView są ładowane po wywołaniu funkcji initMap().
Interpretacja kodu
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 position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
// The map, centered at Uluru
map = new Map(
document.getElementById('map') as HTMLElement,
{
zoom: 4,
center: position,
mapId: 'DEMO_MAP_ID',
}
);
JavaScript
// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
zoom: 4,
center: position,
mapId: "DEMO_MAP_ID",
});
W powyższym kodzie new Map() tworzy nowy obiekt Map Google. Właściwość center informuje interfejs API, gdzie umieścić mapę.
Dowiedz się więcej o uzyskiwaniu i uzyskiwaniu współrzędnych szerokości i długości geograficznej lub przekształcaniu adresu na współrzędne geograficzne.
Właściwość zoom określa poziom powiększenia mapy. Powiększenie: 0 to najniższe powiększenie
i wyświetla całą Ziemię. Ustaw większą wartość powiększenia,
aby powiększyć obraz Ziemi w wyższych rozdzielczościach.
Poniższy kod umieszcza znacznik na mapie. Położenie znacznika
określa właściwość position.
TypeScript
// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
map: map,
position: position,
title: 'Uluru'
});
JavaScript
// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
map: map,
position: position,
title: "Uluru",
});
Więcej informacji o znacznikach:
Wskazówki i rozwiązywanie problemów
- Możesz doprecyzować opcje, takie jak styl i właściwości, aby dostosować mapę. Więcej informacji o dostosowywaniu map znajdziesz w przewodnikach po stylizowaniu stylu i rysowaniu na mapie.
- Korzystając z 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 (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.
- Z wyświetlonego menu kontekstowego wybierz Co tu jest. U dołu mapy pojawi się karta. 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. Szczegółowe informacje o tym, jak rozpocząć korzystanie z usługi Geocoding, znajdziesz w przewodnikach dla programistów.