Afficher plusieurs marqueurs sur une carte avec leurs propres fenêtres d'informations

Question

J'ai besoin d'afficher plusieurs marqueurs sur une carte, chacun avec sa propre infowindow . J'ai créé les marqueurs individuels sans problème, mais je ne sais pas comment créer les infowindows pour chacun.

Je génère une carte en utilisant l'API V3 dans un site Web ASP, avec des marqueurs créés à partir d'un ensemble d'enregistrements DB. Les marqueurs sont créé par une boucle à travers rs et définissant un marqueur() avec les variables pertinentes:

  var myLatlng = new google.maps.LatLng(lat,long); 
      var marker = new google.maps.Marker({ 
        map: map, 
        position: myLatlng, 
        title: 'locationname', 
        icon: 'http://google-maps-icons.googlecode.com/files/park.png' 
      }); 

Cela crée tous les marqueurs pertinents dans leurs emplacements corrects. Ce que je dois faire maintenant, et je ne suis pas sûr de la façon de réaliser, est de donner à chaque leur propre infowindow unique que je peux utiliser pour afficher des informations et des liens relatifs à ce marqueur.

Source

   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
       <script language="javascript"> 
       $(document).ready(function() { 

        //Google Maps 
         var myOptions = { 
          zoom: 5, 
          center: new google.maps.LatLng(-26.66, 122.25), 
         mapTypeControl: false, 
          mapTypeId: google.maps.MapTypeId.ROADMAP, 
         navigationControl: true, 
         navigationControlOptions: { 
         style: google.maps.NavigationControlStyle.SMALL 
         } 

         } 

         var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

         <!-- While locations_haslatlong not BOF.EOF --> 
          <% While ((Repeat1__numRows <> 0) AND (NOT locations_haslatlong.EOF)) %> 
         var myLatlng = new google.maps.LatLng(<%=(locations_haslatlong.Fields.Item("llat").Value)%>,<%=(locations_haslatlong.Fields.Item("llong").Value)%>); 
         var marker = new google.maps.Marker({ 
         map: map, 
         position: myLatlng, 
         title: '<%=(locations_haslatlong.Fields.Item("ldescription").Value)%>', 
         icon: 'http://google-maps-icons.googlecode.com/files/park.png', 
         clickable: true, 
         }); 
         <% 
         Repeat1__index=Repeat1__index+1 
         Repeat1__numRows=Repeat1__numRows-1 
         locations_haslatlong.MoveNext() 
         Wend 
         %>   
          <!-- End While locations_haslatlong not BOF.EOF --> 

         google.maps.event.addListener(marker, 'click', function() { 
         infowindow.open(map,marker); 
         }); 

         google.maps.event.addListener(marker, 'dblclick', function() { 
         map.setZoom(14); 
         }); 


            }); 

Answer 1

Le problème est dans votre appel à addListener()

Pendant que vous boucle à travers votre recordset et écrire le javascript encore et encore et encore et encore pour ajouter un marqueur au carte, vous n'appelez qu'une fois l'écouteur d'événement. De plus, vous ne créez jamais d'objets du type InfoWindow, donc vous n'avez jamais rien à appeler open().

La solution rapide et sale est d'ajouter ceci après avoir créé votre mais avant la fin de votre boucle While.

var infowindow = new google.maps.InfoWindow({ 
    content: '<%=(locations_haslatlong.Fields.Item("field_or_fields_containing_data_for_info_window").Value)%>' 
}); 
google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map,marker); 
}); 

Mais ne le faites pas - vous utilisez VB pour écrire Javascript totalement redondant pour vous, alors que vous pourriez utiliser VB pour aller chercher ce dont vous avez besoin, puis laisser Javascript faire le travail que vous avez besoin fait avec les données.

Le meilleur mieux pour faire ce que vous essayez de faire est de réécrire votre VB pour créer un tableau d'objets Javascript, chacun contenant des informations d'un parc. Ensuite, utilisez Javascript pour faire une boucle sur ce tableau et configurer les marqueurs et leurs infoWindows associés pour vous.

Décrivant la solution proposée:

// Create an array to hold a series of generic objects 
// Each one will represent an individual marker, and contain all the 
// information we need for that marker. This way, we can reuse the data 
// on the client-side in other scripts as well. 
var locations_array = [<% 
While (
    (Repeat1__numRows <> 0) 
    AND (NOT locations_haslatlong.EOF) 
) 
%> 
{ 
latitude: <%=(locations_haslatlong.Fields.Item("llat").Value)%>, 
longitude: <%=(locations_haslatlong.Fields.Item("llong").Value)%>, 
title: "<%=(locations_haslatlong.Fields.Item("ldescription").Value)%>", 
infoWindowContent: "<%=(locations_haslatlong.Fields.Item("field_or_fields_containing_data_for_info_window").Value)%>" 
}, 
<% 
    Repeat1__index=Repeat1__index+1 
    Repeat1__numRows=Repeat1__numRows-1 
    locations_haslatlong.MoveNext() 
    Wend 
%>]; 

var x = locations_array.length; 
while (--x) { 
    // Grab an individual park object out of our array 
    var _park = locations_array[x] 
    var myLatlng = new google.maps.LatLng(_park.latitude,_park.longitude); 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: myLatlng, 
     title: _park.title, 
     icon: 'http://google-maps-icons.googlecode.com/files/park.png', 
     clickable: true, 
    }); 
    var infowindow = new google.maps.InfoWindow({ 
     content: _park.infoWindowContent 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map,marker); 
    }); 
} 

Answer 2

Voici quelque chose qui fonctionne (RoR/Rails/Ruby on Rails):

<script type="text/javascript"> 
    function initialize() { 
    var myOptions = { 
     zoom: 12, 
     center: new google.maps.LatLng(48.842, 2.34), 
     // HYBRID ROADMAP SATELLITE TERRAIN 
     mapTypeId: google.maps.MapTypeId.SATELLITE 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
            myOptions); 

<% @tiles.each do |tile| %> 
var image_id<%= tile.id %> = '<%= tile.photo.url(:icon) %>'; 
var myLatLng_id<%= tile.id %> = new google.maps.LatLng(<%=h tile.lat %>,<%=h tile.long %>); 
var tileMarker_id<%= tile.id %> = new google.maps.Marker({ 
    position: myLatLng_id<%= tile.id %>, 
    map: map, 
    clickable: true, 
    icon: image_id<%= tile.id %> 
}); 

var infowindow_id<%= tile.id %> = new google.maps.InfoWindow({ 
    content: '<a href="<%= tile.photo.url(:original) %>"> <img src="<%= tile.photo.url(:large) %>" height="400" ALIGN="left" border="None"></a>' 
//'Tile: <%= tile.id %><BR/> User: <%= tile.user_id %>' 
}); 
google.maps.event.addListener(tileMarker_id<%= tile.id %>, 'click', function() { 
     infowindow_id<%= tile.id %>.open(map,tileMarker_id<%= tile.id %>); 
}); 

<% end %> 

} 

Il y avait un problème dans le VB/... Code a déjà été répondu, l'objet infowindow doit être unique par marqueur cliquable. Démo sur: http://www.geodepollution.org/

Answer 3

Voici une excellente solution.

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

Answer 4

Cela semble assez bon.

http://www.usnaviguide.com/v3maps/v3multipleinfowindows.htm