/* ==========================================================================
Google Maps handler
- https://developers.google.com/maps/documentation/javascript/adding-a-google-map
========================================================================== */
const MapsHandler = {
map: '',
key: 'AIzaSyCVGPUmRmQRxXvzzWu3Xyu77XebQxQ-f4Y',
location: {lat: 51.2618222, lng: 5.5965538},
styling: '',
init: function () {
// Get map by id
MapsHandler.map = document.getElementById('map');
// Check if a map is defined
if (isset(MapsHandler.map)) {
if(MapsHandler.map.hasAttribute('data-google-lat')) MapsHandler.location.lat = parseFloat(MapsHandler.map.getAttribute('data-google-lat'));
if(MapsHandler.map.hasAttribute('data-google-lng')) MapsHandler.location.lng = parseFloat(MapsHandler.map.getAttribute('data-google-lng'));
MapsHandler.setCustomStyling();
// See if google variable exists
if (typeof(google) == 'undefined' || typeof(google.maps) == 'undefined') {
// Load external script
getScript('https://maps.googleapis.com/maps/api/js?key=' + MapsHandler.key, MapsHandler.drawMap);
} else {
MapsHandler.drawMap()
}
}
},
drawMap: function () {
// Create a map
const map = new google.maps.Map(MapsHandler.map, {
zoom: 12,
center: MapsHandler.location,
disableDefaultUI: true,
styles: MapsHandler.styling
});
// Add a marker
const marker = new google.maps.Marker({
position: MapsHandler.location,
map: map,
icon: '/img/googleMapsMarker.png'
});
},
setCustomStyling: function () {
MapsHandler.styling =
[
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#747474"
},
{
"lightness": "23"
}
]
},
{
"featureType": "poi.attraction",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#f38eb0"
}
]
},
{
"featureType": "poi.government",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ced7db"
}
]
},
{
"featureType": "poi.medical",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffa5a8"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#c7e5c8"
}
]
},
{
"featureType": "poi.place_of_worship",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#d6cbc7"
}
]
},
{
"featureType": "poi.school",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#c4c9e8"
}
]
},
{
"featureType": "poi.sports_complex",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#b1eaf1"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"lightness": "100"
}
]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
},
{
"lightness": "100"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffd4a5"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffe9d2"
}
]
},
{
"featureType": "road.local",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [
{
"weight": "3.00"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.stroke",
"stylers": [
{
"weight": "0.30"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#747474"
},
{
"lightness": "36"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#e9e5dc"
},
{
"lightness": "30"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"visibility": "on"
},
{
"lightness": "100"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"color": "#d2e7f7"
}
]
}
];
}
};
MapsHandler.init();