Last active
December 10, 2020 02:37
-
-
Save getsudocode/605bf60f5de40eb3f6b00addd93c913d to your computer and use it in GitHub Desktop.
change javascript google map marker color
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title></title> | |
<style> | |
#map { | |
height: 100%; | |
} | |
html, body { | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
<script> | |
let map; | |
// global array to store the marker object | |
let markersArray = []; | |
function initMap() { | |
map = new google.maps.Map(document.getElementById('map'), { | |
center: {lat: -34.397, lng: 150.644}, | |
zoom: 8 | |
}); | |
addMarker({lat: -34.297, lng: 150.544}, "yellow"); | |
addMarker({lat: -34.397, lng: 150.644}, "green"); | |
addMarker({lat: -34.597, lng: 150.844}, "blue"); | |
} | |
function addMarker(latLng, color) { | |
let url = "http://maps.google.com/mapfiles/ms/icons/"; | |
url += color + "-dot.png"; | |
let marker = new google.maps.Marker({ | |
map: map, | |
position: latLng, | |
icon: { | |
url: url, | |
//scaledSize: new google.maps.Size(38, 38) | |
} | |
}); | |
//store the marker object drawn in global array | |
markersArray.push(marker); | |
} | |
</script> | |
<script async defer | |
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> | |
</script> | |
</body> | |
</html> |
How can I change the colours based on user input? If user selects a particular location and wants to set the status of that particular place green (with the help of green marker).
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How would I add different colors, based on a value in my database? For example, I have a jobs table and one of the table columns is 'job-sector' with the values 'Admin' and 'Clerical'. I would like to assign each job-sector value with a different color? Many thanks and best wishes.