How can extract locations values from a dropdown menu that use geonames webservice for build a updated google map -
i have dropdown menu show list of country/state/city in hierarchy using geonames webservice when select location in dropdown menu should automatically update googlemap in div under menu , zoom location. how can extract locations dropdown menu build google map locations based ? menu code following:
<script type="text/javascript" src="http://vikku.info/programming/js/geodata-jsr-class.js"></script> <script type="text/javascript"> var whos=null; function getplaces(gid,src) { whos = src // var request = "http://ws.geonames.org/childrenjson?geonameid="+gid+"&callback=getlocation&style=long"; var request = "http://www.geonames.org/childrenjson?geonameid="+gid+"&callback=listplaces&style=long"; aobj = new jsonscriptrequest(request); aobj.buildscripttag(); aobj.addscripttag(); } function listplaces(jdata) { counts = jdata.geonames.length<jdata.totalresultscount ? jdata.geonames.length : jdata.totalresultscount = document.getelementbyid(whos) who.options.length = 0; if(counts)who.options[who.options.length] = new option('select','') else who.options[who.options.length] = new option('no data available','null') for(var i=0;i<counts;i++) who.options[who.options.length] = new option(jdata.geonames[i].name,jdata.geonames[i].geonameid) delete jdata; jdata = null } window.onload = function() { getplaces(6295630,'continent'); } </script> <div class='main'> <h1></h1> <form id="myform" > <div class="contents"> <b>*select area</b> <p><span>continent:</span> <select name="continent" id="continent" onchange="getplaces(this.value,'country');"> <option value=""></option> </select> </p> <p><span>country:</span> <select name="country" id="country" onchange="getplaces(this.value,'province');"> <option value=""></option> </select> </p> <p><span>state / provice:</span> <select name="province" id="province" onchange="getplaces(this.value,'region')"> <option value=""></option> </select> </p> <p><span>county / region:</span> <select name="region" id="region" onchange="getplaces(this.value,'city')"> <option value=""></option> </select> </p> <p><span>city:</span> <select name="city" id="city"> <option value=""></option> </select> </p> </div> </form> here working demo of menu: http://liveweave.com/6dfhn3
the geonames service provides coordinates. zooming map correctly tricky part. fiddle below uses google maps geocoder zoom levels (not geonames "names" can found geocoder).
var whos = null; var placedata = []; var map; var geocoder = new google.maps.geocoder(); function getplaces(gid, src) { if ( !! placedata[gid]) { map.setcenter({ lat: parsefloat(placedata[gid].lat), lng: parsefloat(placedata[gid].lng) }); switch (src) { case "continent": map.setzoom(3); break; case "country": map.setzoom(5); break; case "province": map.setzoom(6); break; case "region": map.setzoom(7); break; case "city": map.setzoom(8); break; } } whos = src; var request = "http://www.geonames.org/childrenjson?geonameid=" + gid + "&callback=listplaces&style=long"; aobj = new jsonscriptrequest(request); aobj.buildscripttag(); aobj.addscripttag(); } function listplaces(jdata) { counts = jdata.geonames.length < jdata.totalresultscount ? jdata.geonames.length : jdata.totalresultscount; = document.getelementbyid(whos); who.options.length = 0; if (counts) who.options[who.options.length] = new option('select', ''); else who.options[who.options.length] = new option('no data available', 'null'); (var = 0; < counts; i++) { who.options[who.options.length] = new option(jdata.geonames[i].name, jdata.geonames[i].geonameid); placedata[jdata.geonames[i].geonameid] = jdata.geonames[i]; } delete jdata; jdata = null; } function zoomto(gid) { if ( !! placedata[gid]) { map.setcenter({ lat: parsefloat(placedata[gid].lat), lng: parsefloat(placedata[gid].lng) }); map.setzoom(14); } } window.onload = function () { getplaces(6295630, 'continent'); map = new google.maps.map(document.getelementbyid('map_canvas'), { zoom: 3, center: { lat: 0, lng: 0 } }); };html, body, #map_canvas { height: 500px; width: 500px; margin: 0px; padding: 0px }<script src="http://vikku.info/programming/js/geodata-jsr-class.js"></script> <script src="https://maps.googleapis.com/maps/api/js"></script> <div class='main'> <h1></h1> <form id="myform"> <div class="contents"> <b>*select area</b> <p><span>continent:</span> <select name="continent" id="continent" onchange="getplaces(this.value,'country');"> <option value=""></option> </select> </p> <p><span>country:</span> <select name="country" id="country" onchange="getplaces(this.value,'province');"> <option value=""></option> </select> </p> <p><span>state / provice:</span> <select name="province" id="province" onchange="getplaces(this.value,'region')"> <option value=""></option> </select> </p> <p><span>county / region:</span> <select name="region" id="region" onchange="getplaces(this.value,'city')"> <option value=""></option> </select> </p> <p><span>city:</span> <select name="city" id="city" onchange="zoomto(this.value)"> <option value=""></option> </select> </p> </div> </form> <div id="map_canvas"></div>
Comments
Post a Comment