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
Post a Comment