After this tutorial you will be able to create a Marker in Google maps with a customized icon colour. This can be useful if you wanted to group markers together for quick identification.
We can get around this by creating an SVG with a custom colour in the script and using it as the icon.
I will use a random colour from an array of colours, but in a real application you would likely use specific ones. First initialize the array
Next initialize the map and the onclick event to create markers.
Our GetIcon() function will return an SVG icon for use in the Marker. My example creates a Flag icon with a random colour. You can create your own SVG using this online editor, then download the file and grab the data for use here.
Google Maps Markers
Google Maps allows you to set the icon for markers you place on the map. Our problem is that you would need to create a new icon file to change the colour, which could be rather time consuming !We can get around this by creating an SVG with a custom colour in the script and using it as the icon.
What We Will Create
Getting Started
Create the element the map will be inserted into, along with the CSS. Make sure to insert your own api key in the script tag too !
<html>
<head>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key={YOUR API KEY HERE}&callback=initMap&libraries=&v=weekly"
defer
></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
I will use a random colour from an array of colours, but in a real application you would likely use specific ones. First initialize the array
let colours = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
'#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
'#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];
Next initialize the map and the onclick event to create markers.
function initMap() {
const myLatlng = { lat: -25.363, lng: 131.044 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: myLatlng,
});
google.maps.event.addListener(map, 'click', function(event) {
CreateMarker(event.latLng, map);
});
}
function CreateMarker(location,map) {
var marker = new google.maps.Marker({
position: location,
map: map,
icon: GetIcon()
});
}
Our GetIcon() function will return an SVG icon for use in the Marker. My example creates a Flag icon with a random colour. You can create your own SVG using this online editor, then download the file and grab the data for use here.
function GetIcon(){
// Random Colour generate
let colour = colours[Math.floor(Math.random() * colours.length) + 1 ]
// SVG Details . Replace path with your own if nessessary
let svg = {
path: "m678.68551,141.87389c3.6668,-10.16879 3.99207,-26.8247 0.74142,-37.05115l-10.75692,-33.76397c-3.2502,-10.22638 -17.7044,-20.05985 -32.13881,-21.84943l-99.13705,-12.26284c-14.42397,-1.78957 -38.05059,-1.73116 -52.45419,0.13067l-107.38534,13.84875c-14.43422,1.86178 -38.0502,2.05085 -52.53512,0.4365l-105.06968,-11.7253c0.13202,0.36368 0.36561,0.68412 0.47768,1.04781l71.91516,244.65196l32.91091,4.0726c14.43369,1.7898 38.0296,1.71664 52.46379,-0.13039l107.35483,-13.8633c14.4036,-1.84728 38.05038,-2.03629 52.53527,-0.42207l115.27762,12.87458c14.48492,1.61418 24.12476,-5.48482 21.48322,-15.81278l-12.90972,-50.04176c-2.66147,-10.31415 -1.8392,-27.05767 1.80756,-37.22649l15.41937,-42.91338l0,-0.00002zm-515.85165,-111.96814c-14.41329,2.18171 -23.62639,12.26269 -20.58929,22.56211l153.46041,522.02045l54.39386,0l-155.71538,-529.83215c-3.08785,-10.34319 -17.17654,-16.93283 -31.54957,-14.75041l-0.00003,0z" ,
fillColor: colour,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 0.1,
}
return svg
}
Comments
Post a Comment