JS for USA Harmony Tour custom location map

us-harmony-tour-map.js

"use strict";

var map; // initialize map

window.initMap = function () {
  var mapContainer = document.getElementById('map-canvas');

  if (!mapContainer) {
    return;
  }

  CustomMarker.prototype = new google.maps.OverlayView();

  function CustomMarker(opts) {
    this.isPastLocation = opts.isPastLocation;
    this.isCurrentLocation = opts.isCurrentLocation;
    this.setValues(opts);
  }

  CustomMarker.prototype.onAdd = function () {
    var self = this;
    var div = document.createElement('div');
    div.className = this.isPastLocation ? 'previous-location' : this.isCurrentLocation ? 'current-location' : '';
    div.innerHTML = '<div class="shadow"></div><div class="pulse"></div><div class="pin-wrap"><div class="pin"></div></div>';
    div.style.position = 'absolute';
    div.style.cursor = 'pointer';
    div.style.zIndex = '999';
    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
    google.maps.event.addDomListener(div, "click", function (event) {
      event.stopPropagation();
      google.maps.event.trigger(self, "click", event);
    });
    this.div = div;
  };

  CustomMarker.prototype.draw = function () {
    var div = this.div;
    var point = this.getProjection().fromLatLngToDivPixel(this.position);

    if (point) {
      div.style.left = point.x + 'px';
      div.style.top = point.y + 'px';
    }
  };

  CustomMarker.prototype.onRemove = function () {
    delete this.div;
  };

  var infoWindowTemplate = function infoWindowTemplate(props) {
    return "<h2>".concat(props.title, "</h2><dl><dt>Address</dt><dd>").concat(props.address, "</dd><dt>Dates</dt><dd>").concat(props.dates, "</dd><dt>Email</dt><dd><a href=\"mailto:").concat(props.email, "\">").concat(props.email, "</a></dd></dl>");
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 5,
    center: {
      lat: 42.6601967,
      lng: -100.7693037
    },
    disableDefaultUI: true,
    backgroundColor: '#fff',
    styles: [{
      "elementType": "labels.text",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "landscape.natural",
      "elementType": "geometry.fill",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "administrative",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "transit",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "poi.attraction",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "landscape.man_made",
      "elementType": "geometry.fill",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "poi.business",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "poi.medical",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "poi.place_of_worship",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "poi.school",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "poi.sports_complex",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "geometry",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "road.arterial",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "labels.icon",
      "stylers": [{
        "color": "#ffffff"
      }, {
        "visibility": "off"
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "labels.icon",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "road.arterial",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "road.local",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "poi.park",
      "elementType": "labels.icon",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "poi",
      "elementType": "labels.icon",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "water",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "landscape",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "poi.park",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "road",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "poi.sports_complex",
      "elementType": "geometry",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "water",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "poi.park",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "poi.park",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "road.local",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "road.local",
      "elementType": "geometry",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "poi.government",
      "elementType": "geometry",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "landscape",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "road",
      "elementType": "labels",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "road.arterial",
      "elementType": "geometry",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "road.local",
      "stylers": [{
        "visibility": "off"
      }]
    }]
  });
  map.data.loadGeoJson('https://gist.githubusercontent.com/M1r1k/d5731bf39e1dfda5b53b4e4c560d968d/raw/c774258085ddc11776591ce95f2240d0fd0657a2/canada_provinces.geo.json');
  map.data.loadGeoJson('https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json');
  map.data.setStyle(function (feature) {
    return {
      // fillColor: feature.getProperty('density') ? 'red' : 'green',
      fillColor: feature.getProperty('density') ? '#e0e0e0' : '#a9a9a9',
      strokeColor: 'white',
      strokeWeight: 2
    };
  });
  var shops = window.bangolufsen_us_harmony_shops || {
    beverlyhiils: {
      lat: 34.067,
      lng: -118.416,
      title: 'Beverly Hills',
      address: '9517 South Santa Monica Blvd',
      dates: 'July 10 and July 11',
      email: '[email protected]',
      isPastLocation: true
    },
    costamesa: {
      lat: 33.926,
      lng: -118.120,
      title: 'Costa Mesa',
      address: '3323-B Hyland Avenue',
      dates: 'July 19',
      email: '[email protected]',
      isCurrentLocation: true
    },
    lajolla: {
      lat: 32.845,
      lng: -117.275,
      title: 'La Jolla',
      address: '7851 Girard Avenue',
      dates: 'July 26',
      email: '[email protected]'
    },
    vancouver: {
      lat: 49.285,
      lng: -123.117,
      title: 'Vancouver',
      address: '429 Howe Street',
      dates: 'September 3 and September 4',
      email: '[email protected]'
    },
    boston: {
      lat: 42.351,
      lng: -71.079,
      title: 'Boston',
      address: '141B Newbury Street',
      dates: 'July 31 and August 1',
      email: '[email protected]'
    },
    newyork: {
      lat: 40.751,
      lng: -74.005,
      title: 'New York City',
      address: '520 W 28th, PH37 @ Zaha Hadid Building',
      dates: 'July 23 and July 24',
      email: '[email protected]',
      isCurrentLocation: true
    },
    miami: {
      lat: 25.979,
      lng: -80.142,
      title: 'Miami',
      address: '500 Seabiscuit Trail #1030',
      dates: 'TBD',
      email: '[email protected]'
    },
    montreal: {
      lat: 45.534,
      lng: -73.608,
      title: 'Montreal',
      address: '6555 Rue St-Denis',
      dates: 'TBD',
      email: 'TBD'
    },
    scottsdale: {
      lat: 33.557,
      lng: -111.901,
      title: 'Scottsdale',
      address: '8300 N Hayden Rd. Suite A-118',
      dates: 'TBD',
      email: '[email protected]'
    }
  };
  var infoWindow = new google.maps.InfoWindow();
  var markers = {};
  var bounds = Object.values(shops).reduce(function (bounds, shop) {
    return bounds.extend(new google.maps.LatLng(shop.lat, shop.lng));
  }, new google.maps.LatLngBounds());
  map.setCenter(bounds.getCenter());
  map.fitBounds(bounds);

  for (var shop in shops) {
    var pos = new google.maps.LatLng(shops[shop].lat, shops[shop].lng);
    markers[shop] = new CustomMarker({
      position: pos,
      map: map,
      isPastLocation: shops[shop].isPastLocation,
      isCurrentLocation: shops[shop].isCurrentLocation
    });
    markers[shop].addListener('click', function (marker, shop, map) {
      return function () {
        infoWindow.close();
        infoWindow.setContent(infoWindowTemplate(shop));
        infoWindow.open(map, marker);
      };
    }(markers[shop], shops[shop], map));
  }

  window.bangolufsen_us_harmony_map_instance = map;
};