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