Начало работы с Картами Google: пошаговое руководство

Платформа Google Maps — это мощная и самая популярная платформа картографических сервисов, которая позволяет разработчикам встраивать карты в мобильные приложения и веб-страницы.
В этом уроке мы изучим основы использования Google Maps.

Обязательное условие -

Включите Maps JavaScript API в своей библиотеке Google Cloud Platform.
В разделе API и службы › Учетные данные создайте ограниченный ключ с разрешением для Maps JavaScript API.

Создание простой карты

Давайте создадим карту с помощью платформы Google Maps.
В этом примере мы будем использовать JavaScript API платформы Google Maps.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <style>
      #map {
        
        height: 100%;
      }
      html,
      body {
          height: 100%;
      }
    </style>
  </head>
  <body>
    
    <div id="map"></div>

    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_PLATFORM_KEY_HERE&callback=initMap&v=weekly"
      defer
    ></script>
    
    <script>
        function initMap() {

          var map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: 48.13641, lng: 11.57754 },
            zoom: 5,
            fullscreenControl: false,
            streetViewControl: false,
            mapId: "DEMO_MAP_ID",
          });       
        }

    </script>
  </body>
</html>

Добавление значков маркеров

Теперь, когда базовая карта настроена,
давайте добавим на нашу карту несколько маркеров с событиями щелчка.
Мы скажем «Привет» на местном языке.

В этом случае мы будем использовать классы Marker и InfoWindow платформы Google Maps.

var londonMarker = new google.maps.Marker({
    position: {lat:51.50136, lng:-0.14191},
    map: map
});

londonMarker.addListener("click", () => {
  map.setCenter(londonMarker.getPosition());

  var infowindow = new google.maps.InfoWindow({
    content: "<div><p>Hello!</p></div>"
  });

  infowindow.open(map, londonMarker);
});


var italianMarker = new google.maps.Marker({
  position: {lat:41.88989, lng:12.49337},
  map: map
});

italianMarker.addListener("click", () => {
  map.setCenter(italianMarker.getPosition());

  var infowindow = new google.maps.InfoWindow({
    content: "<div><p>Ciao!</p></div>"
  });

  infowindow.open(map, italianMarker);
});


var netherlandsMarker = new google.maps.Marker({
  position: {lat:52.2277, lng:6.89701},
  map: map
});

netherlandsMarker.addListener("click", () => {
  map.setCenter(netherlandsMarker.getPosition());

  var infowindow = new google.maps.InfoWindow({
    content: "<div><p>Hallo!</p></div>"
  });

  infowindow.open(map, netherlandsMarker);
});

Отображение маршрута между двумя маркерами

Для отображения маршрута между двумя маркерами на карте вы можете использовать API службы маршрутов.

Мы используем класс DirectionsService и его метод маршрута.
Например, чтобы рассчитать самый быстрый автомобильный маршрут между Берлином и Францией и отобразить его на карте.

вот как мы можем этого добиться:

var directionsService = new google.maps.DirectionsService;

directionsService.route({
  origin: {lat: 52.51628, lng: 13.3777},
  destination: {lat: 48.85824, lng: 2.2945},
  travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
  if (status === 'OK') {
      var directionsRenderer = new google.maps.DirectionsRenderer({
          suppressMarkers: true
      });

      directionsRenderer.setDirections(result);

      var leg = result.routes[0].legs[0];

      new google.maps.Marker({
          position: {lat: 52.51628, lng: 13.3777},
          map: map
      });

      new google.maps.Marker({
          position: {lat: 48.85824, lng: 2.2945},
          map: map
      });

      directionsRenderer.setMap(map);
  } else {
      window.alert('Directions request failed due to ' + status);
  }
});

Создание простого кластера с помощью AdvancedMarkerElement

Кластеры полезны для группировки нескольких маркеров, расположенных близко друг к другу на карте.
Давайте создадим простой кластер, используя класс AdvancedMarkerElement.
При увеличении масштаба кластера маркеры начнут появляться

Для этого варианта использования нам понадобится импортировать скрипт markerclusterer.

<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

Нам также потребуется добавить свойство mapId при создании объекта карты:

var map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 48.13641, lng: 11.57754 },
    zoom: 5,
    fullscreenControl: false,
    streetViewControl: false,
    mapId: "DEMO_MAP_ID",
});

И код создания кластера и маркеров под ним —

const locations = [
  {lat: 48.18485, lng: 16.31224},
  {lat: 48.20871, lng: 16.37265},
  {lat: 48.20681, lng: 16.36683}
]

const markers = locations.map((position, i) => {
  const marker = new google.maps.marker.AdvancedMarkerElement({
      position
  });

  return marker;
});

new markerClusterer.MarkerClusterer({ markers, map });

Наконец, давайте соберем весь код воедино —

<!DOCTYPE html>
<html>
  <head>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_PLATFORM_KEY_HERE&callback=initMap"></script>
    <style>
      #map {
        height: 100%;
      }
      html,
      body {
          height: 100%;
      }
    </style>
  </head>
  <body>
    
    <div id="map"></div>

    <script>

        async function initMap() {

            const { AdvancedMarkerElement } = await google.maps.importLibrary(
                "marker",
            );

            var map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 48.13641, lng: 11.57754 },
                zoom: 5,
                fullscreenControl: false,
                streetViewControl: false,
                mapId: "DEMO_MAP_ID",
            });

            
            var londonMarker = new google.maps.Marker({
                position: {lat:51.50136, lng:-0.14191},
                map: map
            });

            londonMarker.addListener("click", () => {
                map.setCenter(londonMarker.getPosition());

                var infowindow = new google.maps.InfoWindow({
                  content: "<div><p>Hello!</p></div>"
                });

                infowindow.open(map, londonMarker);
            });


            var italianMarker = new google.maps.Marker({
                position: {lat:41.88989, lng:12.49337},
                map: map
            });

            italianMarker.addListener("click", () => {
                map.setCenter(italianMarker.getPosition());

                var infowindow = new google.maps.InfoWindow({
                  content: "<div><p>Ciao!</p></div>"
                });

                infowindow.open(map, italianMarker);
            });



            var netherlandsMarker = new google.maps.Marker({
                position: {lat:52.2277, lng:6.89701},
                map: map
            });

            netherlandsMarker.addListener("click", () => {
                map.setCenter(netherlandsMarker.getPosition());

                var infowindow = new google.maps.InfoWindow({
                  content: "<div><p>Hallo!</p></div>"
                });

                infowindow.open(map, netherlandsMarker);
            });
            
            
            var directionsService = new google.maps.DirectionsService;

            directionsService.route({
                origin: {lat: 52.51628, lng: 13.3777},
                destination: {lat: 48.85824, lng: 2.2945},
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            }, function(result, status) {
                if (status === 'OK') {
                    var directionsRenderer = new google.maps.DirectionsRenderer({
                        suppressMarkers: true
                    });

                    directionsRenderer.setDirections(result);

                    var leg = result.routes[0].legs[0];

                    new google.maps.Marker({
                        position: {lat: 52.51628, lng: 13.3777},
                        map: map
                    });

                    new google.maps.Marker({
                        position: {lat: 48.85824, lng: 2.2945},
                        map: map
                    });

                    directionsRenderer.setMap(map);
                } else {
                    window.alert('Directions request failed due to ' + status);
                }
            });

            const locations = [
                {lat: 48.18485, lng: 16.31224},
                {lat: 48.20871, lng: 16.37265},
                {lat: 48.20681, lng: 16.36683}
            ]

            const markers = locations.map((position, i) => {
                const marker = new google.maps.marker.AdvancedMarkerElement({
                    position
                });

                return marker;
            });

            new markerClusterer.MarkerClusterer({ markers, map });
        }

    </script>

  </body>
</html>

Поздравляем! Ваша настроенная карта Google должна выглядеть следующим образом: