用自己的信息窗口在地圖上顯示多個標記

Question

我需要在地圖上顯示多個標記，每個標記都有自己的 infowindow。我創建了單個標記，沒有問題，但是不知道如何爲每個標記創建infowindows。

我正在基於ASP的網站使用V3 API生成地圖， ，標記是從一組數據庫記錄創建的。該標記 創建通過一個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' 
      }); 

這是建立在正確的位置所有相關的標誌物。

我現在需要做什麼，不確定如何實現是給每個 他們自己獨特的infowindow，我可以用它來顯示 信息和與該標記相關的鏈接。

來源

   <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地圖，你只能調用一次事件監聽器。此外，您從來沒有實際創建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來獲取你需要什麼，然後讓Java腳本做到這一點，你需要的工作用數據完成。

更好做什麼你要做的是重寫你的VB來創建一個Javascript對象數組，每個包含一個公園的信息。然後使用Javascript來遍歷該數組，併爲您設置標記及其相關的信息窗口。

大綱所提出的解決方案：

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