javascript - Geocode two or more addresses -


i'm interested in geocode addresses client-side https://developers.google.com/maps/articles/geocodestrat#client found piece of code in website http://opengeocode.org/tutorials/googlemap/googlemaps_6.php#example_6 , tried modify in order achieve aim. problem first address. what's wrong?

    <!doctype html> <html> <head>     <title>google map template geocoded address</title>     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>    <!-- google maps api -->     <script>     var map;    // google map object      // initialize , display google map     function init()     {         // create google coordinate object center map         var latlng = new google.maps.latlng( 38.8951, -77.0367 );   // washington, dc          // map options how display google map         var mapoptions = { zoom: 12, center: latlng  };          // show google map in div attribute id 'map-canvas'.         map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions);     }      // update google map user's inputted address     function updatemap( )     {         var geocoder = new google.maps.geocoder();    // instantiate geocoder object         var destinationgeocoder = new google.maps.geocoder();           // user's inputted address         var address = document.getelementbyid( "address" ).value;         var destination = document.getelementbyid( "destination" ).value;          // make asynchronous call google geocoding api         geocoder.geocode( { 'address': address }, function(results, status) {             var addr_type = results[0].types[0];    // type of address inputted geocoded             if ( status == google.maps.geocoderstatus.ok )                  showlocation( results[0].geometry.location, address, addr_type );             else                      alert("geocode not successful following reason: " + status);                 });          destinationgeocoder.geocode( { 'destination': destination }, function(results, status) {             var addr_type = results[0].types[0];    // type of address inputted geocoded             if ( status == google.maps.geocoderstatus.ok )                  showlocation( results[0].geometry.location, destination, addr_type );             else                      alert("geocode not successful following reason: " + status);                 });     }      // show location (address) on map.     function showlocation( latlng, add, addr_type )     {         // center map @ specified location         map.setcenter( latlng );          // set zoom level according address level of detail user specified         var zoom = 12;         switch ( addr_type )         {         case "administrative_area_level_1"  : zoom = 6; break;      // user specified state         case "locality"                     : zoom = 10; break;     // user specified city/town         case "street_address"               : zoom = 15; break;     // user specified street address         }         map.setzoom( zoom );          // place google marker @ same location map center          // when hover on marker, display title         var marker = new google.maps.marker( {              position: latlng,                  map: map,                   title: address         });          // create infowindow marker         var contentstring = "" + address + "";  // html text display in infowindow         var infowindow = new google.maps.infowindow( { content: contentstring } );          // set event display infowindow anchored marker when marker clicked.         google.maps.event.addlistener( marker, 'click', function() { infowindow.open( map, marker ); });     }      // call method 'init()' display google map when web page displayed ( load event )     google.maps.event.adddomlistener( window, 'load', init );      </script>     <style>     /* style settings google map */     #map-canvas     {         width : 500px;  /* map width */         height: 500px;  /* map height */     }     </style> </head> <body>      <!-- dislay google map here -->     <div id='map-canvas' ></div><br/>     <div>         <label for="address"> address:</label>         <input type="text" id="address"/>         <label for="destination"> destination:</label>         <input type="text" id="destination"/>         <button onclick="updatemap()">locate</button>     </div> </body> </html> 

moreover: if swap 2 geocode function don't result, can't explain why

there mistake in code in destinationgeocoder must use address instead of destination geocode property address

 destinationgeocoder.geocode( { 'address': destination }, function(results, status) {         var addr_type = results[0].types[0];    // type of address inputted geocoded         if ( status == google.maps.geocoderstatus.ok )              showlocation( results[0].geometry.location, destination, addr_type );         else                  alert("geocode not successful following reason: " + status);             }); 

Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -