Link to JSFiddle
To implement this feature, you will need to utilize geocoding service. Here is an example of how it can be achieved:
HTML
<input id="address" value="Volgograd, Mamayev Kurgan" /><button type="button" onclick="geocode();">Search</button><button type="button" onclick="searchWithoutGmap();">Search without GMap</button>
<div id="map"></div>
<div id="output"></div>
CSS
div#map {
width: 400px;
height: 300px;
}
JS
var map;
var marker;
var geocoder;
$( function() {
map = new google.maps.Map( $( "div#map" )[ 0 ], {
center: new google.maps.LatLng( 48.7, 44.516 ),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
} );
geocoder = new google.maps.Geocoder();
} );
function geocode() {
var address = $( "input#address" ).val();
geocoder.geocode( { 'address': address }, function ( results, status ) {
if ( status == google.maps.GeocoderStatus.OK ) {
// handle the results accordingly
console.log( results );
// move to the first result
map.panTo( results[ 0 ].geometry.location );
// display or update marker
if ( marker ) {
marker.setPosition( results[ 0 ].geometry.location );
} else {
marker = new google.maps.Marker( {
position: results[ 0 ].geometry.location,
map: map
} );
}
// adjust zoom level
zoomToPan(16);
} else if ( status == google.maps.GeocoderStatus.ZERO_RESULTS ) {
alert( "Zero results." );
}
} );
}
function zoomToPan( level_to ) {
var zoom = map.getZoom();
if ( level_to != zoom ) {
setTimeout( function( current_level_to, current_zoom ){
return function(){
if ( current_level_to < current_zoom ) {
map.setZoom( current_zoom - 1 );
zoomToPan( current_level_to );
} else {
map.setZoom( current_zoom + 1 );
zoomToPan( current_level_to );
}
}
}( level_to, zoom ), 80 );
}
}
function searchWithoutGmap() {
var address = $( "input#address" ).val();
var format = "json";// xml
var url = "http://maps.googleapis.com/maps/api/geocode/" + format + "?" + "sensor=false&address=" + address;
$.ajax( {
url: url,
crossDomain: true,
dataType: "json",
success: function( data, textStatus, jqXHR ) {
$( "div#output" ).html( JSON.stringify( data ) );
}
} );
}