Google Map Instant Search with simple JQuery and j-son script, by using Google's API and by using instant search function keyup(function(e))
Instant search shows results as you type. It is a faster way to search as your results nearly always appear before you have finished typing.
As you type into a search bar it starts recommending locations based on what you are typing and centre on the map on that location. The recommended locations appear beside the search box. The map will nearly always centre on your desired location before you have actually typed in the entire name of the location.
Google Map Instant Search Preview
Instant search shows results as you type. It is a faster way to search as your results nearly always appear before you have finished typing.
As you type into a search bar it starts recommending locations based on what you are typing and centre on the map on that location. The recommended locations appear beside the search box. The map will nearly always centre on your desired location before you have actually typed in the entire name of the location.
<!DOCTYPE html created my Sandeep Mittal>
<html>
<head>
<title>Google Instant Map Search</title>
<link type="text/css" href="http://cdn.qtimg.com/css/jquery-ui-1.8.4.custom_toolbar.css" rel="stylesheet" />
</head>
<body>
<div id="search" style="padding: 5px;">
Google Instant Map Search :
<input type="text" id="address" style="width: 500px;" />
</div>
<div id="map_canvas" style="height: 500px; width: 900px">
</div>
<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAKAqAId-z4dpNB0txHVU_TRSdIo_h9adg_WTTpw2CoBgzP7rIUxRnKu-u9D1O2d2mEH6cCOw-B33tRQ"></script>
<script type="text/javascript">
google.load("jquery", "1.4.3");
google.load("jqueryui", "1.8.5");
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var marker;
$(document).ready(function () {
initialize();
});
$('#address').keyup(function (e) {
var $q = $(this);
if (e.keyCode == '13')
$("#address").autocomplete("close");
if ($q.val() == '') {
$("#address").autocomplete("close");
return false;
}
codeAddress();
});
$(function () {
$("#address").autocomplete({
minLength: 1,
source: function (request, response) {
geocoder.geocode({ 'address': request.term }, function (results, status) {
response($.map(results, function (item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
}
}));
})
},
//This bit is executed upon selection of an address
select: function (event, ui) {
$("#latitude").val(ui.item.latitude);
$("#longitude").val(ui.item.longitude);
var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
marker.setPosition(location);
map.setCenter(location);
},
close: function () {
}
});
});
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(37.7749295, -122.4194155);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker({
map: map,
draggable: true
});
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
});
}
</script>
</body>
<b><i>About Me : Sandeep Mittal, My Blog : </i></b><a href="http://itdeveloperzone.blogspot.com">IT Developers Zone</a>
</html>
Google Map Instant Search Preview
No comments:
Write Comments