Obtenir l'élément DOM d'un marqueur dans l'API Google Maps 3

Question

J'essaie de trouver un moyen d'obtenir l'élément DOM d'un marqueur. Il semble que Google utilise différents éléments pour afficher un marqueur et un pour gérer l'événement.

J'ai compris 2 choses jusqu'à présent. Il existe une variable générée appelée fb qui contient l'élément DOM sur un objet marqueur, mais je pense que la prochaine fois que Google mettra à jour l'API, elle sera nommée quelque chose de différent. Alors pas d'aller. Deuxièmement, si l'on associe un événement click à un marqueur, l'API envoie l'élément DOM de l'événement en tant qu'arguments à toute fonction que vous avez spécifiée. En regardant à travers Firebug, je ne trouve aucune relation entre les deux. Ce que j'essaie d'accomplir est de manipuler l'élément DOM() et de lui fournir plus d'informations que juste un élément 'div' avec un arrière-plan.

Je l'ai fait dans la version 2 en utilisant une propriété name (non documentée) qui génère un ID sur l'élément div.

Est-ce que quelqu'un a une idée?

Answer 1

J'ai trouvé une solution de contournement vraiment très mauvaise. On peut utiliser l'attribut title pour passer une propriété id.

fixMarkerId = function() { 
       $('div[title^="mtg_"]').each(function (index, elem) { 
        el = $(elem); 
        el.attr('id', el.attr('title')); 
        el.removeAttr('title'); 
       }); 
      }, 
      tryAgainFixMarkerId = function() { 
       if ($('div[title^="mtg_"]').length) { 
        fixMarkerId(); 
       } else { 
        setTimeout(function() { 
         tryAgainFixMarkerId(); 
        }, 100); 
       }; 
      } 

if ($('div[title^="mtg_"]').length) { 
       fixMarkerId(); 
      } else { 
       setTimeout(function() { 
        tryAgainFixMarkerId(); 
       }, 100); 
      }; 

Je ne recommande fortement cette solution pour aucun environnement de production. Mais pour l'instant je l'utilise pour que je puisse continuer à développer. Mais toujours à la recherche d'une meilleure solution.

Answer 2

Je cherchais aussi l'élément DOM pour implémenter une info-bulle personnalisée. Après un certain temps à creuser dans des superpositions google, bibliothèques personnalisées et ainsi de suite, je l'ai fini avec la solution suivante basée sur l'approche de titre de fredrik (en utilisant jQuery):

 
google.maps.event.addListener(marker, 'mouseover', function() { 

    if (!this.hovercardInitialized) { 

     var markerInDOM = $('div[title="' + this.title + '"]').get(0); 

     // do whatever you want with the DOM element 

     this.hovercardInitialized = true; 
    } 

}); 

Hope this helps quelqu'un.

Answer 3

J'ai trouvé cette méthode utile, bien qu'elle ne convienne pas à tous les environnements. Lors de la définition de l'image du marqueur, ajoutez une ancre unique à l'URL. Par exemple:

// Create the icon 
var icon = new google.maps.MarkerImage(
    "data/ui/marker.png", 
    new google.maps.Size(64, 64), 
    new google.maps.Point(0,0), 
    new google.maps.Point(48, 32) 
); 

// Determine a unique id somehow, perhaps from your data 
var markerId = Math.floor(Math.random() * 1000000); 
icon.url += "#" + markerId; 

// Set up options for the marker 
var marker = new google.maps.Marker({ 
    map: map, 
    optimized: false, 
    icon: icon, 
    id: markerId, 
    uniqueSrc: icon.url 
}); 

Maintenant, vous avez un sélecteur unique, à savoir:

$("img[src='data/ui/marker.png#619299']") 

ou si vous avez le marqueur:

$("img[src='" + marker.uniqueSrc + "']") 

Answer 4

1. superpositions Personnaliser (par les outils onAdd, dessiner , supprimer) tout en faisant glisser il a quelques problèmes.
2. Peut-être que vous pouvez obtenir l'élément dom marqueur par le nom de la classe gmnoprint et l'indice qu'il a été joint dans.