Показать несколько маркеров на карте со своими информационными окнами

Question

Мне нужно отобразить на карте несколько маркеров, каждый со своим infowindow. Я создал отдельные маркеры без проблем, , но не знаю, как создавать инфо-окна для каждого.

Я создаю карту, используя API V3 на веб-сайте ASP, с созданием маркеров из набора записей БД. Маркеры созданы перекручивание через RS и определение маркеров() с соответствующими переменными:

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

Это создает все соответствующие маркера в их правильных местах.

Что мне нужно сделать сейчас, и я не уверен, как добиться этого, дайте каждому из них их собственный уникальный инфоиндуст, который я могу использовать для отображения информации и ссылок, относящихся к этому маркеру.

Источник

   <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

Проблема заключается в вызове в addListener()

Пока вы цикл через ваш записей и выписать JavaScript снова и снова и снова и снова для добавления маркера в map, вы вызываете только прослушиватель событий один раз. Кроме того, вы никогда на самом деле не создаете никаких объектов типа InfoWindow, поэтому вам никогда нечего называть open().

быстрого и грязный решения добавить это после того, как вы создаете свой , но прежде чем закончить 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); 
}); 

Но не делайте этого - вы используете VB, чтобы написать полностью избыточную Javascript для вас, когда вы могли бы использовать VB для извлечения, что вам нужно, а затем пусть Javascript сделать работу, которая вам нужна сделанные с данными.

Лучше Способ сделать то, что вы пытаетесь сделать, - это переписать свой VB, чтобы создать массив объектов Javascript, каждый из которых содержит информацию о парке. Затем используйте Javascript, чтобы перебрать этот массив и настроить маркеры и связанные с ними infoWindows для вас.

Окантовка предложенное решение:

// 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

Вот то, что работает (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 %> 

} 

Существовал проблема в VB/... код на который был дан ответ, объект infowindow должен быть уникальным для каждого маркера, который можно щелкнуть. Демо-версия: http://www.geodepollution.org/

Answer 3

Это отличное решение.

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

Answer 4

Это, кажется, довольно хорошо.

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