Skip to content

Instantly share code, notes, and snippets.

@M1r1k

M1r1k/us-harmony-tour-map.js

Last active July 19, 2019 14:07
Show Gist options
  • Save M1r1k/a909b754c78358ffff6fe5c963194b11 to your computer and use it in GitHub Desktop.
Save M1r1k/a909b754c78358ffff6fe5c963194b11 to your computer and use it in GitHub Desktop.
Download ZIP
JS for USA Harmony Tour custom location map
Raw
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: 'rodeo@beo-mail.com',
isPastLocation: true
},
costamesa: {
lat: 33.926,
lng: -118.120,
title: 'Costa Mesa',
address: '3323-B Hyland Avenue',
dates: 'July 19',
email: 'arr@bang-olufsensocal.com',
isCurrentLocation: true
},
lajolla: {
lat: 32.845,
lng: -117.275,
title: 'La Jolla',
address: '7851 Girard Avenue',
dates: 'July 26',
email: 'lajolla@bang-olufsensocal.com'
},
vancouver: {
lat: 49.285,
lng: -123.117,
title: 'Vancouver',
address: '429 Howe Street',
dates: 'September 3 and September 4',
email: 'info@beocanada.ca'
},
boston: {
lat: 42.351,
lng: -71.079,
title: 'Boston',
address: '141B Newbury Street',
dates: 'July 31 and August 1',
email: 'sales@beoboston.com'
},
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: 'soho@bang-Olufsen.dk',
isCurrentLocation: true
},
miami: {
lat: 25.979,
lng: -80.142,
title: 'Miami',
address: '500 Seabiscuit Trail #1030',
dates: 'TBD',
email: 'bob@beopalmbeach.com'
},
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: 'info@wattintegration.com'
}
};
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;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment