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; 

working example


Comments

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

.htaccess - Matching full URL in RewriteCond -