Comment alimenter une liste déroulante dans une fenêtre d'information (Google Maps API v3) ?

Question

J'ai deux tableaux : l'un pour les noms des articles, l'autre pour les liens url vers chaque article. J'essaie de remplir une liste déroulante à l'intérieur d'une fenêtre d'information avec les noms des articles, en établissant un lien vers chaque article lorsqu'il est sélectionné.

Il semble que les liens aient à voir avec l'utilisation de la fonction onchange et sinon j'utilise l'événement "domready" eventListener pour accéder à la <select> la balise id des éléments.

Voici le code pertinent que j'ai jusqu'à présent, qui est le suivant no de travail :

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

Puisque j'appelle la fonction setDropDownList après le placement du marqueur, j'ai supprimé cet écouteur et en ai ajouté un pour afficher la fenêtre d'information lorsque le marqueur est cliqué.

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

C'est à vous de décider comment gérer l'événement onchange lorsqu'une sélection est effectuée. Pour l'instant, l'alerte est donnée par un message et un lien factice.

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

Je dois ajouter que map est mondial.

  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

Voici ma solution, qui, dans ma situation, m'a obligé à créer toute la liste d'options dans l'interface de l'utilisateur. content de l'infowindow, plutôt que dans le code html.

Ainsi, au lieu de faire référence à la id d'un élément de sélection html, je concatène simplement la liste des options sous forme de chaîne, en bouclant pour chaque ajout d'option ( Je ne comprends toujours pas "domready" eventListener, car il ne fonctionnait pas pour cette approche. ).

Je n'ai pas pu utiliser l'élégante @Lilina. .onchange = function(){... pour les liens, mais a plutôt utilisé window.location.href = this.options[this.selectedIndex].value en définissant l'attribut de valeur de chaque option comme étant égal à son lien url.

Voici le 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