Google map "Search box" for address

[alakbd]

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: ""});}

[niche]

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

[thescientist]

what's the issue?

[alakbd]

Hi,I am sorry to say I was looking at serch functionality that I couldnt sort out. My search funtionality didnt work and doesnt work.

[niche]

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

[alakbd]

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); } } );};

[smiles]

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);    }   }  });}}

[alakbd]

<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.

[alakbd]

Guys,Any solution for this. I was trying and couldnt get it done!!

[smiles]

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

<!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 October 1, 2012 by smiles