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,
icon: src =
'http://maps.google.com/mapfiles/kml/paddle/red-circle.png',
//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,
icon: src =
'http://maps.google.com/mapfiles/kml/paddle/ylw-circle.png',
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,
icon: src =
'http://maps.google.com/mapfiles/kml/paddle/grn-circle.png',
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>
<script
src="https://maps.googleapis.com/maps/api/js?callback=initMap";
async defer></script>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------------
I want something like that:
[1]: http://i.stack.imgur.com/sIW8X.jpg
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-maps-js-api-v3+unsubscr...@googlegroups.com.
To post to this group, send email to google-maps-js-api-v3@googlegroups.com.
Visit this group at https://groups.google.com/group/google-maps-js-api-v3.
For more options, visit https://groups.google.com/d/optout.
