javascript - Open infoWindow of specific marker from outside Google Maps (V3) -
i can't seem head around problem:
i've got map (a lot of) markers (companies) come generated xml file. below map, want show (non-javascript-generated) list of companies displayed on map. when click company in list, map pan specific marker , open infowindow. thing want map , list 2 separate things...
what right way tackle problem? thanks! important markerinfo dynamic...
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(); (var = 0; < 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 // experiments, wanted use 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() {} following suggestions michal, i've tried following, encountering 2 problems: console tells me markers[index].getposition not function , first item in list shows undefined. can please help?
//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 depending on name of 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(); (var = 0; < 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(" + + ")>"+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(){ }
you on right track. need create separate global array marker objects , push created markers array. when write out company data html include call index of marker executed on click. below example code. used json data structure hold company info instead of xml.
<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 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 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} ] } //we use 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(); } function listcompanies() { html = "" //loop through companies (i=0;i<companies.data.length;i++) { //get 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(" + + ")>"+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> ok added solution - uising code. 1 uses bindinfwindow function bind dom (html) click event open info window , scroll marker. please note because loading companies dynamically divs (or other tags) hold names , ids must exist in dom before start binding events - first function need execute 1 renders companies html (not map init). please note have not tested 1 not have data..
//you must write out company divs first <body onload="showcompanies()"> <script> //javascript document var map; //this text data var markers = new array(); //you need create company list first binding dom events must exist before marekrs initialized function showcompanies() { downloadurl("/ajax/member-xml-output.php?country=be", function(data) { var xml = data.responsexml; markers = xml.documentelement.getelementsbytagname("marker"); (var = 0; < 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 ready 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 read in , ready mapped (var = 0; < 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 new marker object 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 div or other object in html markerobj = document.getelementbyid(markerid); //you can create dom event listeners 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>
Comments
Post a Comment