javascript - Google Maps API V3 - Dynamically change InfoBox backgroundColor by Dropdown list -
i trying dynamically change infobox backgroundcolor using dropdown list (i use infobox create map labels). employ google.maps.event.adddomlistener, values not returns. code below, know error?
code inside javascript display labels:
function displaynametext(response) { if (!response) { alert('no response'); return; } if (response.iserror()) { alert('error in query: ' + response.getmessage() + ' ' + response.getdetailedmessage()); return; } if (map.getzoom() < 9) return; ftresponse = response; numrows = response.getdatatable().getnumberofrows(); numcols = response.getdatatable().getnumberofcolumns(); for(i = 0; < numrows; i++) { var name = response.getdatatable().getvalue(i, 1); var namestr = name.tostring() while (namestr.length < 5) { namestr = '0' + namestr; } var point = new google.maps.latlng( parsefloat(response.getdatatable().getvalue(i, 2)), parsefloat(response.getdatatable().getvalue(i, 3))); labels.push(new infobox({ content: namestr ,boxstyle: { border: "1px solid black" ,textalign: "center" ,backgroundcolor: "#3333ff" ,fontsize: "8pt" ,width: "50px" } ,disableautopan: true ,pixeloffset: new google.maps.size(-25, 0) ,position: point ,closeboxurl: "" ,ishidden: false ,enableeventpropagation: true })); labels[labels.length-1].open(map); google.maps.event.adddomlistener(document.getelementbyid('label'), 'change', function() { var selectedlabel = this.value; infobox.set('backgroundcolor', selectedlabel); }); } code inside body dropdown list:
<select id="label"> <option value="#ffffff">white</option> <option value="#ff0000">red</option> </select> this full code:
<!doctype html public "-//w3c//dtd html 4.01 transitional//en"> <html> <head> <title>usa</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <!--load ajax api--> <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script> <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> <script type="text/javascript" src="http://www.google-analytics.com/urchin.js"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']}); var map; var labels = []; var layer; var tableid = '15dce-frpm_d_5gttg2gkwlwtelkgl7nc1rqdzuy'; function initialize() { geocoder = new google.maps.geocoder(); map = new google.maps.map(document.getelementbyid('map_canvas'), { maptypeid: google.maps.maptypeid.roadmap }); layer = new google.maps.fusiontableslayer(); var countylayeroptions = { styles: [{ where: "pop10 < 10000", polygonoptions: { fillcolor: "#e06464", fillopacity: 0.7, strokecolor: "#333333", strokeopacity: 1.0, strokeweight: 1 } }, { where: "pop10 > 10000 , pop10 < 25000", polygonoptions: { fillcolor: "#e3d72b", fillopacity: 0.7, strokecolor: "#333333", strokeopacity: 1.0, strokeweight: 1 } }, { where: "pop10 > 25000 , pop10 < 50000", polygonoptions: { fillcolor: "#d01a4a", fillopacity: 0.7, strokecolor: "#333333", strokeopacity: 1.0, strokeweight: 1 } }, { where: "pop10 > 50000 , pop10 < 100000", polygonoptions: { fillcolor: "#14505c", fillopacity: 0.7, strokecolor: "#333333", strokeopacity: 1.0, strokeweight: 1 } }, { where: "pop10 > 100000", polygonoptions: { fillcolor: "#14505c", fillopacity: 0.7, strokecolor: "#333333", strokeopacity: 1.0, strokeweight: 1 } }], map: map, query: { select: 'merge of tigerline shape files 2012 , gaz_places_national_2010', from: '15dce-frpm_d_5gttg2gkwlwtelkgl7nc1rqdzuy' } } layer.setoptions(countylayeroptions); layer.setmap(map); createmarkerforlabels(); google.maps.event.addlistener(map, "idle", function() { displaynames(); }); google.maps.event.addlistener(map, "zoom_changed", function() { if (map.getzoom() < 9) { (var i=0; i<labels.length; i++) { labels[i].setmap(null); } } }); google.maps.event.addlistener(layer, 'click', function(e) { //update content of infowindow e.infowindowhtml = '<h3 style="font-family: arial; font-size: 13px; color: #ffffff; background-color: #0099ff; text-align: center; font-style: italic">' + 'incorporated , census designated places' + '<h1 style="font-family: arial; font-size: 12px; color: #333333; background-color: #e2e2e2; text-align: left "> population: ' + e.row['pop10'].value + "<br />"; }); } function createmarkerforlabels() { var address = document.getelementbyid("address").value; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.geocoderstatus.ok) { map.setcenter(results[0].geometry.location); var marker = new google.maps.marker({ position: results[0].geometry.location }); if (results[0].geometry.viewport) map.fitbounds(results[0].geometry.viewport); } else { alert("geocode not successful following reason: " + status); } }); } function displaynames() { //set query using current bounds var querystr = "select geometry, name, intptlat, intptlon "+ tableid + " st_intersects(geometry, rectangle(latlng"+map.getbounds().getsouthwest()+",latlng"+map.getbounds().getnortheast()+"))"; var querytext = encodeuricomponent(querystr); var query = new google.visualization.query('http://www.google.com/fusiontables/gvizdata?tq=' + querytext); //set callback function query.send(displaynametext); } var infowindow = new google.maps.infowindow(); function displaynametext(response) { if (!response) { alert('no response'); return; } if (response.iserror()) { alert('error in query: ' + response.getmessage() + ' ' + response.getdetailedmessage()); return; } if (map.getzoom() < 9) return; ftresponse = response; numrows = response.getdatatable().getnumberofrows(); numcols = response.getdatatable().getnumberofcolumns(); for(i = 0; < numrows; i++) { var name = response.getdatatable().getvalue(i, 1); var namestr = name.tostring() while (namestr.length < 5) { namestr = '0' + namestr; } var point = new google.maps.latlng( parsefloat(response.getdatatable().getvalue(i, 2)), parsefloat(response.getdatatable().getvalue(i, 3))); labels.push(new infobox({ content: namestr ,boxstyle: { border: "1px solid black" ,textalign: "center" ,backgroundcolor:"white" ,fontsize: "8pt" ,width: "50px" } ,disableautopan: true ,pixeloffset: new google.maps.size(-25, 0) ,position: point ,closeboxurl: "" ,ishidden: false ,enableeventpropagation: true })); labels[labels.length-1].open(map); google.maps.event.adddomlistener(document.getelementbyid('label'), 'change', function() { var selectedlabel = this.value; infobox.set('backgroundcolor', selectedlabel); }); } } </script> <body onload="initialize();"> <form> <div id="panel" style="position:absolute; left:50%; top:0px; width:900px; height:30px; z-index:2; margin-left: -450px; visibility: hidden;"><input id="address" type="text" value="usa" ></input></div> <div id="map_canvas" style="position:absolute; left:50%; top:30px; width:900px; height:700px; z-index:1; margin-left: -450px;"></div> <div> <label>label:</label> <select id="label"> <option value="#ffffff">white</option> <option value="#ff0000">red</option> </select> </div> </body> </html>
you must set background of instances of infobox.
as there many infoboxes, suggest approach, don't need iterate on infoboxes:
change dropdown this:
<select id="label"> <option value="white">white</option> <option value="red">red</option> </select> and modify change-listener into:
google.maps.event.adddomlistener(document.getelementbyid('label'), 'change', function() { map.getdiv().classname=this.value }); additionally need little bit of css:
#map_canvas.red .infobox{background:red !important} the change-function set classname of #map_canvas , red(or other) background applied infobox-instances.
Comments
Post a Comment