javascript - How do I geocode multiple fields? -
i trying create form geocode google map. have basic code map api, works 1 field: 'address'.
instead of using 'getelementbyid', using 'getelementbyclassname' might use data of fields have set up.
that said, isn't working. going in right direction using class instead of id?
below code i;m working with. api-key omitted.
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=mykey=false"> </script> <script type="text/javascript"> var geocoder; var map; function initialize() { geocoder = new google.maps.geocoder(); var latlng = new google.maps.latlng(39.861933, -83.067746); var mapoptions = { zoom: 3, center: latlng, maptypeid: google.maps.maptypeid.roadmap } map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); } function codeaddress() { var address = document.getelementbyid('address').value; 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}, function(results, status) { if (status == google.maps.geocoderstatus.ok) { map.setcenter(results[0].geometry.location); var marker = new google.maps.marker({ map: map, position: results[0].geometry.location }); } else { alert('geocode not successful following reason: ' + status); } }); } google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body> <div id="panel"> <form action="" name="" method="post"> <input id="address" type="hidden" value=""> <input id="street_add" type="textbox" value="" class="address"> <input id="city" type="textbox" value="" class="address"> <input id="state" type="textbox" value="" class="address"> <input id="postcode" type="textbox" value="" class="address"> <input id="country" type="textbox" value="" class="address"> <input type="button" value="geocode" onclick="codeaddress()"> </form> </div> <div id="map-canvas" style="height:40%;top:30px;"></div> </body> </html>
the geocoder takes single string representing address. not creating that, passing undefined value (there no getelementbyclassname, getelementsbyclassname , returns array of html elements)
combine separate values single string:
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;
Comments
Post a Comment