In the previous post we had seen how to get the current location (latitude and longitude) using java script. Today we will use that functionality to get the nearby search using Google API. We usually do the search the near by restaurants , ATM, airport, book store , medicine store ,etc. By the way we need this everyday in our daily life.
We sometimes search the specific place or location by using the zipcode or pincode. Google API provide many features for Places, Routes and Map. Today we will find the nearest "resturants" by using a zip code or postcode.
We have used google.maps.places and google.maps.geocoder in our example above. We have used geocoder , it is the process of converting addresses (like a street address) into geographic coordinates (like latitude and longitude), which you can use to place markers on a map, or position the map.
zipcodefind.html
<html>
<head>
<style>
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script
src="https://maps.googleapis.com/maps/api/js?libraries=places&key=YOUR_API_KEY"></script>
<script language="javascript">
var map;
var infowindow;
function initialize() {
var geocoder = new google.maps.Geocoder();
var zipcode = document.getElementById('zipcode').value;
geocoder.geocode({
'address': zipcode, componentRestrictions: { country: 'IN' }
}, function (results, status) {
if (status === 'OK') {
var latLong = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
console.log("Co-ordinates are::" + latLong);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: latLong,
zoom: 15
});
var request = {
location: latLong,
radius: 1000,
types: ['car_repair']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
} else {
alert('Search was not successful for the following reason: ' + status);
}
});
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
</script>
</head>
<body>
<div id="map-canvas" style="width: 50%; float:right"></div>
<div style="width: 50%; float:left;padding-top: 20px;">
<input id="zipcode" type="textbox" value="560078">
<input id="submit" type="button" value="Get Nearby Search by Postcode" onclick="initialize()">
<br>
<span style="font-size: small">In this example we have used country <b>India</b>, and search type is <b>Resturants</b> </span>
</div>
</body>
</html>
Now we will open this html file on browser as below screenshot. We have used marker for marking the near by place "resturants" for the given postcode. There are many supported place type google provides.
In this example we have restricted the search inside India. But there are other country codes i.e. AU which is also supported.
componentRestrictions: { country: 'IN' }
Find few reference documents below:-
Happy Learning.
No comments:
Post a Comment