MarkerClusterer का उपयोग कर मार्कर पर InfoWindow

Question

यह मेरा HTML कोड है। मैंने मार्करों पर एक infowindow जोड़ने के लिए कुछ भी कोशिश की है, लेकिन यह काम नहीं करना चाहता। मेरा डेटा "Alle_Ortswahlen.page1.xml" फ़ाइल से लोड हो रहा है। क्या किसी को पता है कि मैं प्रत्येक मार्कर को जानकारी कैसे जोड़ सकता हूं?

<script type="text/javascript"> 
    google.load('maps', '3', { 
    other_params: 'sensor=false' 
    }); 
    google.setOnLoadCallback(initialize); 
function initialize() { 

    var stack = []; 

    var center = new google.maps.LatLng(48.136, 11.586); 
    var options = { 
     'zoom': 5, 
     'center': center, 
     'mapTypeId': google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), options); 
    GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) { 
    var xmlDoc = GXml.parse(doc); 
    var markers = xmlDoc.documentElement.getElementsByTagName("ROW"); 
    for (var i = 0; i < markers.length; i++) { 
     // obtain the attribues of each marker 
     var lat = parseFloat(markers[i].getAttribute("Field4")); 
     var lng = parseFloat(markers[i].getAttribute("Field6")); 
     var marker = new google.maps.Marker({ 
      position : new google.maps.LatLng(lat, lng), 
      map: map, 
      title:"This is a marker" 
     });  
     stack.push(marker); 
    } 
    var mc = new MarkerClusterer(map,stack); 
    }); 
} 
</script> 

Answer 1

तो तुम क्या करने की जरूरत है, कुछ कोड जोड़ने के अपने के लिए लूप, प्रत्येक मार्कर के साथ एक infowindow ऑनक्लिक ईवेंट हैंडलर जोड़ के अंदर है। मुझे लगता है कि आप केवल एक समय में 1 infowindow दिखाना चाहते हैं, यानी आप एक मार्कर पर क्लिक करें, infowindow प्रासंगिक सामग्री के साथ प्रकट होता है। यदि आप फिर किसी अन्य मार्कर पर क्लिक करते हैं, तो पहला इन्फॉइंडो गायब हो जाता है, और दूसरा मार्कर दूसरे मार्कर से जुड़ा होता है। एक ही समय में सभी दिखाई देने वाले कई infowindows होने की बजाय।

GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) { 
    var xmlDoc = GXml.parse(doc); 
    var markers = xmlDoc.documentElement.getElementsByTagName("ROW"); 
    // just create one infowindow without any content in it 
    var infowindow = new google.maps.InfoWindow({ 
     content: '' 
    }); 
    for (var i = 0; i < markers.length; i++) { 
     // obtain the attribues of each marker 
     var lat = parseFloat(markers[i].getAttribute("Field4")); 
     var lng = parseFloat(markers[i].getAttribute("Field6")); 
     var marker = new google.maps.Marker({ 
      position : new google.maps.LatLng(lat, lng), 
      map: map, 
      title:"This is a marker" 
     });  
     // add an event listener for this marker 
     google.maps.event.addListener(marker , 'click', function() { 
     // assuming you have some content in a field called Field123 
       infowindow.setContent(markers[i].getAttribute("Field123")); 
       infowindow.open(map, this); 
     }); 
     stack.push(marker); 
    } 
    var mc = new MarkerClusterer(map,stack); 
    }); 

Answer 2

चक्र से पहले, एक खाली infowindow वस्तु बनाओ।

var infowindow = new google.maps.InfoWindow(); 

चक्र के लिए की तुलना में, मार्कर के बाद, एक घटना श्रोता जोड़ने, इस तरह:

  google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infowindow.setContent("You might put some content here from your XML"); 
        infowindow.open(map, marker); 
       } 
      })(marker, i)); 

कुछ बंद जब addListener विधि के लिए कॉलबैक तर्क गुजर हो रहा जादू नहीं है। आप इसे से परिचित नहीं हैं, तो एक नजर में यहां ले:

Mozilla Dev Center: Working with Closures

तो, अपने कोड कुछ इस तरह दिखना चाहिए:

google.load('maps', '3', { 
      other_params: 'sensor=false' 
     }); 

     google.setOnLoadCallback(initialize); 

     function initialize() { 

      var stack = []; 

      var center = new google.maps.LatLng(48.136, 11.586); 
      var options = { 
       'zoom': 5, 
       'center': center, 
       'mapTypeId': google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("map_canvas"), options); 
      var infowindow = new google.maps.InfoWindow(); 
      GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) { 
       var xmlDoc = GXml.parse(doc); 
       var markers = xmlDoc.documentElement.getElementsByTagName("ROW"); 
       for (var i = 0; i < markers.length; i++) { 
        // obtain the attribues of each marker 
        var lat = parseFloat(markers[i].getAttribute("Field4")); 
        var lng = parseFloat(markers[i].getAttribute("Field6")); 
        var marker = new google.maps.Marker({ 
         position : new google.maps.LatLng(lat, lng), 
         map: map, 
         title:"This is a marker" 
        });  
        google.maps.event.addListener(marker, 'click', (function(marker, i) { 
         return function() { 
          infowindow.setContent("You might put some content here from your XML"); 
          infowindow.open(map, marker); 
         } 
        })(marker, i)); 
        stack.push(marker); 
       } 
       var mc = new MarkerClusterer(map,stack); 
      }); 
     }