Создание интерактивной карты Google с маркерами адресов

Сегодня разберем как сделать google map со списком адресов. Важная особенность заключается в том, что при клике на какой-либо из адресов, в центре карты должен отобразиться маркер с этим адресом.

Полностью готовый и рабочий вариант можно увидеть здесь: https://codepen.io/jecosjmecos/pen/rNRgrgg

А в самой статье уже разберем работу поэтапно.

1) Стили

Задаем размеры карты на странице

<style>
  #map {
    height: 400px;
    width: 100%;
  }
</style>

2) Разметка списка с адресами

Обертка со списком должна иметь id=’address’

<ul id="address">
  <li>
    <a href="#"
       data-lat="51.52997244138653"
       data-lng="-0.1721165694782623">
      <span class="address">
        St John's Wood Rd, London NW8 8QN, Great Britain
      </span>
      <span class="link">Directions</span>
    </a>
 </li>

  <li>
    <a href="#"
       data-lat="13.731994255241341"
       data-lng="100.54166799585914">
      <span class="address">
        Lumphini, Pathum Wan, Bangkok 10330, Thailand
      </span>
      <span class="link">Directions</span>
    </a>
  </li>

  <li>
    <a href="#"
       data-lat="35.72016405570121"
       data-lng="139.76076052276977">
      <span class="address">
        1 Chome-28-9 Nezu, Bunkyo City, Tokyo 113-0031, Japan
      </span>
      <span class="link">Directions</span>
    </a>
  </li>
</ul>

Важный момент! Ссылка (тег <a>) имеет два атрибута: data-lat и data-lng . В этих атрибутах мы используем координаты, которые потом будут отображаться на карте.

Чтобы их получить, достаточно на открытой google карте кликнуть правой кнопкой мыши на точку, после чего будет доступно окно с опциям, первым пунктом которого являются координаты.

3) Область с картой

Добавляем элемент с id=’map’. Содержимое блока будет заполнено картой

<div id="map"></div>

4) Основной скрипт

Данный скрипт:

• Считывает координаты адресов в нашем списке
• Добавляет маркеры этих адресов на карту
• При клике на один из адресов отображает его в центре карты

Чтобы скрипт работал, нужно в консоли google создать api key и вставить его в ссылке вместо YOUR_API_KEY в script.src в функции initMap(). Как создать ключ можно посмотреть здесь: https://developers.google.com/maps/documentation/embed/get-api-key

<script>
  document.addEventListener('DOMContentLoaded', async function(){

      const mapList = document.querySelectorAll('#address li a');

      if(mapList.length){
          await initMap(mapList);

          mapList.forEach((item) => {

              item.addEventListener('click', function(e){
                  e.preventDefault();

                  addMarker(+this.dataset.lat, +this.dataset.lng);
              });

          });
      }
  });

  async function initMap(coordinates) {
      return new Promise((resolve, reject) => {
          const script = document.createElement('script');
          script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMapCallback`;
          script.defer = true;
          script.async = true;
          window.initMapCallback = function() {
              const map = new google.maps.Map(document.getElementById("map"), {
                  center: { lat: -10.397, lng: 155.644 },
                  zoom: 16,
                  mapTypeControl: false,
                  streetViewControl: false,
              });

              window.map = map;

              coordinates.forEach((coordinate) => {
                  addMarker(+coordinate.dataset.lat, +coordinate.dataset.lng, map);
              });

              resolve();
          };

          document.head.appendChild(script);
      });
  }

  function addMarker(lat, lng, map = false) {
      map = map ? map : window.map;

      const marker = new google.maps.Marker({
          position: { lat: lat, lng: lng },
          map: map,
      });

      map.setCenter({ lat: lat, lng: lng });
  }
</script>