How can I populate a dropdown list in an infowindow (Google Maps API v3)?

Question

I have two arrays: one for article names, and the other for url links to each article. I am trying to populate a dropdown list within an infowindow with the article names, linking to each article when selected.

It seems as if the links may have to do with using the onchange event, and otherwise I am using the "domready" eventListener to access the <select> elements' id tag.

Here is the relevant code I have so far, which is not working:

function setDropDownList(mapMarker, names, links)
{
    // event listener for dropdown list in the map markers' infowindow
    google.maps.event.addListener(mapMarker, "domready", function()
    {
        var articles = document.getElementById("select");

        var nextArticle, nextOption;

        for(var i = 0; i < names.length; i++)
        {
            nextArticle = names[i];
            nextOption = new Option(nextArticle);

            /* add the new option to the option list
             ("null" for IE5, "-1" for all other browsers) */
            try
            {
                articles.add(nextOption, -1);
            }
            catch(e)
            {
                articles.add(nextOption, null);
            }
        }
    });
} // end of function setDropDownList

...I've just tried this with `addDomListener` instead of `addListener`, also with no avail... — Ian Campbell, Jun 07 '12 at 22:47

score 4 · Accepted Answer · answered Jun 07 '12 at 23:39

Since I am calling the setDropDownList function after the marker is placed, I removed that listener and added one to display the infowindow when the marker is clicked.

DEMO http://jsfiddle.net/yV6xv/10/

It's up to you how to handle the onchange event when a selection is made. Right now, it alerts with a message and a dummy link.

function setDropDownList(mapMarker, mapInfoWindow, names, links)
{

        var articles = document.getElementById("select");
        articles.onchange = function() {
          alert("Going to link " + links[this.options.selectedIndex]);
        };
        var nextArticle, nextOption;

        for(var i = 0; i < names.length; i++)
        {
            nextArticle = names[i];
            nextOption = new Option(nextArticle);

            /* add the new option to the option list
             ("null" for IE5, "-1" for all other browsers) */
            try
            {
                articles.add(nextOption, -1);
            }
            catch(e)
            {
                articles.add(nextOption, null);
            }
            mapInfoWindow.setContent(document.getElementById("select"));

            google.maps.event.addListener(mapMarker, 'click', function() {
              mapInfoWindow.open(map, this);
            });
    }
} // end of function setDropDownList

I should add that map is global.

  var map;
  var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP };

  function initialize() {
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var mymarker = new google.maps.Marker({
      map:map,
      position:new google.maps.LatLng(0,0)
    });

    var mynames = ["-- Choose an article --", "How to Launch a Fireball", "The Trinity of Magic", "Defending Against the Hax"];
var mylinks = ["to current page itself #", "http://fireball", "http://trinity", "http://hax"];

    var myinfowindow = new google.maps.InfoWindow();
    setDropDownList(mymarker, myinfowindow, mynames, mylinks);
  }

This is awesome, works perfectly, thanks @Lilina! I would give you +10 if this thing would let me... So, my confusion with whether to use the `"domready"` eventListener or not was because I wanted the option list to be created in the `content` attribute of the `infowindow` (*with* an id tag), and not in html. "domready" was not working for this, so I opted for a different solution -- just to set the content attribute with a string of html tags for the option list (see below). — Ian Campbell, Jun 09 '12 at 20:29
You're right, it is better not to have the `select` defined in the html (it seems like it jumps from the HTML to the infowindow when `setContent` is called). My general policy is to solve the problem/answer question by changing the least amount of original code, so I silently left the `select` in the HTML alone. If you can manage to define a string with just the `select` and `options`, inside the script, and pass that to `setContent`, it would be the best, I think. — Tina CG Hoehr, Jun 09 '12 at 20:34

score 1 · Answer 2 · answered Jun 09 '12 at 20:37

This is my solution, which for in my situation required that I create the entire options list within the content attribute of the infowindow, instead of within html.

So, instead of referring to the id of an html select element, I simply concatenate the options list as a String, looping through for each option addition (I still don't understand the "domready" eventListener, as it was not working for this approach).

I didn't get to use @Lilina's elegant .onchange = function(){... for the links, but instead used window.location.href = this.options[this.selectedIndex].value, setting the value attribute of each option equal to its' url link.

Here's the code:

function setDropDownList(mapRef, mapMarker, markerInfoWindow, names, links)
{
    var articles = markerInfoWindow.content;
    articles += "<select onchange = \"window.location.href = this.options[this.selectedIndex].value;\">";
    articles += "<option>&nbsp;&mdash;&nbsp;select an article&nbsp;&mdash;&nbsp;</option>";



    var nextArticle, nextArticleLink;

    for(var i = 0; i < names.length; i++)
    {
        nextArticle = names[i];
        nextArticleLink = links[i];

        articles += "<option value = " + nextArticleLink + ">" + nextArticle + "</option>";

        // setting each info window for each map marker with the function below
        setInfoWindow(mapRef, mapMarker, markerInfoWindow);
    }



    articles += "</select>";
    markerInfoWindow.setContent(articles);
} // end of function setDropDownList

How can I populate a dropdown list in an infowindow (Google Maps API v3)?

2 Answers2