Google Maps API : Picklist on markers

44 views
Skip to first unread message

Renan Marchetto

unread,
Apr 5, 2016, 7:37:45 PM4/5/16
to Google Maps JavaScript API v3
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>
        async defer></script>
      </body>
    </html>

------------------------------------------------------------------------------------------------------------------------------------------

 I want something like that:

Reply all
Reply to author
Forward
0 new messages