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

Dodawanie mapy do witryny (JavaScript)

1. Zanim zaczniesz

Dzięki nim dowiesz się wszystkiego, czego potrzebujesz, aby zacząć korzystać z Google Maps Platform w internecie. Poznasz wszystkie podstawowe zagadnienia: od konfiguracji po ładowanie interfejsu Maps JavaScript API, wyświetlanie pierwszej mapy, pracę ze znacznikami i ich grupowaniem, rysowanie na mapie i obsługę interakcji użytkowników.

Co stworzysz

Dzięki nim dowiesz się, jak stworzyć prostą aplikację internetową, która:

Wczytuje Maps JavaScript API
Wyświetla mapę wyśrodkowaną w Sydney w Australii
Wyświetla niestandardowe znaczniki popularnych atrakcji w Sydney
Implementuje grupowanie znaczników
Włącza interakcję użytkownika, która wyśrodkowuje ostatnio utworzony element i rysuje na mapie okrąg po kliknięciu znacznika

Czego się nauczysz

Pierwsze kroki z Google Maps Platform
Dynamiczne ładowanie interfejsu Maps JavaScript API z kodu JavaScript
Wczytuję mapę
Używanie znaczników, znaczników niestandardowych i grupowania znaczników
Współpraca z systemem zdarzeń interfejsu Maps JavaScript API w celu umożliwienia użytkownikom interakcji
Dynamiczne kontrolowanie mapy
Rysowanie na mapie

2. Wymagania wstępne

Aby ukończyć to ćwiczenia z programowania, musisz zapoznać się z poniższymi elementami. Jeśli już znasz Google Maps Platform, przejdź od razu do ćwiczenia z programowania.

Wymagane usługi Google Maps Platform

W ramach tego ćwiczenia będziesz używać tych usług Google Maps Platform:

Interfejs Maps JavaScript API
Biblioteka open source znaczników MarkerClustererPlus

Inne wymagania dotyczące ćwiczeń z programowania

Aby ukończyć ćwiczenia z programowania, potrzebne będą następujące konta, usługi i narzędzia:

konto Google Cloud Platform z włączonymi płatnościami,
Klucz interfejsu API Google Maps Platform z włączonym interfejsem Maps JavaScript API
Podstawowa wiedza o JavaScripcie, HTML i CSS
Plik Node.js zainstalowany na Twoim komputerze
Twój wybrany edytor tekstu lub IDE

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.

3. Konfiguracja

Konfigurowanie Google Maps Platform

Jeśli nie masz jeszcze konta Google Cloud Platform ani projektu z włączonymi płatnościami, przeczytaj przewodnik Pierwsze kroki z Google Maps Platform, by utworzyć konto rozliczeniowe i projekt.

W Cloud Console kliknij menu projektu i wybierz projekt, którego chcesz użyć w tym ćwiczeniu z programowania.

Włącz interfejsy API i pakiety SDK Google Maps Platform wymagane w ramach tego ćwiczenia z ćwiczeń w Google Cloud Marketplace. W tym celu wykonaj czynności opisane w tym filmie lub w tej dokumentacji.
Wygeneruj klucz interfejsu API na stronie Dane logowania w Cloud Console. Odpowiednie instrukcje znajdziesz w tym filmie lub w tej dokumentacji. Wszystkie żądania wysyłane do Google Maps Platform wymagają klucza interfejsu API.

Konfiguracja Node.js

Jeśli nie masz jeszcze środowiska Node.js, otwórz stronę https://nodejs.org/, aby je pobrać i zainstalować na komputerze.

Do środowiska Node.js dołączona jest menedżer pakietów npm, który musisz zainstalować w zależności od tego ćwiczenia z programowania.

Konfiguracja szablonu startowego projektu

Zanim rozpoczniesz to ćwiczenie programowania, wykonaj te czynności, by pobrać szablon projektu startowego oraz pełny kod rozwiązania:

Pobierz lub utwórz rozwidlenie repozytorium GitHub dla tego ćwiczenia z programowania na https://github.com/googlecodelabs/maps-platform-101-js.

Projekt początkowy znajduje się w katalogu /starter i obejmuje podstawową strukturę pliku potrzebną do ukończenia ćwiczeń z programowania. Wszystkie potrzebne informacje znajdziesz w katalogu /starter/src. 2. Po pobraniu projektu początkowego uruchom npm install w katalogu /starter. Spowoduje to zainstalowanie wszystkich wymaganych zależności wymienionych w narzędziu package.json. 3. Po zainstalowaniu zależności uruchom npm start w katalogu.

Projekt startowy został skonfigurowany tak, aby użytkownicy mogli korzystać z Webpack-dev-server, który kompiluje kod i uruchamia go lokalnie. Komponent webpack-dev-server automatycznie ładuje też Twoją aplikację w przeglądarce za każdym razem, gdy zmieniasz kod.

Jeśli chcesz zobaczyć pełny kod rozwiązania, możesz wykonać opisane powyżej czynności konfiguracyjne w katalogu /solution.

4. Wczytaj interfejs JavaScript JavaScript Map Google

Zanim zaczniesz, wykonaj czynności opisane w artykule Konfiguracja. Wszystko gotowe? Czas stworzyć pierwszą aplikację internetową przy użyciu Google Maps Platform.

Podstawą korzystania z Google Maps Platform w internecie jest Maps JavaScript API. Ten interfejs API udostępnia interfejs JavaScript do korzystania ze wszystkich funkcji Google Maps Platform, w tym mapy, znaczników, narzędzi do rysowania i innych usług Google Maps Platform, takich jak Miejsca.

Jeśli masz doświadczenie w korzystaniu z interfejsu Maps JavaScript API, być może wiesz, że można go załadować, wstawiając tag script do pliku HTML w ten sposób:

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

To nadal bardzo prawidłowy sposób wczytywania interfejsu API, ale w nowoczesnych zależnościach JavaScript jest zwykle uwzględniany w kodzie. Aby wykonać powyższy kod tagu script z kodu, użyj modułu@googlemaps/js-api-loader. Ładunek API JS jest już dołączony do pliku package.json projektu, więc został zainstalowany, gdy uruchomiono npm install wcześniej.

Aby użyć narzędzia JS API Loader, wykonaj te czynności:

Otwórz aplikację /src/app.js. W tym pliku wykonasz wszystkie ćwiczenia z programowania.
Zaimportuj klasę Loader z @googlemaps/js-api-loader.

U góry strony app.js dodaj te elementy:
```
 import { Loader } from '@googlemaps/js-api-loader';
```
Utwórz obiekt apiOptions.

Klasa Loader wymaga obiektu JSON, który określa różne opcje wczytywania interfejsu API JavaScript Map Google, w tym klucza interfejsu API Google Maps Platform, wersji interfejsu API, którą chcesz wczytać, oraz wszelkich dodatkowych bibliotek dostarczonych przez interfejs Maps JS API, który chcesz wczytać. Na potrzeby tego ćwiczenia z programowania wystarczy określić klucz interfejsu API, dodając do app.js ten ciąg:
```
 const apiOptions = {
   apiKey: "YOUR API KEY"
 }
```
Utwórz wystąpienie Loader i przekaż go apiOptions.
```
 const loader = new Loader(apiOptions);
```
Wczytaj interfejs API JS Map.

Aby wczytać interfejs API, wywołaj metodę load() w instancji Loader. Ładunek API JS zwraca obietnicę, która jest rozstrzygana po wczytaniu interfejsu API i przygotowaniu do użycia. Dodaj tę aplikację, by wczytać interfejs API i spełnić obietnicę:
```
 loader.load().then(() => {
   console.log('Maps JS API loaded');
 });
```

Jeśli wszystko się powiedzie, w przeglądarce zobaczysz instrukcję console.log:

Podsumowując: interfejs JavaScript JavaScript Map Google został wczytany dynamicznie z kodu i zdefiniowany funkcja wywołania zwrotnego, która jest uruchamiana po zakończeniu ładowania interfejsu Maps JavaScript API.

Twój plik app.js powinien wyglądać mniej więcej tak:

    import { Loader } from '@googlemaps/js-api-loader';

    const apiOptions = {
      apiKey: "YOUR API KEY"
    }

    const loader = new Loader(apiOptions);

    loader.then(() => {
      console.log('Maps JS API Loaded');
    });

Po załadowaniu interfejsu Maps JavaScript API załadujesz mapę w następnym kroku.

5. Wyświetlanie mapy

Czas wyświetlić swoją pierwszą mapę!

Interfejs API JavaScript Map jest najczęściej używany przez google.maps.Map. Jest to klasa, która umożliwia tworzenie instancji i manipulowanie nimi. Zobacz, jak to robią, tworząc nową funkcję o nazwie displayMap().

Określ ustawienia mapy.

Interfejs API JavaScript Map Google obsługuje różne ustawienia mapy, wymagane są jednak tylko dwa:
- center: określa szerokość i długość geograficzną na środku mapy.
- zoom: ustawia początkowy poziom powiększenia mapy.
Użyj poniższego kodu, aby wyśrodkować mapę w Sydney, i nadaj jej powiększenie 14 – to odpowiedni poziom powiększenia, aby pokazać centrum miasta.
```
 function displayMap() {
   const mapOptions = {
     center: { lat: -33.860664, lng: 151.208138 },
     zoom: 14
   };
 }
```
Pobierz div, w którym należy wstrzyknąć mapę do modelu DOM.

Zanim będzie można wyświetlić mapę, musisz określić interfejs Maps JavaScript API, w którym miejscu ma się ona wyświetlać na stronie. Jeśli przyjrzysz się danym w narzędziu index.html, zobaczysz, że zawiera on już tag div:
```
 <div id="map"></div>
```
Aby poinformować interfejs Maps JavaScript API o tym, gdzie należy wstrzykiwać mapę, użyj atrybutu document.getElementById, by uzyskać odniesienie do DOM:
```
 const mapDiv = document.getElementById('map');
```
Utwórz instancję google.maps.Map.

Aby poprosić o interfejs API Maps JavaScript API o utworzenie nowej mapy, którą można wyświetlać, utwórz instancję google.maps.Map i przekaż mapDiv i mapOptions. Zwrócisz też instancję Map z tej funkcji, aby móc z niej zrobić więcej:
```
 const map = new google.maps.Map(mapDiv, mapOptions);
 return map;
```
Wyświetl mapę

Po zdefiniowaniu całej logiki utworzenia instancji mapy wystarczy wywołać displayMap() z obiektu obsługi JS API, który będzie wywoływany po wczytaniu interfejsu Maps JavaScript API:
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
 });
```

W przeglądarce powinna pojawić się piękna mapa Sydney:

fb0cd6bc38532780

Podsumowując: w tym kroku określono opcje wyświetlania mapy, utworzono nową instancję mapy i wstrzyknięto je do modelu DOM.

Twoja funkcja displayMap() powinna wyglądać mniej więcej tak:

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14
  };
  const mapDiv = document.getElementById('map');
  const map = new google.maps.Map(mapDiv, mapOptions);
  return map;
}

6. definiowanie stylów map w Google Cloud (opcjonalne)

Możesz dostosować styl mapy, korzystając ze stylu mapy w Google Cloud.

Utwórz identyfikator mapy

Jeśli nie masz jeszcze identyfikatora, ale nie jest on jeszcze powiązany ze stylem mapy, zapoznaj się z przewodnikiem po identyfikatorach map, by wykonać te czynności:

Utwórz identyfikator mapy.
Powiąż identyfikator mapy ze stylem mapy.

Dodawanie identyfikatora mapy do aplikacji

Aby użyć utworzonego identyfikatora mapy, zmień funkcję displayMap w pliku app.js i przekaż identyfikator mapy we właściwości mapId obiektu mapOptions.

app.js,

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14,
    mapId: 'YOUR_MAP_ID'
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}

Po wykonaniu tych czynności na mapie powinien się wyświetlać wybrany przez Ciebie styl.

7. Dodawanie znaczników do mapy

Interfejs API JavaScript Map Google oferuje wiele rzeczy do wykonania, ale najpopularniejsze są umieszczanie znaczników na mapie. Znaczniki umożliwiają pokazywanie określonych punktów na mapie i są często używanym elementem interfejsu do obsługiwania użytkowników. Jeśli korzystałeś już z Map Google, prawdopodobnie znasz domyślny znacznik, który wygląda tak:

W tym kroku użyjesz znaczników google.maps.Marker, aby umieścić znaczniki na mapie.

Zdefiniuj obiekt na potrzeby lokalizacji znaczników.

Aby rozpocząć, utwórz nową funkcję addMarkers() i zadeklaruj obiekt locations zawierający poniższe atrybuty szerokości i długości geograficznej dla popularnych atrakcji turystycznych w Sydney.

Pamiętaj też, że musisz przekazać do instancji instancję Map. Użyjesz jej później podczas tworzenia instancji znaczników.

 function addMarkers(map) {
   const locations = {
     operaHouse: { lat: -33.8567844, lng: 151.213108 },
     tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
     manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
     hyderPark: { lat: -33.8690081, lng: 151.2052393 },
     theRocks: { lat: -33.8587568, lng: 151.2058246 },
     circularQuay: { lat: -33.858761, lng: 151.2055688 },
     harbourBridge: { lat: -33.852228, lng: 151.2038374 },
     kingsCross: { lat: -33.8737375, lng: 151.222569 },
     botanicGardens: { lat: -33.864167, lng: 151.216387 },
     museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
     maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
     kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
     aquarium: { lat: -33.869627, lng: 151.202146 },
     darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
     barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
   }
 }

Utwórz wystąpienie google.maps.Marker dla każdego znacznika, który chcesz wyświetlić.

Aby utworzyć znaczniki, użyj poniższego kodu iteracyjnego w obiekcie locations za pomocą pętli for...in, określ zestaw opcji renderowania każdego znacznika i utwórz wystąpienie google.maps.Marker dla każdej lokalizacji.

Zwróć uwagę na właściwość icon elementu markerOptions. Pamiętasz domyślny pinezkę mapy? Czy wiesz, że możesz także przypiąć pinezkę, aby ustawić dowolny obraz? No cóż, możesz.

Właściwość icon umożliwia podanie ścieżki do dowolnego pliku obrazu, którego chcesz użyć jako znacznika niestandardowego. Jeśli ćwiczenia zostały rozpoczęte za pomocą naszego szablonu, to zdjęcie zawiera już dla Ciebie /src/images.

Zwróć też uwagę, że musisz przechowywać instancje znaczników w tablicy i zwrócić je z funkcji, aby użyć ich później.
```
 const markers = [];
 for (const location in locations) {
   const markerOptions = {
     map: map,
     position: locations[location],
     icon: './img/custom_pin.png'
   }
   const marker = new google.maps.Marker(markerOptions);
   markers.push(marker);
 }
 return markers;
```
Wyświetl znaczniki.

Interfejs API JavaScript Map Google automatycznie tworzy i wyświetla znacznik po każdym utworzeniu nowego wystąpienia obiektu google.maps.Marker, więc wystarczy, że zaktualizujesz moduł obsługi obietnicy JS API, wywołujący addMarkers() i przekażesz go do wystąpienia Map:
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
 });
```

Na mapie powinny być widoczne znaczniki niestandardowe:

Podsumowując, w tym kroku zdefiniowano zestaw lokalizacji znaczników i utworzyć wystąpienie google.maps.Marker z niestandardową ikoną znacznika dla każdej lokalizacji.

Twoja funkcja addMarkers() powinna wyglądać mniej więcej tak:

    function addMarkers(map) {
      const locations = {
        operaHouse: { lat: -33.8567844, lng: 151.213108 },
        tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
        manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
        hyderPark: { lat: -33.8690081, lng: 151.2052393 },
        theRocks: { lat: -33.8587568, lng: 151.2058246 },
        circularQuay: { lat: -33.858761, lng: 151.2055688 },
        harbourBridge: { lat: -33.852228, lng: 151.2038374 },
        kingsCross: { lat: -33.8737375, lng: 151.222569 },
        botanicGardens: { lat: -33.864167, lng: 151.216387 },
        museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
        maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
        kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
        aquarium: { lat: -33.869627, lng: 151.202146 },
        darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
        barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
      }
      const markers = [];
      for (const location in locations) {
        const markerOptions = {
          map: map,
          position: locations[location],
          icon: './img/custom_pin.png'
        }
        const marker = new google.maps.Marker(markerOptions);
        markers.push(marker);
      }
      return markers;
    }

W następnym kroku dowiesz się, jak poprawić widoczność znaczników za pomocą klastrów.

8. Włącz klastry znaczników

Jeśli wiele znaczników jest w zbyt blisko siebie, może wystąpić problem, który polega na tym, że znaczniki się nakładają albo są za bardzo zatłoczone, co źle wpływa na wygodę użytkowników. Na przykład po utworzeniu znaczników w ostatnim kroku możesz zauważyć, że:

Tu zaczyna się grupowanie znaczników. Kolejnym często stosowaną funkcją funkcji grupowania znaczników jest grupowanie pobliskich znaczników w jedną ikonę, która zmienia się w zależności od poziomu powiększenia, w ten sposób:

Algorytm grupowania znaczników dzieli widoczny obszar mapy na siatkę, a następnie grupuje ikony w tej samej komórce. Na szczęście nie musisz się tym przejmować, ponieważ zespół Google Maps Platform stworzył przydatną bibliotekę na licencji open-source o nazwie MarkerClustererPlus, która robi to automatycznie. Możesz wyświetlić źródło źródła MarkerClustererPluson GitHub.

Zaimportuj MarkerCluster.

W projekcie szablonu tego ćwiczenia z biblioteki MarkerClustererPlus biblioteka narzędzi została już uwzględniona w zależnościach podanych w pliku package.json, więc została ona już zainstalowana, gdy na początku tego ćwiczenia uruchomiono npm install.

Aby zaimportować bibliotekę, u góry pliku app.js dodaj te elementy:
```
 import MarkerClusterer from '@google/markerclustererplus';
```
Utwórz nową instancję instancji MarkerClusterer.

Aby utworzyć klastry znaczników, musisz zrobić 2 rzeczy: podać ikony, których chcesz używać z grupami znaczników, i utworzyć nowe wystąpienie typu MarkerClusterer.

Najpierw zadeklaruj obiekt, który określa ścieżkę do ikon, których chcesz użyć. W projekcie szablonu jest już zestaw obrazów zapisanych w usłudze ./img/m. Nazwy plików graficznych są numerowane po kolei z tym samym prefiksem: m1.png, m2.png, m3.png itd.

Aby ustawić właściwość imagePath w opcjach klastra znaczników, wystarczy podać ścieżkę i prefiks pliku, a klaster znaczników automatycznie użyje wszystkich plików z tym prefiksem i doda liczbę na końcu.

Po drugie utwórz nową instancję MarkerClusterer i przekaż jej wystąpienie Map, w którym mają być wyświetlane klastry znaczników, i tablicę Marker wystąpień, które chcesz umieścić w klastrze.
```
 function clusterMarkers(map, markers) {
   const clustererOptions = { imagePath: './img/m' }
   const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
 }
```
Wyświetl klastry znaczników.

Wywołaj clusterMarkers() z modułu obsługi obietnicy JS API. Klastry znaczników są automatycznie dodawane do mapy podczas tworzenia wystąpienia MarkerClusterer w wywołaniu funkcji.
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
 });
```

Na mapie powinny się wyświetlić kilka klastrów znaczników.

Gdy powiększysz lub pomniejszysz widok, MarkerClustererPlus automatycznie zmieni liczbę klastrów i zmieni ich rozmiar. Możesz też kliknąć ikonę grupy znaczników, aby powiększyć i zobaczyć wszystkie znaczniki w tym klastrze.

Podsumowując: w tym kroku zaimportowaliśmy bibliotekę open source MarkerClustererPlus i użyliśmy jej do utworzenia wystąpienia MarkerClusterer, który automatycznie grupuje znaczniki utworzone w poprzednim kroku.

Twoja funkcja clusterMarkers() powinna wyglądać mniej więcej tak:

    function clusterMarkers(map, markers) {
      const clustererOptions = { imagePath: './img/m' }
      const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
    }

Teraz dowiesz się, jak obsługiwać interakcje użytkowników.

9. Dodaj interakcję użytkownika

Teraz masz wspaniałą mapę z niektórymi z najpopularniejszych celów turystycznych w Sydney. W tym kroku konieczne będzie dodatkowe zarządzanie interakcjami użytkowników za pomocą systemu zdarzeń interfejsu Maps JavaScript API, aby jeszcze bardziej zwiększyć wygodę użytkowników Twojej mapy.

Maps JavaScript API to kompleksowy system zdarzeń, który wykorzystuje moduły obsługi zdarzeń JavaScript do obsługi różnych interakcji użytkowników w kodzie. Na przykład możesz utworzyć odbiorniki, by uruchamiać wykonywanie kodu w przypadku takich interakcji użytkownika jak kliknięcie mapy i znaczników, przesunięcie widoku mapy, powiększenie lub pomniejszenie obrazu.

W tym kroku dodasz do swoich detektorów detektor kliknięć, a następnie w sposób zautomatyzowany przesuwasz mapę tak, aby znacznik kliknął użytkownik na środku mapy.

Ustaw detektor kliknięć na swoich znacznikach.

Wszystkie obiekty w interfejsie Maps JavaScript API, które obsługują system zdarzeń, obsługują standardowy zestaw funkcji do obsługi użytkowników, takich jak addListener, removeListener i inne.

Aby do każdego znacznika dodać detektor zdarzeń kliknięcia, powtarzaj tablicę markers i wywołuj metodę addListener w instancji znacznika, aby dołączyć detektor zdarzenia click:
```
 function addPanToMarker(map, markers) {
   markers.map(marker => {
     marker.addListener('click', event => {

     });
   });
 }
```
Przesuń do znacznika po jego kliknięciu.

Zdarzenie click jest wywoływane za każdym razem, gdy użytkownik kliknie znacznik, i zwróci zdarzenie jako obiekt JSON z informacjami o klikniętym elemencie interfejsu. Aby zwiększyć komfort korzystania z mapy, możesz użyć zdarzenia click i użyć jego obiektu LatLng, aby uzyskać szerokość i długość geograficzną klikniętego znacznika.

Gdy już to zrobisz, przekaż te dane do wbudowanej funkcji Map o nazwie panTo(), aby mapa mogła płynnie przesuwać się do klikniętego znacznika po dodaniu do wywołania zwrotnego modułu obsługi zdarzeń:
```
 const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
 map.panTo(location);
```

Przypisz detektory kliknięć.

Wywołaj addPanToMarker() z modułu obsługi obietnicy JS API i przekaż go wraz z mapą i znacznikami, by wykonać kod i przypisać detektory kliknięć.

 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
   addPanToMarker(map, markers);
 });

Otwórz przeglądarkę i kliknij znaczniki. Powinna pojawić się mapa z możliwością automatycznego przesuwania po kliknięciu znacznika.

Podsumowując: w tym kroku użyto systemu zdarzeń interfejsu Maps JavaScript API, by przypisać detektor kliknięć do wszystkich znaczników na mapie, pobrać szerokość i długość znacznika z uruchomionego zdarzenia kliknięcia i użyć go do ponownego utworzenia mapy po każdym kliknięciu znacznika.

Twoja funkcja addPanToMarker() powinna wyglądać mniej więcej tak:

    function addPanToMarker(map, markers) {
      markers = markers.map(marker => {
        marker.addListener('click', event => {
          const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
          map.panTo(location);
        });
      });
      return markers;
    }

Zostało tylko jeden krok! Kolejny krok to poprawa wygody korzystania z mapy za pomocą funkcji rysowania interfejsu Maps JavaScript API.

10. Rysuj na mapie

Do tej pory udało Ci się utworzyć mapę Sydney, która pokazuje znaczniki popularnych miejsc turystycznych i obsługuje interakcję użytkowników. W ostatnim kroku ćwiczenia wykonaj opisane w nim funkcje, aby dodać więcej funkcji do mapy.

Wyobraź sobie, że z tej mapy będą korzystać użytkownicy, którzy chcą poznać miasto Sydney. Przydatną funkcją jest wizualizacja promienia po kliknięciu znacznika. Dzięki temu użytkownik będzie mógł łatwo zrozumieć, jakie inne miejsca docelowe znajdują się w określonej odległości od klikniętego znacznika.

Interfejs API JavaScript Map Google zawiera zestaw funkcji do rysowania kształtów na mapie, takich jak kwadraty, wielokąty, linie i okręgi. Następnie wyrenderuj okrąg, aby po kliknięciu znacznika był widoczny promień 800 m (około pół mili).

Narysuj okrąg z: google.maps.Circle.

Funkcje rysowania w interfejsie Maps JavaScript API zapewniają szeroki wybór sposobów wyświetlania obiektu na mapie. Aby wyrenderować promień okrągły, zadeklaruj zestaw opcji dotyczących okręgu (np. kolor, wagę kreski), wyśrodkowanie okręgu i jego promienia, a potem utwórz nowe wystąpienie google.maps.Circle, aby utworzyć nowy okrąg:
```
 function drawCircle(map, location) {
   const circleOptions = {
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 1,
     map: map,
     center: location,
     radius: 800
   }
   const circle = new google.maps.Circle(circleOptions);
   return circle;
 }
```
Narysuj okrąg po kliknięciu znacznika.

Aby narysować okrąg, gdy użytkownik kliknie znacznik, wystarczy wywołać powyższą funkcję drawCircle() z wywołania zwrotnego detektora kliknięć w addPanToMarker() i przekazać mu mapę oraz lokalizację znacznika.

Zwróć uwagę, że dodano też instrukcję warunkową wywołującą circle.setMap(null). Spowoduje to usunięcie wcześniej wyrenderowanego okręgu z mapy, jeśli użytkownik kliknie inny znacznik, dzięki czemu nie będzie on wyświetlał się w formie okręgów podczas przeglądania mapy przez użytkownika.

Funkcja addPanToMarker() powinna wyglądać mniej więcej tak:
```
 function addPanToMarker(map, markers) {
   let circle;
   markers.map(marker => {
     marker.addListener('click', event => {
       const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
       map.panTo(location);
       if (circle) {
         circle.setMap(null);
       }
       circle = drawCircle(map, location);
     });
   });
 }
```

Wszystko gotowe Przejdź do przeglądarki i kliknij jeden ze znaczników. Wokół niego powinien być widoczny promień:

11. Gratulacje

Udało Ci się stworzyć pierwszą aplikację internetową za pomocą Google Maps Platform, w tym wczytać interfejs API JavaScript Map Google, wczytać mapę, pracować ze znacznikami, sterować i rysować na mapie oraz dodawać interakcje użytkowników.

Aby zobaczyć ukończony kod, sprawdź ukończony projekt w katalogu /solutions.

Co dalej?

Podczas tych ćwiczeń omówiliśmy podstawowe funkcje interfejsu Maps JavaScript API. Następnie spróbuj dodać do mapy niektóre z tych obiektów:

Zmień typ mapy, by wyświetlać mapy satelitarne, hybrydowe i ukształtowanie terenu.
Włącz lokalizację, aby wczytywać mapę w różnych językach.
Dostosuj inne interakcje użytkownika, np. powiększanie i kontrolowanie mapy.
Dodaj okna informacyjne, by wyświetlić informacje po kliknięciu znaczników.
Sprawdź dodatkowe biblioteki dostępne w interfejsie Maps JavaScript API, które dają dostęp do dodatkowych funkcji, takich jak Miejsca, Rysowanie i Wizualizacja.

Aby dowiedzieć się więcej na temat sposobów korzystania z Google Maps Platform w internecie, kliknij te linki: