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

Answer 1

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);
  }

Answer 2

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