ओपन infoWindow (वी 3)

Question

मैं इस समस्या को हल मेरे सिर पाने के लिए प्रतीत नहीं कर सकते हैं:

मैं के साथ (का एक बहुत) एक नक्शे के मिल गया है मार्कर (कंपनियों) कि आ जेनरेट की गई एक्सएमएल फाइल से। मानचित्र के नीचे, मैं मानचित्र पर प्रदर्शित सभी कंपनियों की एक (गैर-जावास्क्रिप्ट-जेनरेटेड) सूची दिखाना चाहता हूं। जब मैं सूची में किसी कंपनी पर क्लिक करता हूं, तो नक्शा उस विशिष्ट मार्कर पर पैन करेगा और एक जानकारी विन्डो खोल देगा। बात यह है कि मैं नक्शा और सूची दो अलग-अलग चीजें बनना चाहता हूं ...

इस समस्या से निपटने का सही तरीका क्या होगा? धन्यवाद! महत्वपूर्ण है कि सभी markerinfo गतिशील है है ...

function initialize_member_map(lang) { 
    var map = new google.maps.Map(document.getElementById("large-map-canvas"), { 
    center: new google.maps.LatLng(50.85034, 4.35171), 
    zoom: 13, 
    mapTypeId: 'roadmap' 
    }); 
    var infoWindow = new google.maps.InfoWindow; 

    downloadUrl("/ajax/member-xml-output.php", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < markers.length; i++) { 
    var company = markers[i].getAttribute("company"); 
    var address = markers[i].getAttribute("address"); 
    var type = markers[i].getAttribute("type"); 
    var uid = markers[i].getAttribute("uid"); // Primary key of company table in MySQL 
    var point = new google.maps.LatLng(
     parseFloat(markers[i].getAttribute("lat")), 
     parseFloat(markers[i].getAttribute("lng"))); 
    var html = "<b>" + company + "</b> <br/>" + address; 
    bounds.extend(point);  
    var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     uid: uid // Some experiments, wanted to use this to target specific markers... 
    }); 
    bindInfoWindow(marker, map, infoWindow, html); 
    }   
    map.setCenter(bounds.getCenter()); 
    map.fitBounds(bounds); 
}); 
} 

function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
    new ActiveXObject('Microsoft.XMLHTTP') : 
    new XMLHttpRequest; 

    request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request, request.status); 
    } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
} 
function doNothing() {} 

मीकल द्वारा सुझाव के बाद, मैं निम्नलिखित की कोशिश की है, लेकिन दो समस्याओं का सामना कर रहा हूँ: मेरे कंसोल मुझे markers[index].getPosition is not a function बताता है और मेरी सूची में पहले आइटम को दर्शाता है undefined हो। क्या आप कृपया मदद कर सकते हैं?

//JavaScript Document 
var map; 
var markers = new Array(); 
var company_list; 
function initialize_member_map(lang) { 
    map = new google.maps.Map(document.getElementById("large-map-canvas"), { 
    center: new google.maps.LatLng(50.85034, 4.35171), 
    zoom: 13, 
    mapTypeId: 'roadmap' 
    }); 
    var infoWindow = new google.maps.InfoWindow; 

    // Change this depending on the name of your PHP file 
    downloadUrl("/ajax/member-xml-output.php?country=BE", function(data) { 
    var xml = data.responseXML; 
    markers = xml.documentElement.getElementsByTagName("marker"); 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < markers.length; i++) { 
     var company = markers[i].getAttribute("company"); 
     var address = markers[i].getAttribute("address"); 
     var type = markers[i].getAttribute("type"); 
     var uid = markers[i].getAttribute("uid"); 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     var html = "<b>" + company + "</b> <br/>" + address; 
     bounds.extend(point); 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     uid: uid 
     }); 
     bindInfoWindow(marker, map, infoWindow, html); 
     company_list += "<div onclick=scrollToMarker(" + i + ")>"+company+"</div>"; 
    }  
    map.setCenter(bounds.getCenter()); 
    map.fitBounds(bounds); 
    //display company data in html 
    document.getElementById("company_list").innerHTML = company_list; 
    }); 

} 

function scrollToMarker(index) { 
    map.panTo(markers[index].getPosition()); 
} 

function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 

    request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request, request.status); 
    } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
} 
function doNothing(){ 
} 

Answer 1

आप सही रास्ते पर हैं। आपको बस अपने मार्कर ऑब्जेक्ट्स के लिए एक अलग वैश्विक सरणी बनाने की आवश्यकता है और इस सरणी में सभी बनाए गए मार्करों को धक्का दें। जब आप अपने सभी कंपनी डेटा को एचटीएमएल में लिखते हैं तो क्लिक पर निष्पादित मार्कर की अनुक्रमणिका के साथ एक कॉल शामिल है। नीचे एक उदाहरण कोड है। मैंने जेएसओएन को एक्सएमएल की बजाय कंपनी की जानकारी रखने के लिए अपनी डेटा संरचना के रूप में इस्तेमाल किया।

<html> 
 
<head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> 
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
 
    <title>Google Maps Scroll to Marker</title> 
 

 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 

 
</head> 
 
<body onload="initialize()"> 
 

 
    <div id="map_canvas" style="width: 900px;height: 600px;"></div> 
 
    <div id="companies"></div> 
 
    <script type="text/javascript"> 
 
     var map; 
 
     //JSON of company data - equivalent of your XML 
 
     companies = { 
 
      "data": [ 
 
      { 
 
       "name": "Company 1", 
 
       "lat": 42.166, 
 
       "lng": -87.848 
 
      }, 
 
      { 
 
       "name": "Company 2", 
 
       "lat": 41.8358, 
 
       "lng": -87.7128 
 
      }, 
 
      { 
 
       "name": "Company 3", 
 
       "lat": 41.463, 
 

 
       "lng": -88.870 
 
      }, 
 
      {"name":"Company 4", 
 
      "lat":41.809, "lng":-87.790} \t \t 
 
      ] 
 
     } 
 
     //we will use this to store google map Marker objects 
 
     var markers=new Array(); 
 
     function initialize() { 
 
      var chicago = new google.maps.LatLng(41.875696,-87.624207); 
 
      var myOptions = { 
 
       zoom: 9, 
 
       center: chicago, 
 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
 
      } 
 
      map = new google.maps.Map(document.getElementById("map_canvas"), 
 
       myOptions); 
 
      listCompanies(); 
 
     } \t \t 
 

 
     function listCompanies() { 
 
      html = "" 
 
     //loop through all companies 
 
     for (i=0;i<companies.data.length;i++) { 
 
     //get the maker postion 
 
     lat = companies.data[i].lat 
 
     lng = companies.data[i].lng 
 

 
     //add google maps marker 
 
     marker = new google.maps.Marker({ 
 
      map:map, 
 
      position: new google.maps.LatLng(lat,lng), 
 
      title: companies.data[i].name 
 
     }) 
 
     markers.push(marker); 
 
     html += "<div onclick=scrollToMarker(" + i + ")>"+companies.data[i].name+"</div>"; 
 
     } 
 
     //display company data in html 
 
     document.getElementById("companies").innerHTML =html; 
 
     } 
 

 
     function scrollToMarker(index) { 
 
      map.panTo(markers[index].getPosition()); 
 
     } 
 
</script> 
 

 
</body> 
 
</html>

ठीक है, मैं आप के लिए एक और समाधान जोड़ा - अपने कोड uising। जानकारी विंडो खोलने और मार्कर पर स्क्रॉल करने के लिए डीओएम (एचटीएमएल) पर क्लिक करने के लिए यह आपके bindInfWindow फ़ंक्शन का उपयोग करता है। कृपया ध्यान दें कि क्योंकि आप कंपनियां गतिशील रूप से divs (या कुछ अन्य टैग) लोड कर रहे हैं जो उनके नाम और आईडी को रोकते हैं, इससे पहले कि आप इसे बाध्यकारी ईवेंट शुरू कर दें - तो पहले फ़ंक्शन को निष्पादित करने की आवश्यकता है जो कंपनियां प्रदान करता है एचटीएमएल (नक्शा init नहीं)। कृपया ध्यान दें मैं अपने डेटा की जरूरत नहीं है के रूप में मैं इस एक परीक्षण नहीं किया ..

//you must write out company divs first 

<body onload="showCompanies()"> 



<script> 
//JavaScript Document 
var map; 
//this is your text data 
var markers = new Array(); 


//you need to create your company list first as we will be binding dom events to it so it must exist before marekrs are initialized 
function showCompanies() { 
downloadUrl("/ajax/member-xml-output.php?country=BE", function(data) { 
    var xml = data.responseXML; 
    markers = xml.documentElement.getElementsByTagName("marker"); 

    for (var i = 0; i < markers.length; i++) { 
     var company = markers[i].getAttribute("company"); 

     markerId = "id_"+i; 

     company_list += "<div id="+markerId+">"+company+"</div>"; 
    }  

    //display company data in html 
    document.getElementById("company_list").innerHTML = company_list; 

    //now you are ready to initialize map 
    initialize_member_map("lang") 
    }); 
} 

function initialize_member_map(lang) { 
    map = new google.maps.Map(document.getElementById("large-map-canvas"), { 
    center: new google.maps.LatLng(50.85034, 4.35171), 
    zoom: 13, 
    mapTypeId: 'roadmap' 
    }); 




    var xml = data.responseXML; 

    var bounds = new google.maps.LatLngBounds(); 
    //your company data was read in and is ready to be mapped 
    for (var i = 0; i < markers.length; i++) { 
     var infoWindow = new google.maps.InfoWindow; 
     var company = markers[i].getAttribute("company"); 
     var address = markers[i].getAttribute("address"); 
     var type = markers[i].getAttribute("type"); 
     var uid = markers[i].getAttribute("uid"); 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     var html = "<b>" + company + "</b> <br/>" + address; 
     bounds.extend(point); 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     uid: uid 
     }); 
     //add the new marker object to the gMarkers array 

     markerId = "id_"+i; 
     bindInfoWindow(marker, map, infoWindow, html,markerId); 

    }  
    map.setCenter(bounds.getCenter()); 
    map.fitBounds(bounds); 


} 

function scrollToMarker(index) { 
    map.panTo(markers[index].getPosition()); 
} 

function bindInfoWindow(marker, map, infoWindow, html, markerId) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
    //bind onlcick events to the div or other object in html 
    markerObj = document.getElementById(markerId); 
    //you can create DOM event listeners for the map 
    google.maps.event.addDomListener(markerObj, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    map.panTo(marker.getPosition()); 
    }); 

} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 

    request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request, request.status); 
    } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
} 
function doNothing(){ 
} 

</script> 

Answer 2

के बाद से मैं इस सवाल का जवाब नहीं निकाल सकते, मैं कुछ नोट जोड़ने का निर्णय लिया!

अगर अपने xml प्रारूप इस के समान है: http://www.w3schools.com/dom/books.xml

आप निम्नलिखित लाइनों के साथ लेखक nodeValue पहुंच सकते हैं।

markers = xml.documentElement.getElementsByTagName("book"); 

for (var i = 0; i < markers.length; i++) { 
    authors = markers[i].getElementsByTagName('author')[0].innerHTML; 
} 

आशा है कि यह मदद करता है किसी को :)