I need to change the markers colors by showing a picklist onclick.
For example: A red Marker, with the inner info 'Red', when clicked shows a picklist with others colors (blue, black,... ), when selected the color is changed and the inner info is changed too.<br>
There are any: `google.maps` function to facilitate that, I would like an example if possible.<br>
I couldn't find anything like that on internet.
I can only find how to put a marker and edit that, but not how to do something more elaborate like this, I don't even know if it is possible using google api.
I was trying this example, I created a picklist on html and tried to call that on :
> google.maps.InfoWindow
------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 500px;
height: 400px;
background-color: #CCC;
}
</style>
</head>
<body>
<div id="map"></div>
<div style="position: absolute; right: 25px; top: 15px; padding: 10px 10px 10px 10px;">
<!-- <h3><u>Marker List by area</u></h3> -->
</div>
<br>
<div>
<form>
<fieldset>
<legend><b>Setor</b></legend>
<p>
<label><b>Marker List</b></label>
<select id = "myList3">
<option value = "9">Marker 1</option>
<option value = "10">Marker 2</option>
<option value = "11">Marker 3</option>
<option value = "12">Marker 4</option>
</select>
</p>
</fieldset>
</form></div>
<script>
var geocoder;
var directionsService;
var directionsDisplay;
var markers = [];
var map;
function initMap() {
var myLatLng = new google.maps.LatLng(41.682, -100.103);
var mapOptions = {
zoom: 5,
center: myLatLng
};
//Map Framework above
map = new google.maps.Map(document.getElementById("map"), mapOptions); //Map Options
// Marker2 (Red - default marker color)
var latLng2 = new google.maps.LatLng(43.239316, -96.259241);
var contentString2 = '<div id="content">';
var infowindow2 = new google.maps.InfoWindow({
content: contentString2
});
var marker2 = new google.maps.Marker({
position: latLng2,
//new google.maps.Size(42,68)
//size: (12, 10),
//position: mypos,
map: map,
title: "marker ...)" //hover
});
markers[10] = marker2;
google.maps.event.addListener(marker2, 'click', function () {
infowindow2.open(map, marker2);
});
//moved 'SelectList' up toward top!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// End code for Marker 2
// Start of Marker3 (Yellow - marker color)
var latLng3 = new google.maps.LatLng(44.021778, -96.052417);
var contentString3 = '<div id="myList3">';
console.log(contentString3);
var infowindow3 = new google.maps.InfoWindow({
content: contentString3
});
var marker3 = new google.maps.Marker({
position: latLng3,
map: map,
title: "Marker ..."
});
markers[11] = marker3;
google.maps.event.addListener(marker3, 'click', function () {
infowindow3.open(map, marker3);
});
// End for Marker 3
// Start of Marker4 (Green - marker color)
var latLng4 = new google.maps.LatLng(43.881690, -95.922869);
var contentString4 = '<div id="myList3">';
var infowindow4 = new google.maps.InfoWindow({
content: contentString4
});
var marker4 = new google.maps.Marker({
position: latLng4,
map: map,
title: "marker ..."
});
markers[12] = marker4;
google.maps.event.addListener(marker4, 'click', function () {
infowindow4.open(map, marker4);
});
var infowindow4 = new google.maps.InfoWindow({
content: contentString4
});
google.maps.event.addListener(marker4, 'click', function () {
infowindow4.open(map, marker4);
});
}
</script>
async defer></script>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------------
I want something like that: