1. Zanim zaczniesz
Dowiedz się, jak używać interfejsów API Map Google i Miejsca Google Maps do tworzenia lokalnych firm, które służą do wyznaczania lokalizacji użytkownika i pokazywania interesujących miejsc w pobliżu. Aplikacja integruje geolokalizację, szczegóły miejsca, zdjęcia miejsc itp.
Wymagania wstępne
- Podstawowa wiedza o HTML, CSS i JavaScript
- projekt z kontem rozliczeniowym (jeśli go nie masz, postępuj zgodnie z instrukcjami podanymi w następnym kroku).
- Aby włączyć tę funkcję, musisz włączyć Maps JavaScript API i Places API.
- Klucz interfejsu API dla powyższego projektu.
Pierwsze kroki z Google Maps Platform
Jeśli korzystasz z Google Maps Platform po raz pierwszy, zapoznaj się z przewodnikiem dla początkujących po Google Maps Platform lub obejrzyj tę playlistę, aby poznać te wskazówki:
- Utwórz konto rozliczeniowe.
- Utwórz projekt.
- Włącz interfejsy API i pakiety SDK Google Maps Platform (znajdziesz je w poprzedniej sekcji).
- Wygeneruj klucz interfejsu API.
Co chcesz zrobić
- Tworzenie strony internetowej z mapą Google
- Wyśrodkowanie mapy na lokalizacji użytkownika
- Znajduj miejsca w pobliżu i wyświetlaj wyniki jako klikalne znaczniki
- Pobieranie i wyświetlanie szczegółowych informacji o każdym miejscu
Czego potrzebujesz
- Przeglądarka internetowa, np. Google Chrome (zalecana), Firefox, Safari lub Internet Explorer
- Twój ulubiony edytor tekstu lub kodu
Pobierz przykładowy kod
- Otwórz interfejs wiersza poleceń (terminal w systemie MacOS lub wiersz polecenia w systemie Windows) i pobierz przykładowy kod poleceniem:
git clone https://github.com/googlecodelabs/google-maps-nearby-search-js/
Jeśli to nie zadziała, kliknij poniższy przycisk, by pobrać cały kod do tych ćwiczeń z programowania, a następnie rozpakuj go:
- Przejdź do katalogu, który został właśnie skopiowany lub pobrany.
cd google-maps-nearby-search-js
Foldery stepN
zawierają odpowiedni stan zakończenia każdego kroku w tym ćwiczeniu z programowania. Służą one jako punkt odniesienia. Wykonaj wszystkie czynności związane z kodowaniem w katalogu work
.
2. Tworzenie mapy z domyślnym środkiem
Tworzenie mapy Google na stronie internetowej składa się z 3 kroków:
- Tworzenie strony HTML
- Dodawanie mapy
- Wklej klucz interfejsu API
1. Tworzenie strony HTML
Poniżej znajduje się mapa utworzona w tym kroku. Mapa jest wyśrodkowana na Operze w Sydney w Australii. Jeśli użytkownik odmówi udzielenia dostępu do swojej lokalizacji, mapa zostanie domyślnie ustawiona w tej lokalizacji i nadal będzie zawierać interesujące wyniki wyszukiwania.
- Zmień katalogi na folder
work/
. Przez resztę ćwiczenia z programowania wprowadź zmiany w folderzework/
.
cd work
- W katalogu
work/
użyj edytora tekstu, aby utworzyć pusty plik o nazwieindex.html
. - Skopiuj ten kod do aplikacji
index.html
.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Sushi Finder</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
background-color: grey;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
/* TODO: Step 4A1: Make a generic sidebar. */
</style>
</head>
<body>
<!-- TODO: Step 4A2: Add a generic sidebar -->
<!-- Map appears here -->
<div id="map"></div>
<!-- TODO: Step 1B, Add a map -->
</body>
</html>
- Otwórz plik
index.html
w przeglądarce.
open index.html
2. Dodawanie mapy
Ta sekcja pokazuje, jak wczytać interfejs API JavaScript Map Google na stronę internetową i napisać własny kod JavaScript, który będzie korzystać z interfejsu API do dodawania mapy do strony internetowej.
- Dodaj ten kod skryptu w miejscu, w którym widać element
<!-- TODO: Step 1B, Add a map -->
po tagu divmap
i przed zamykającym tagiem</body>
.
krok1/index.html
<!-- TODO: Step 1B, Add a map -->
<script>
/* Note: This example requires that you consent to location sharing when
* prompted by your browser. If you see the error "Geolocation permission
* denied.", it means you probably did not give permission for the browser * to locate you. */
/* TODO: Step 2, Geolocate your user
* Replace the code from here to the END TODO comment with new code from
* codelab instructions. */
let pos;
let map;
function initMap() {
// Set the default location and initialize all variables
pos = {lat: -33.857, lng: 151.213};
map = new google.maps.Map(document.getElementById('map'), {
center: pos,
zoom: 15
});
}
/* END TODO: Step 2, Geolocate your user */
</script>
<!-- TODO: Step 1C, Get an API key -->
<!-- TODO: Step 3A, Load the Places Library -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
3. Wklej w kluczu interfejsu API
- W wierszu po
<!-- TODO: Step 1C, Get an API key -->
skopiuj i zastąp wartość parametru klucza w źródłowym adresie URL skryptu wartością klucza interfejsu API utworzoną w ramach wymagań wstępnych.
krok1/index.html
<!-- TODO: Step 1C, Get an API key -->
<!-- TODO: Step 3A, Load the Places Library -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
- Zapisz plik HTML, nad którym pracujesz.
Testowanie
Ponownie załaduj widok edytowanego pliku w przeglądarce. Powinna pojawić się mapa w miejscu, gdzie wcześniej był szary prostokąt. Jeśli zamiast tego pojawi się komunikat o błędzie, upewnij się, że ciąg "YOUR_API_KEY
" w końcowym tagu <script>
własnym kluczem interfejsu API został zastąpiony. Zobacz powyżej, jak uzyskać klucz interfejsu API, jeśli jeszcze go nie masz.
Pełny przykładowy kod
Pełny kod tego projektu jest do tej pory dostępny w GitHub.
3. Geolokalizacja użytkownika
Następnie chcesz wyświetlić na mapie Google lokalizację geograficzną użytkownika lub urządzenia, korzystając z geolokalizacji HTML5 w przeglądarce wraz z interfejsem Maps JavaScript API.
Oto przykład mapy z Twoją lokalizacją geograficzną, jeśli korzystasz z przeglądarki Mountain View w Kalifornii:
Co to jest geolokalizacja?
Geolokalizacja określa położenie geograficzne użytkownika lub urządzenia komputerowego za pomocą różnych mechanizmów zbierania danych. Zazwyczaj większość usług geolokalizacji określa lokalizację za pomocą adresów sieciowych lub urządzeń GPS. Aby określić lokalizację użytkownika, aplikacja korzysta ze standardowej właściwości geolokalizacji navigator.geolocation
w przeglądarce internetowej W3C.
Wypróbuj
Zastąp kod między komentarzami TODO: Step 2, Geolocate your user
i END TODO: Step 2, Geolocate your user
tym kodem:
krok2/index.html
/* TODO: Step 2, Geolocate your user
* Replace the code from here to the END TODO comment with this code
* from codelab instructions. */
let pos;
let map;
let bounds;
let infoWindow;
let currentInfoWindow;
let service;
let infoPane;
function initMap() {
// Initialize variables
bounds = new google.maps.LatLngBounds();
infoWindow = new google.maps.InfoWindow;
currentInfoWindow = infoWindow;
/* TODO: Step 4A3: Add a generic sidebar */
// Try HTML5 geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map = new google.maps.Map(document.getElementById('map'), {
center: pos,
zoom: 15
});
bounds.extend(pos);
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
/* TODO: Step 3B2, Call the Places Nearby Search */
}, () => {
// Browser supports geolocation, but user has denied permission
handleLocationError(true, infoWindow);
});
} else {
// Browser doesn't support geolocation
handleLocationError(false, infoWindow);
}
}
// Handle a geolocation error
function handleLocationError(browserHasGeolocation, infoWindow) {
// Set default location to Sydney, Australia
pos = {lat: -33.856, lng: 151.215};
map = new google.maps.Map(document.getElementById('map'), {
center: pos,
zoom: 15
});
// Display an InfoWindow at the map center
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Geolocation permissions denied. Using default location.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
currentInfoWindow = infoWindow;
/* TODO: Step 3B3, Call the Places Nearby Search */
}
/* END TODO: Step 2, Geolocate your user */
/* TODO: Step 3B1, Call the Places Nearby Search */
Testowanie
- Zapisz plik.
- Załaduj ponownie stronę.
Przeglądarka powinna teraz prosić o uprawnienia do udostępniania Twojej lokalizacji aplikacji.
- Jednorazowo kliknij Zablokuj, aby sprawdzić, czy błąd został rozwiązany i pozostał on wyśrodkowany w Sydney.
- Załaduj ponownie stronę i kliknij Zezwól, by sprawdzić, czy geolokalizacja działa, i przeniesie mapę na Twoją bieżącą lokalizację.
Pełny przykładowy kod
Pełny kod tego projektu jest do tej pory dostępny w GitHub.
4. Wyszukiwanie miejsc w pobliżu
Wyszukiwanie w pobliżu pozwala wyszukiwać miejsca na określonym obszarze przy użyciu słów kluczowych lub typów. Wyszukiwanie w pobliżu zawsze musi uwzględniać lokalizację, którą można określić na jeden z dwóch sposobów:
- Obiekt
LatLngBounds
definiujący prostokątny obszar wyszukiwania - Okrągły obszar zdefiniowany jako połączenie właściwości
location
z określeniem środka okręgu jako obiektuLatLng
i promieńem mierzonym w metrach
Rozpocznij wyszukiwanie w pobliżu, wywołując metodę PlacesService
nearbySearch()
, która zwróci tablicę obiektów PlaceResult
.
A. Wczytaj bibliotekę miejsc
Aby uzyskać dostęp do usług Biblioteki miejsc, zaktualizuj adres URL skryptu źródłowego i wprowadź parametr libraries
oraz dodaj places
jako wartość.
krok3/indeks.html
<!-- TODO: Step 3A, Load the Places Library -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">
B. Wywołaj funkcję Wyszukiwanie w pobliżu, aby poprosić o odpowiedź i ją przetworzyć
Następnie utwórz żądanie miejsca wyszukiwania. Minimalne wymagane pola:
Minimalne wymagane pola:
bounds
, który musi być obiektemgoogle.maps.LatLngBounds
definiującym prostokątny obszar wyszukiwania lublocation
iradius
. Pierwszy obiekt przyjmuje obiektgoogle.maps.LatLng
, a drugi używa prostej liczby całkowitej, która odpowiada promieniowi okręgu w metrach. Maksymalny dozwolony promień to 50 000 metrów. GdyrankBy
ma wartośćDISTANCE
, musisz określić lokalizację, ale nie możesz określić promienia ani granic.keyword
, który będzie dopasowywany do wszystkich dostępnych pól, w tym m.in. nazwy, typu i adresu, a także do opinii klientów i innych treści firm zewnętrznych lubtype
, co ogranicza wyniki do miejsc pasujących do określonego typu. Można podać tylko jeden typ (jeśli podasz więcej niż jeden typ, wszystkie typy następujące po pierwszym wpisie są ignorowane). Zobacz listę obsługiwanych typów.
W ćwiczeniach z programowania będziesz używać bieżącej pozycji użytkownika jako lokalizacji wyszukiwania i rankingu wyników według odległości.
- Dodaj w komentarzu
TODO: Step 3B1
, aby napisać 2 funkcje wywołujące wyszukiwanie i obsługujące odpowiedź.
Słowo kluczowe sushi
jest używane jako wyszukiwane hasło, ale możesz je zmienić. Kod do zdefiniowania funkcji createMarkers
znajdziesz w następnej sekcji.
krok3/indeks.html
/* TODO: Step 3B1, Call the Places Nearby Search */
// Perform a Places Nearby Search Request
function getNearbyPlaces(position) {
let request = {
location: position,
rankBy: google.maps.places.RankBy.DISTANCE,
keyword: 'sushi'
};
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, nearbyCallback);
}
// Handle the results (up to 20) of the Nearby Search
function nearbyCallback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
createMarkers(results);
}
}
/* TODO: Step 3C, Generate markers for search results */
- Dodaj ten wiersz na końcu funkcji
initMap
w komentarzuTODO: Step 3B2
.
/* TODO: Step 3B2, Call the Places Nearby Search */
// Call Places Nearby Search on user's location
getNearbyPlaces(pos);
- Dodaj ten wiersz na końcu funkcji
handleLocationError
w komentarzuTODO: Step 3B3
.
/* TODO: Step 3B3, Call the Places Nearby Search */
// Call Places Nearby Search on the default location
getNearbyPlaces(pos);
C. Generowanie znaczników dla wyników wyszukiwania
Znacznik wskazuje lokalizację na mapie. Domyślnie znacznik używa standardowego obrazu. Więcej informacji o dostosowywaniu obrazów znaczników znajdziesz w sekcji Markery.
Konstruktor google.maps.Marker
pobiera pojedynczy literał obiektu Marker options
do określenia początkowych właściwości znacznika.
Te pola są szczególnie ważne i często są ustawiane podczas tworzenia znacznika:
position
(wymagany) – określaLatLng
początkową lokalizację znacznika.map
(opcjonalnie) określa mapę, na której ma zostać umieszczony znacznik. Jeśli nie określisz mapy podczas tworzenia znacznika, zostanie utworzony, ale nie będzie przypięty (lub nie będzie wyświetlany na mapie). Znacznik możesz dodać później, wywołując metodęsetMap()
.- Dodaj ten kod po komentarzu
TODO: Step 3C
, aby ustawić pozycję, mapę i tytuł dla jednego znacznika na miejsce zwrócone w odpowiedzi. Możesz też użyć metodyextend
zmiennejbounds
, by zagwarantować, że centrum i wszystkie znaczniki będą widoczne na mapie.
krok3/indeks.html
/* TODO: Step 3C, Generate markers for search results */
// Set markers at the location of each place result
function createMarkers(places) {
places.forEach(place => {
let marker = new google.maps.Marker({
position: place.geometry.location,
map: map,
title: place.name
});
/* TODO: Step 4B: Add click listeners to the markers */
// Adjust the map bounds to include the location of this marker
bounds.extend(place.geometry.location);
});
/* Once all the markers have been placed, adjust the bounds of the map to
* show all the markers within the visible area. */
map.fitBounds(bounds);
}
/* TODO: Step 4C: Show place details in an info window */
Testowanie
- Zapisz i odśwież stronę i kliknij Zezwól, aby przyznać geolokalizację.
Wokół centralnej lokalizacji na mapie powinno być widocznych do 20 czerwonych znaczników.
- Załaduj ponownie stronę i tym razem zablokuj uprawnienia do geolokalizacji.
Czy wyniki nadal pojawiają się w środkowej części mapy (przykładowo w Sydney w Australii)?
Pełny przykładowy kod
Pełny kod tego projektu jest do tej pory dostępny w GitHub.
5. Pokaż szczegóły miejsca na żądanie
Gdy będziesz już mieć identyfikator miejsca (wyświetlane jako jedno z pól w wynikach wyszukiwania w pobliżu), możesz poprosić o dodatkowe informacje na jego temat, takie jak pełny adres, numer telefonu oraz oceny i opinie użytkowników. Na potrzeby tych ćwiczeń utworzysz pasek boczny, na którym zobaczysz szczegółowe informacje o miejscu i włączysz interaktywne znaczniki, dzięki czemu użytkownik będzie mógł wybrać miejsca do wyświetlania szczegółów.
A. Utwórz ogólny pasek boczny
Miejsce jest potrzebne do wyświetlenia informacji o miejscu, dlatego w tym miejscu wystarczy prosty kod boczny, którego można użyć do wysunięcia i wyświetlenia szczegółów miejsca po kliknięciu znacznika użytkownika.
- Dodaj ten tag do tagu
style
po komentarzuTODO: Step 4A1
:
krok4/index.html
/* TODO: Step 4A1: Make a generic sidebar */
/* Styling for an info pane that slides out from the left.
* Hidden by default. */
#panel {
height: 100%;
width: null;
background-color: white;
position: fixed;
z-index: 1;
overflow-x: hidden;
transition: all .2s ease-out;
}
.open {
width: 250px;
}
/* Styling for place details */
.hero {
width: 100%;
height: auto;
max-height: 166px;
display: block;
}
.place,
p {
font-family: 'open sans', arial, sans-serif;
padding-left: 18px;
padding-right: 18px;
}
.details {
color: darkslategrey;
}
a {
text-decoration: none;
color: cadetblue;
}
- W sekcji
body
tuż przed tagiem divmap
dodaj element div dla panelu szczegółów.
<!-- TODO: Step 4A2: Add a generic sidebar -->
<!-- The slide-out panel for showing place details -->
<div id="panel"></div>
- W funkcji
initMap()
za komentarzemTODO: Step 4A3
zainicjuj zmiennąinfoPane
w ten sposób:
/* TODO: Step 4A3: Add a generic sidebar */
infoPane = document.getElementById('panel');
B. Dodaj detektory kliknięć do znaczników
- Do funkcji
createMarkers
dodaj odbiornik kliknięć podczas tworzenia każdego znacznika.
Detektor kliknięć pobiera informacje o miejscu powiązanym z tym znacznikiem i wywołuje tę funkcję, by je wyświetlić.
- Wklej ten kod w funkcji
createMarkers
w komentarzu z kodemTODO: Step 4B
.
Metoda showDetails
została zaimplementowana w następnej sekcji.
krok4/index.html
/* TODO: Step 4B: Add click listeners to the markers */
// Add click listener to each marker
google.maps.event.addListener(marker, 'click', () => {
let request = {
placeId: place.place_id,
fields: ['name', 'formatted_address', 'geometry', 'rating',
'website', 'photos']
};
/* Only fetch the details of a place when the user clicks on a marker.
* If we fetch the details for all place results as soon as we get
* the search response, we will hit API rate limits. */
service.getDetails(request, (placeResult, status) => {
showDetails(placeResult, marker, status)
});
});
W żądaniu addListener
właściwość placeId
określa 1 miejsce dla żądania informacji szczegółowych, a właściwość fields
to tablica nazw nazw informacji, które mają być zwracane na temat miejsca. Pełną listę pól, o które możesz poprosić, znajdziesz w interfejsie PlaceResult.
C. Pokaż szczegóły miejsca w oknie informacyjnym
Okno informacyjne wyświetla treść (zwykle tekst lub zdjęcia) w oknie dialogowym nad daną lokalizacją na mapie. Okno informacyjne ma obszar treści i zwężający się pień. Końcówka będących częścią konkretnej lokalizacji na mapie. Okna informacyjne są zwykle dołączane do znaczników, ale możesz je też dołączać do określonej szerokości i długości geograficznej.
- Dodaj podany poniżej komentarz do komentarza
TODO: Step 4C
, by utworzyćInfoWindow
z nazwą i oceną firmy oraz dołączyć to okno do znacznika.
Definicję showPanel
znajdziesz w następnej sekcji, aby wyświetlić szczegóły na pasku bocznym.
krok4/index.html
/* TODO: Step 4C: Show place details in an info window */
// Builds an InfoWindow to display details above the marker
function showDetails(placeResult, marker, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
let placeInfowindow = new google.maps.InfoWindow();
placeInfowindow.setContent('<div><strong>' + placeResult.name +
'</strong><br>' + 'Rating: ' + placeResult.rating + '</div>');
placeInfowindow.open(marker.map, marker);
currentInfoWindow.close();
currentInfoWindow = placeInfowindow;
showPanel(placeResult);
} else {
console.log('showDetails failed: ' + status);
}
}
/* TODO: Step 4D: Load place details in a sidebar */
D. Wczytywanie szczegółów miejsca na pasku bocznym
Wykorzystaj te same informacje, które zwraca obiekt PlaceResult
w celu zapełnienia innego elementu div. W tym przykładzie użyj infoPane
, czyli dowolnej nazwy zmiennej div o identyfikatorze „panel
".”. Za każdym razem, gdy użytkownik kliknie nowy znacznik, ten kod zamyka pasek boczny, a na pasku bocznym są usuwane nowe elementy.
- Dodaj ten komentarz po komentarzu:
TODO: Step 4D
.
krok4/index.html
/* TODO: Step 4D: Load place details in a sidebar */
// Displays place details in a sidebar
function showPanel(placeResult) {
// If infoPane is already open, close it
if (infoPane.classList.contains("open")) {
infoPane.classList.remove("open");
}
// Clear the previous details
while (infoPane.lastChild) {
infoPane.removeChild(infoPane.lastChild);
}
/* TODO: Step 4E: Display a Place Photo with the Place Details */
// Add place details with text formatting
let name = document.createElement('h1');
name.classList.add('place');
name.textContent = placeResult.name;
infoPane.appendChild(name);
if (placeResult.rating != null) {
let rating = document.createElement('p');
rating.classList.add('details');
rating.textContent = `Rating: ${placeResult.rating} \u272e`;
infoPane.appendChild(rating);
}
let address = document.createElement('p');
address.classList.add('details');
address.textContent = placeResult.formatted_address;
infoPane.appendChild(address);
if (placeResult.website) {
let websitePara = document.createElement('p');
let websiteLink = document.createElement('a');
let websiteUrl = document.createTextNode(placeResult.website);
websiteLink.appendChild(websiteUrl);
websiteLink.title = placeResult.website;
websiteLink.href = placeResult.website;
websitePara.appendChild(websiteLink);
infoPane.appendChild(websitePara);
}
// Open the infoPane
infoPane.classList.add("open");
}
E. Wyświetlanie zdjęcia miejsca ze szczegółowymi informacjami o nim
Wynik getDetails
wyświetla tablicę złożoną z maksymalnie 10 zdjęć powiązanych z obiektem placeId
. Tutaj na pasku bocznym wyświetla się pierwsze zdjęcie nad nazwą miejsca.
- Jeśli chcesz, aby zdjęcie było wyświetlane u góry paska bocznego, umieść kod przed utworzeniem elementu
name
.
krok4/index.html
/* TODO: Step 4E: Display a Place Photo with the Place Details */
// Add the primary photo, if there is one
if (placeResult.photos != null) {
let firstPhoto = placeResult.photos[0];
let photo = document.createElement('img');
photo.classList.add('hero');
photo.src = firstPhoto.getUrl();
infoPane.appendChild(photo);
}
Testowanie
- Zapisz i załaduj ponownie stronę w przeglądarce i zezwól na dostęp do geolokalizacji.
- Kliknij znacznik, aby wyświetlić wyskakujące okienko z informacjami, zawierające kilka szczegółów, i przesuń pasek boczny po lewej stronie, aby wyświetlić więcej szczegółów.
- Sprawdź, czy wyszukiwanie działa też po ponownym załadowaniu i odrzuceniu uprawnień geolokalizacji. Edytuj słowo kluczowe dla innego zapytania i sprawdź wyniki dla tego zapytania.
Pełny przykładowy kod
Pełny kod tego projektu jest do tej pory dostępny w GitHub.
6. Gratulacje
Gratulacje! Użyłeś wielu funkcji interfejsu Maps JavaScript API, w tym biblioteki Places
.
Omawiane zagadnienia
- Tworzenie mapy za pomocą klasy google.maps.Map
- Użycie przeglądarki użytkownika do geolokalizacji i wyświetlanie wyników na mapie
- dodawanie znaczników do mapy i reagowanie na zdarzenia kliknięć użytkowników,
- dodanie okien informacyjnych w celu wyświetlenia dodatkowych informacji po kliknięciu znacznika.
- wczytanie Biblioteki miejsc i wykonanie wyszukiwania w pobliżu.
- Pobieranie i wyświetlanie szczegółów miejsca oraz zdjęć miejsc
Więcej informacji
Aby dowiedzieć się więcej na temat map, zapoznaj się z dokumentacją interfejsu API JavaScript Map Google i dokumentacją Biblioteki miejsc. Zawierają one przewodniki, samouczki, informacje o interfejsie API, więcej przykładów kodu i kanały pomocy. Niektóre popularne funkcje to Importowanie danych do Map, Rozpocznij stylizowanie mapy i dodanie usługi Street View.
Jaki rodzaj ćwiczeń z programowania chcesz stworzyć w następnej kolejności?
Czy ćwiczeń z programowania nie ma na liście powyżej? Tutaj możesz poprosić o nowy problem.