Jump to content
alakbd

Google map "Search box" for address

Recommended Posts

Hi All, I was wondering if this is possible to add text search box for the address in google map? I was trying my self and tried with no success.If any one of you know about this then plz let me know. Here is my code <input type="text" id="search_address" value="" size="98"/> <button onclick="search();">Search</button> <div id="mapCanvas" style="width:100%; height:100%; min-width:300px; min-height:300px"></div><script type="text/javascript">// initialize the google Maps function initializeGoogleMap() {// set latitude and longitude to center the map aroundvar latlng = new google.maps.LatLng(37.77,-122.4);// set up the default optionsvar myOptions = {zoom: 8,center: latlng,navigationControl: true,navigationControlOptions:{style: google.maps.NavigationControlStyle.DEFAULT,position: google.maps.ControlPosition.TOP_LEFT },mapTypeControl: true,mapTypeControlOptions:{style: google.maps.MapTypeControlStyle.DEFAULT,position: google.maps.ControlPosition.TOP_RIGHT },scaleControl: true,scaleControlOptions: {position: google.maps.ControlPosition.BOTTOM_LEFT},mapTypeId: google.maps.MapTypeId.ROADMAP,draggable: true,disableDoubleClickZoom: false,keyboardShortcuts: true};var map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);if (true) {var trafficLayer = new google.maps.TrafficLayer();trafficLayer.setMap(map);}if (true) {var bikeLayer = new google.maps.BicyclingLayer();bikeLayer.setMap(map);}if (true) {addMarker(map,37.7715,-122.4,"We are here");}}window.onload = initializeGoogleMap();// Add a marker to the map at specified latitude and longitude with tooltipfunction addMarker(map,lat,long,titleText) {var markerLatlng = new google.maps.LatLng(lat,long);var marker = new google.maps.Marker({position: markerLatlng,map: map,title:"We are here",icon: ""});}

Share this post


Link to post
Share on other sites

Something like that will work. You might want to wrap in something. You have to write your search function next. Hows that coming?

Share this post


Link to post
Share on other sites

what's the issue?

Share this post


Link to post
Share on other sites

To have functionality you have to have a function. Please post your code for search()

Share this post


Link to post
Share on other sites

Sorry for late reply,I was very busy. Here is my search function code. var addressField = document.getElementById('search_address');var geocoder = new google.maps.Geocoder();function search() { geocoder.geocode( {'address': addressField.value}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var loc = results[0].geometry.location; // use loc.lat(), loc.lng() } else { alert("Not found: " + status); } } );};

Share this post


Link to post
Share on other sites

lets map be a public variableyour search function maybe like this

function search() {var searchText = document.getElementById('search_address');if (searchText != '') {  geocoder.geocode({   address: searchText  }, function (results, status) {   if (status == google.maps.GeocoderStatus.OK) {    var viewport = results[0].geometry.viewport;    var location = results[0].geometry.location;    if (viewport) {	 map.fitBounds(viewport);    } else {	 map.setCenter(location);    }   }  });}}

Share this post


Link to post
Share on other sites

<input type="text" id="search_address" value="" size="98"/> <button onclick="search();">Search</button> < div id="mapCanvas" style="width:100%; height:100%; min-width:300px; min-height:300px"></div>< script type="text/javascript">// initialize the google Mapsfunction initializeGoogleMap() {// set latitude and longitude to center the map aroundvar latlng = new google.maps.LatLng(37.77,-122.4);// set up the default optionsvar myOptions = {zoom: 8,center: latlng,navigationControl: true,navigationControlOptions:{style: google.maps.NavigationControlStyle.DEFAULT,position: google.maps.ControlPosition.TOP_LEFT },mapTypeControl: true,mapTypeControlOptions:{style: google.maps.MapTypeControlStyle.DEFAULT,position: google.maps.ControlPosition.TOP_RIGHT },scaleControl: true,scaleControlOptions: {position: google.maps.ControlPosition.BOTTOM_LEFT},mapTypeId: google.maps.MapTypeId.ROADMAP,draggable: true,disableDoubleClickZoom: false,keyboardShortcuts: true};var map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);if (true) {var trafficLayer = new google.maps.TrafficLayer();trafficLayer.setMap(map);}if (true) {var bikeLayer = new google.maps.BicyclingLayer();bikeLayer.setMap(map);}if (true) {addMarker(map,37.7715,-122.4,"We are here");}}window.onload = initializeGoogleMap();// Add a marker to the map at specified latitude and longitude with tooltipfunction addMarker(map,lat,long,titleText) {var markerLatlng = new google.maps.LatLng(lat,long);var marker = new google.maps.Marker({position: markerLatlng,map: map,title:"We are here",icon: ""});}function search() {var searchText = document.getElementById('search_address');if (searchText != '') { geocoder.geocode({ address: searchText}, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { var viewport = results[0].geometry.viewport; var location = results[0].geometry.location; if (viewport) { map.fitBounds(viewport); } else { map.setCenter(location); } } });}}</script> So you are saying it will be something like this. But I am not sure if I have to wrap this. Because when I enter an address(e.g: United Kingdom) and press "serach", it doesnt take me to the UK map. It works only zoom in and zoom out by cursor.

Share this post


Link to post
Share on other sites

Sorry, I forgot '.value' -> document.getElementById('search_address').value :facepalm:

<!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 type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>    <script type="text/javascript">  var map;  var geocoder = new google.maps.Geocoder();	 function initialize() {  var latlng = new google.maps.LatLng(37.77, -122.4);  // set up the default options  var myOptions = {   zoom: 8,   center: latlng,   navigationControl: true,   navigationControlOptions:   {style: google.maps.NavigationControlStyle.DEFAULT,   position: google.maps.ControlPosition.TOP_LEFT },   mapTypeControl: true,   mapTypeControlOptions:   {style: google.maps.MapTypeControlStyle.DEFAULT,   position: google.maps.ControlPosition.TOP_RIGHT },   scaleControl: true,   scaleControlOptions: {   position: google.maps.ControlPosition.BOTTOM_LEFT   },   mapTypeId: google.maps.MapTypeId.ROADMAP,   draggable: true,   disableDoubleClickZoom: false,   keyboardShortcuts: true  };  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  if (true) {   var trafficLayer = new google.maps.TrafficLayer();   trafficLayer.setMap(map);  }  if (true) {   var bikeLayer = new google.maps.BicyclingLayer();   bikeLayer.setMap(map);  }  if (true) {   addMarker(map,37.7715,-122.4,"We are here");  }	  }  function search() {  var searchText = document.getElementById('search_address').value;  if (searchText != '') {   geocoder.geocode({    address: searchText   }, function (results, status) {    if (status == google.maps.GeocoderStatus.OK) {	 var viewport = results[0].geometry.viewport;	 var location = results[0].geometry.location;	 if (viewport) {	  map.fitBounds(viewport);	 } else {	  map.setCenter(location);	 }    }   });  }}  function addMarker(map,lat,long,titleText) {  var markerLatlng = new google.maps.LatLng(lat,long);  var marker = new google.maps.Marker({   position: markerLatlng,   map: map,   title:"We are here",   icon: ""  });}  </script>  </head>  <body onload="initialize()">    <div id="map_canvas" style="width:100%; height:100%"></div><input type="text" id="search_address" value="" size="98"/><button onclick="search();">Search</button>  </body></html>

Edited by smiles

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×