Author: Stasyuk Eugene 50 Tags: , 26.02.2024

Today let’s see how to make a google map with a list of addresses. The important feature is that when you click on any of the addresses, a marker with this address should appear in the center of the map.

The fully finished and working version can be seen here: https://codepen.io/jecosjmecos/pen/rNRgrgg

And in the article itself we will already analyze the work step by step.

1) Styles

Set the size of the map on the page:

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

2) Marking up a list with addresses

The list wrap should have 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>

An important point! Link (tag <a>) has two attributes: data-lat и data-lng . In these attributes we use coordinates, which will then be displayed on the map.

To get them, just right-click on a point on an open google map, and then a window with options will be available, the first item of which is the coordinates.

3) Area with map

Add an element with id='map‘. The contents of the block will be filled with the map

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

4) Main script

This script:

  • Reads the coordinates of the addresses in our list
  • Adds markers of these addresses to the map
  • When you click on one of the addresses, displays it in the center of the map

To make the script work, you need to create an api key in the google console and insert it in the reference instead of YOUR_API_KEY in script.src in the initMap() function. You can see how to create a key here:

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

Other articles

Show your work presentation

Show your work

Show your work

I recently read Austin Kleon’s book “Show Your Work”. Left a very good impression. Thanks to her, I slightly changed my views on my work and on the process itself as a whole. Why did she impress me so much?  The message of this book is quite simple: show your work, including the process of […]

Popup window on the site (modal window) pop-up window

Popup window on the site (modal window)

Popup window on the site (modal window)

When I was just learning the basics of development, I used to make a popup window manually. Yes, yes – instead of finding some ready-made solution, I did this thankless task 🤪. It seemed to me that there was nothing particularly complicated about it. But, only after some time of working on this issue, I […]