How to move google map function to npm module for webpack?

S

Sergey Burduzha2020-12-22 21:11:44

JavaScript

Sergey Burduzha, 2020-12-22 21:11:44

Good evening.

I wrote a function for google maps and it works, but I want to move it to a webpack module to use new javascript features and have support for older browsers.

function initialize() {
  let location = [
    ['1', 44.4991128, 11.2966662, 1, 'Bologna'],
    ['2', 45.4627124, 9.1076931, 1, 'Milano'],
    ['3', 44.4469563, 8.8207929, 1, 'Genova'],
  ];
  let map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: new google.maps.LatLng(44.8585384, 10.3738929),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  let infowindow = new google.maps.InfoWindow();
  for (let i = 0; i < location.length; i++) {
    let marker = new google.maps.Marker({
      position: new google.maps.LatLng(location[i][1], location[i][2]),
      map: map,
      title: location[i][0]
    });
    google.maps.event.addListener(marker, 'click', (function (marker, i) {
      return function () {
        let mapTemplate = `
                                <h4>Filiale del Trentino Alto Adige </h4>
                                <p>Asta Centrale Blocco 3/A Galleria B n. 90 Centergross  40050 Funo di Argelato (BO) </p>
                                <ul>
                                    <li>
                                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M16.2532 11.5765C15.3796 10.7118 14.0035 10.6122 13.0167 11.3456L12.46 11.7757C12.1522 12.0065 11.7267 11.9748 11.4551 11.7032L6.57556 6.81868C6.30397 6.54706 6.27229 6.12153 6.50314 5.8137L6.93315 5.23878C7.66644 4.25191 7.56686 2.88026 6.7023 2.00656L5.34436 0.648482C4.46622 -0.216161 3.05396 -0.216161 2.17583 0.648482L1.23885 1.58103C-0.159836 2.96627 -0.404266 5.14372 0.659456 6.8051C3.35271 11.0468 6.94673 14.6457 11.1835 17.3438C12.8447 18.4031 15.0174 18.1586 16.4071 16.7643C17.0725 16.0943 18.0683 15.3067 17.9959 14.2474C18.0773 13.1383 16.9367 12.2872 16.2532 11.5765Z" fill="#FA6100"/>
                                        </svg>
                                        <a href="tel:0422 362826">0422 362826</a>
                                    </li>
                                    <li>
                                        <svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M14.885 3.85428H14.3893V0H3.08342V3.85428H2.58776C1.16091 3.85428 0 5.01493 0 6.44204V11.5446C0 12.9714 1.16091 14.1324 2.58776 14.1324H14.8847C16.3118 14.1324 17.4727 12.9714 17.4727 11.5446V6.44204C17.4727 5.01493 16.3118 3.85428 14.885 3.85428ZM4.36818 1.28476H13.1045V6.16684H4.36818V1.28476Z" fill="#FA6100"/>
                                            <path d="M3.08379 11.6913C3.43856 11.6913 3.72617 11.4037 3.72617 11.0489C3.72617 10.6942 3.43856 10.4066 3.08379 10.4066C2.72901 10.4066 2.44141 10.6942 2.44141 11.0489C2.44141 11.4037 2.72901 11.6913 3.08379 11.6913Z" fill="white"/>
                                        </svg>
                                        <a href="tel:0422363139">0422 363139</a>
                                    </li>
                                    <li>
                                        <svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M0 11.1048V1.89523C0.0140598 1.85799 0.0246046 1.82074 0.0351494 1.7835C0.221441 0.764357 1.14236 0.00253939 2.21793 0.00253939C6.73814 -0.000846464 11.2583 -0.000846464 15.7786 0.00253939C16.8014 0.00253939 17.6907 0.69664 17.9332 1.65484C17.9543 1.7361 17.9789 1.81736 18 1.89523V11.1048C17.9859 11.1285 17.9754 11.1556 17.9684 11.1793C17.7997 12.0799 17.1529 12.7706 16.2285 12.9365C15.7961 13.0144 15.3427 12.9941 14.8998 12.9975C10.6924 13.0008 6.48155 13.0008 2.27065 12.9975C1.23726 12.9975 0.365554 12.3677 0.0843585 11.4264C0.0527241 11.3248 0.0281195 11.2131 0 11.1048ZM6.12302 6.34425C5.84183 6.61173 5.57469 6.86567 5.31459 7.11961L2.44991 9.86893C2.27768 10.0348 2.19684 10.2211 2.27065 10.4513C2.4007 10.8644 2.90334 10.9659 3.24077 10.6409C4.43234 9.49987 5.62039 8.35545 6.80492 7.20764C6.8471 7.15686 6.88928 7.10607 6.92443 7.04851C7.02285 7.13654 7.08612 7.19072 7.1529 7.24489L8.58348 8.49766C8.85413 8.73467 9.13884 8.73128 9.41301 8.49427C9.90861 8.06427 10.4042 7.63088 10.8963 7.19749C10.942 7.15686 10.9912 7.11623 11.0475 7.06883C11.4938 7.50221 11.9332 7.92545 12.3691 8.34868L14.7522 10.6443C14.9139 10.8 15.1002 10.8745 15.3251 10.817C15.761 10.7019 15.8875 10.2143 15.5571 9.89263C14.7592 9.12066 13.9613 8.34868 13.1599 7.58348C12.7346 7.17379 12.3058 6.7641 11.8735 6.34764C11.9297 6.29685 11.9754 6.25283 12.0246 6.2122L13.7645 4.68857L15.5466 3.12769C15.7188 2.97871 15.7856 2.79249 15.7294 2.57918C15.6837 2.38618 15.529 2.23382 15.3286 2.1898C15.1037 2.13224 14.9209 2.21012 14.7522 2.3591C12.8823 3.99785 11.0123 5.63999 9.13533 7.27536C9.08963 7.31599 9.04042 7.35324 8.99121 7.39725L6.31634 5.04408C5.28647 4.14344 4.25308 3.24281 3.21968 2.33878C3.058 2.19658 2.87522 2.12886 2.65729 2.18642C2.45694 2.23382 2.3058 2.3828 2.26011 2.57579C2.20738 2.79249 2.27768 2.97532 2.44991 3.1243C3.18805 3.76761 3.92619 4.41431 4.66081 5.05763L6.12302 6.34425Z" fill="#FA6100"/>
                                        </svg>
                                        <a href="mailto:[email protected]">[email protected]</a>
                                    </li>
                                </ul>
                                <a href="" class="btn">Scopri la filiale</a>
                                <a href="" class="btn">Imposta il navigatore</a>
                            `;
        console.log(provinceData);
        const province = location[i][4];
        fetch('http://rewind.altuofianco.com/wp-json/wp/v2/posts?search=' + province)
          .then(response => response.json())
          .then(json => console.log(json));
        infowindow.setContent(location[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
}

initialize();

Created a module for webpack

const loadGoogleMapsApi = require('load-google-maps-api');
class Map {
  static loadGoogleMapsApi() {
    return loadGoogleMapsApi({key: "*****"});
  }

  static createMap(googleMaps, mapElement) {
    return new googleMaps.Map(mapElement, {
      center: {lat: 45.520562, lng: -122.677438},
      zoom: 14
    });
  }
}
export {Map};

Imported in main.js

import {Map} from './modules/contacts-map';

    let mapElement = document.getElementById('map');
    Map.loadGoogleMapsApi().then(function (googleMaps) {
      Map.createMap(googleMaps, mapElement);
    });

The map works, but I need more functionality from the top function.

Thanks in advance for the hint.