NazariyM
7/3/2018 - 2:46 PM

google map

"npm i -S promise-polyfill" Then init map on page. Method sample of class:

/**
   * Init map block
   * 
   */
  buildMap() {
    const gmapApi = new GoogleMapsApi();

    gmapApi.load().then(() => {
      let mapContainer = main.querySelector('.googleMap__map'),
          iconUrl =  mapContainer.dataset.map_pin,
          zoom = 15,
          style = googleMapStyle,
          lat = parseFloat(mapContainer.dataset.lat),
          lng = parseFloat(mapContainer.dataset.lng),
          coordinates =  {lat, lng};

      const map = new google.maps.Map(mapContainer, {
        zoom: zoom,
        center: coordinates,
        disableDefaultUI: true,
        styles: style
      });

      const icon = {
        url: iconUrl,
        scaledSize: new google.maps.Size(50, 50)
      }

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

    });

    return this;
  };
/**
 * IE 11 support
 * 
 */
import Promise from 'promise-polyfill';

export default class GoogleMapsApi {
  /**
   * Constructor set up config.
   * 
   */
  constructor() {
    // api key for google maps
    this.apiKey = 'AIzaSyAX2ELMyoytfX4Ab-EN_qfDx1UcOmsLPJ0';

    // set a globally scoped callback if it doesn't already exist
    if (!window._GoogleMapsApi) {
      this.callbackName = ('_GoogleMapsApi.mapLoaded');
      window._GoogleMapsApi = this;
      window._GoogleMapsApi.mapLoaded = this.mapLoaded.bind(this);
    }
  }

  /**
   * Load the Google Maps API javascript
   * 
   */
  load() {
    if (!this.promise) {
      this.promise = new Promise(resolve => {
        this.resolve = resolve;
        if (typeof window.google === 'undefined') {
          const script = document.createElement('script');
          script.async = true;
          script.defer = true;
          script.src = `https://maps.googleapis.com/maps/api/js?key=${this.apiKey}&callback=${this.callbackName}`;
          document.body.appendChild(script);
        } else {
          this.resolve();
        }
      });
    }

    return this.promise;
  }

  /**
   * Globally scoped callback for the map loaded
   * 
   */
  mapLoaded() {
    if (this.resolve) {
      this.resolve();
    }
  }
}