Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Custom Google Map Class
/* global google */
/**
* Custom Google Maps class with custom colours
* @param String container - the selector for the map to appear in
* @param Object center - the lat/lng of the center of the map
* @param INT zoom - how zoomed in do we want the map to be
* @param Object markerLocation - the lat/lng of the marker
* @param String markerSVG - optimised SVG of marker
* @param INT markerSVGWidth - the height of our custom marker
* @param INT markerSVGHeight - the height of our custom marker
* @author CB
*/
export default class {
constructor() {
// Default options
this.container = document.querySelector('.map');
this.center = {lat: 51.5074, lng: 0.1378};
this.zoom = 10;
this.markerLocation = {lat: 51.5074, lng: 0.1378};
this.markerSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.5 81.6"><path d="M23.8 0C10.7 0 0 10.7 0 23.8c0 4.9 1.5 9.5 4.1 13.3L24 81.6l19.5-44.7c2.5-3.8 4-8.3 4-13.1C47.5 10.7 36.8 0 23.8 0zm-3.1 31.7c.9 1.2 2.1 1.7 3.6 1.7s2.6-.5 3.4-1.5c.4-.5.8-1.3 1.1-2.4H33c-.4 2.2-1.3 4.1-2.8 5.5-1.5 1.4-3.5 2.1-5.8 2.1-2.9 0-5.2-.9-6.9-2.8-1.7-1.9-2.5-4.5-2.5-7.9 0-3.6 1-6.4 2.9-8.3 1.7-1.7 3.8-2.5 6.3-2.5 3.4 0 5.9 1.1 7.5 3.4.9 1.3 1.3 2.6 1.4 3.8h-4.3c-.3-1-.6-1.7-1.1-2.2-.8-.9-1.9-1.3-3.4-1.3s-2.7.6-3.6 1.9c-.9 1.3-1.3 3-1.3 5.4s.4 3.9 1.3 5.1z" fill="#910099"/></svg>';
this.markerSVGWidth = 25;
this.markerSVGHeight = 43;
// Initialisation and customisations
this.init();
}
/**
* Map initialisation and customisations
*/
init() {
this.map = this.setMap();
this.map.set('styles', this.setCustomStyle());
this.customOptions = this.setCustomOptions();
this.marker = this.setCustomMarker();
}
/**
* Initialise the google map
* @return Object
*/
setMap() {
let defaultOptions = {
zoom: this.zoom,
center: this.center,
streetViewControl: false
};
return new google.maps.Map(this.container, {...defaultOptions, ...this.customOptions});
}
/**
* Create a new marker with a custom SVG
* @return Object
*/
setCustomMarker() {
let icon = {
url: this.encodeSVG(this.markerSVG),
size: new google.maps.Size(this.markerSVGWidth, this.markerSVGHeight),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(this.markerSVGWidth / 2, this.markerSVGHeight / 2),
scaledSize: new google.maps.Size(this.markerSVGWidth, this.markerSVGHeight)
};
return new google.maps.Marker({
position: this.markerLocation,
map: this.map,
icon: icon
});
}
/**
* Apply any custom map options here
* @return Object
*/
setCustomOptions() {
return {
streetViewControl: false
};
}
/**
* Base64 encode SVG
* @return String
*/
encodeSVG(svg) {
return 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg);
}
/**
* Bind custom styles to our map
* Default style - pantone colour of the year 2018
* @return Array
*/
setCustomStyle() {
return [
{
featureType: 'labels.text',
elementType: 'labels',
stylers: [{
saturation: -100
}]
},
{
featureType: 'all',
elementType: 'geometry',
stylers: [
{
saturation: -50
},
{
hue: '#654ea3'
},
{
weight: 0
}
]
},
{
featureType: 'poi',
elementType: 'labels',
stylers: [{
visibility: 'off'
}]
},
{
featureType: 'road',
elementType: 'labels',
stylers: [{
visibility: 'off'
}]
},
{
featureType: 'road',
stylers: [{
saturation: -50
}]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{
visibility: 'off'
}]
}
];
}
}
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&callback=initMap"></script>
<script>
import CustomGoogleMap from './custom-google-map';
window.initMap = () => {
new GoogleMaps();
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.