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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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).