Ta strona została przetłumaczona przez Cloud Translation API.

Tworzenie usługi wyszukiwania w pobliżu firmy za pomocą Google Maps Platform (JavaScript)

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:

Pobierz kod

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 folderze work/.

cd work

W katalogu work/ użyj edytora tekstu, aby utworzyć pusty plik o nazwie index.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  po tagu div map 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  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 obiektu LatLng 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ć obiektem google.maps.LatLngBounds definiującym prostokątny obszar wyszukiwania lub location i radius. Pierwszy obiekt przyjmuje obiekt google.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. Gdy rankBy 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 lub type, 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 komentarzu TODO: 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 komentarzu TODO: 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śla LatLng 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ć metody extend zmiennej bounds, 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.

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 komentarzu TODO: 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 div map 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 komentarzem TODO: 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 kodem TODO: 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 */

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&quot.”. 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?

Więcej przykładów korzystania z szczegółowych informacji o miejscach w Mapach

Więcej ćwiczeń z programowania za pomocą interfejsu Maps Platform JavaScript API

Więcej ćwiczeń z programowania dla Androida

Więcej ćwiczeń z programowania dla iOS

Wizualizacja danych opartych na lokalizacji na mapach

Niestandardowy styl map

Korzystanie ze Street View

Czy ćwiczeń z programowania nie ma na liście powyżej? Tutaj możesz poprosić o nowy problem.

Tworzenie usługi wyszukiwania w pobliżu firmy za pomocą Google Maps Platform (JavaScript)

1. Zanim zaczniesz

Wymagania wstępne

Pierwsze kroki z Google Maps Platform

Co chcesz zrobić

Czego potrzebujesz

Pobierz przykładowy kod

2. Tworzenie mapy z domyślnym środkiem

1. Tworzenie strony HTML

2. Dodawanie mapy

3. Wklej w kluczu interfejsu API

Testowanie

Pełny przykładowy kod

3. Geolokalizacja użytkownika

Co to jest geolokalizacja?

Wypróbuj

Testowanie

Pełny przykładowy kod

4. Wyszukiwanie miejsc w pobliżu

A. Wczytaj bibliotekę miejsc

B. Wywołaj funkcję Wyszukiwanie w pobliżu, aby poprosić o odpowiedź i ją przetworzyć

C. Generowanie znaczników dla wyników wyszukiwania

Testowanie

Pełny przykładowy kod

5. Pokaż szczegóły miejsca na żądanie

A. Utwórz ogólny pasek boczny

B. Dodaj detektory kliknięć do znaczników

C. Pokaż szczegóły miejsca w oknie informacyjnym

D. Wczytywanie szczegółów miejsca na pasku bocznym

E. Wyświetlanie zdjęcia miejsca ze szczegółowymi informacjami o nim

Testowanie

Pełny przykładowy kod

6. Gratulacje

Omawiane zagadnienia

Więcej informacji

Jaki rodzaj ćwiczeń z programowania chcesz stworzyć w następnej kolejności?