Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
change javascript google map marker color
<!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>
@sonners

This comment has been minimized.

Copy link

@sonners sonners commented Mar 20, 2019

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.

@shdishar

This comment has been minimized.

Copy link

@shdishar shdishar commented Dec 10, 2020

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