javascript - Div Layer shows on map, but corresponding NAME, is not displaying -
i can't believe here again, thought had page sorted.
i have taken geocodezip's page (http://www.geocodezip.com/v3_fusiontables_geocoder_pointinpolygonchicago.html), , modified (well thought had done all).
i trying use table instead of original chicago neighborhoods, can't find missing have return 'name' column table, original does
i have looked @ fusion table in original page, ensure table had same column headings, one's thought used. map displays geometry layers not returning corresponding 'name' can't find in code needs changed have small table @ moment, once working, able functional.
my table: https://www.google.com/fusiontables/datasource?docid=1oglrsle3rfqwrt3g7exhtqjxkdwuhh97xdqhtuw
here code:
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>google maps javascript api v3 example: geocoding simple</title> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? sensor=false"></script> <script type="text/javascript"> var tableid = '1oglrsle3rfqwrt3g7exhtqjxkdwuhh97xdqhtuw'; var geocoder = null; var map = null; var layer = null; var marker = null; var address = '509 e 47th st, chicago, il 60653'; function codeaddress() { var address = document.getelementbyid('street_add').value; address += " "+document.getelementbyid('city').value; address += " "+document.getelementbyid('state').value; address += " "+document.getelementbyid('postcode').value; address += " "+document.getelementbyid('country').value; geocoder.geocode( { 'address': address}, geocodercallback ); } function initialize() { var myoptions = { zoom: 13, maptypeid: google.maps.maptypeid.roadmap } map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); google.maps.event.addlistener(map, 'click', function(e) { geocoder.geocode( { 'location': e.latlng}, geocodercallback); }); geocoder = new google.maps.geocoder(); geocoder.geocode( { 'address': address}, geocodercallback); } function displayneighborhood(address) { (p = address.length-1; p >= 0; p--) { if (address[p].types.indexof("neighborhood") != -1) { document.getelementbyid('neighborhood').innerhtml= address[p].long_name; } } } function geocodercallback (results, status) { document.getelementbyid('neighborhood').innerhtml=""; if (status == google.maps.geocoderstatus.ok) { map.setcenter(results[0].geometry.location); var lat = results[0].geometry.location.lat(); var lng = results[0].geometry.location.lng(); if (marker) marker.setmap(null); marker = new google.maps.marker({ map: map, position: results[0].geometry.location }); displayneighborhood(results[0].address_components); if (!layer) { layer = new google.maps.fusiontableslayer({ query: { select: 'geometry', from: tableid, where: 'st_intersects(geometry, circle(latlng(' + lat + ', ' + lng + '),1))', limit: 1 } }); layer.setmap(map); } else { layer.setoptions({ query: { select: 'geometry', from: tableid, where: 'st_intersects(geometry, circle(latlng(' + lat + ', ' + lng + '),1))', limit: 1 } }); } } else { alert("geocode not successful following reason: " + status); } }; </script> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function () { var str = $('#neighborhood').text(); $('#area').val(str); }); </script> <script language="javascript"> function readtext (form) { testvar =$('#neighborhood').text(); alert ("you typed: " + testvar); } function writetext (form) { form.area.value =$('#neighborhood').text(); } </script> </head> <body onload="initialize()"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20"><form name="a"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="18%">unit / office:</td> <td width="82%"><label for="aunit"></label> <input type="text" name="aunit" id="aunit" onblur="document.main.unit .value = this.value;"></td> </tr> <tr> <td>street number:</td> <td><input name="anumber" type="textbox" class="address" id="street_add" value="532 beacon st" onblur="document.main.number .value = this.value;"></td> </tr> <tr> <td>street:</td> <td><input name="astreet" type="textbox" class="address" id="city" value="boston" onblur="document.main.street .value = this.value;"></td> </tr> <tr> <td>post code:</td> <td><input name="apcode" type="textbox" class="address" id="country" value="" onblur="document.main.postcode .value = this.value;"></td> </tr> <tr> <td>suburb:</td> <td><input name="asuburb" type="textbox" class="address" id="state" value="ma" onblur="document.main.suburb .value = this.value;"></td> </tr> <tr> <td>state</td> <td><label for="state"></label> <select name="astate" class="address" id="postcode" onblur="document.main.state .value = this.value;codeaddress();"> <option>select state</option> <option value="qld">queensland</option> <option value="act">australian capital territory</option> <option value="nsw">new south wales</option> <option value="nt">northern territory</option> <option value="sa">south australia</option> <option value="tas">tasmania</option> <option value="vic">victoria</option> <option value="wa">western australia</option> </select></td> </tr> <tr> <td> </td> <td> </td> </tr> </table> <br> </form></td> </tr> <tr> <td> </td> </tr> </table></td> </tr> </table> <div id="map_canvas" style="height: 250px; width: 250px;"></div> <b>neighborhood:</b> <div class="neighborhood" id="neighborhood"></div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "ua-162157-1"; urchintracker(); </script><br><form action="" method="post" name="main" id="main"> <input type="button" name="button2" value="confirm address" onclick="writetext(this.form)"><p> <label for="unit2"></label> hidden fields <br> area <input type="text" name="area" value=""> unit <input type="text" name="unit" id="unit"> no <label for="number"></label> <input type="text" name="number" id="number"> street <label for="street"></label> <input type="text" name="street" id="street"> <label for="suburb"></label> suburb <input type="text" name="suburb" id="suburb"> <label for="state"></label> state <input type="text" name="state" id="state"> <label for="postcode"></label> post <input type="text" name="postcode" id="postcode"> <label for="supportarea"></label> </form> <br> </body> </html> any appreciated, again.
Comments
Post a Comment