Створення інтерактивної карти 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(). Як створити ключ можна подивитися тут:

<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>