Dynamic Marker Colour

by j_mc_falcon_19

HTML

<!DOCTYPE html>
<html>
  <head>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap&libraries=&v=weekly"
      defer
    ></script>

  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

CSS

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

let colours = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', 
		  '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
		  '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', 
		  '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];
      


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()
    });
  
}
function GetIcon(){
// Random Colour 
let colour = colours[Math.floor(Math.random() * colours.length) + 1  ]
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
}