Google Map Nearby Place Search

Search nearby places in Google map.     

Insert the following div where you want to display the map.  

<div id="myMap"></div>

 

CSS Code

<style>
#myMap {
   height: 350px;
   width: 680px;
}
</style>

 

JavaScript Code

 

<script type="text/javascript">
$(function(){
$('.chkbox').click(function(){
$(':checkbox').attr('checked',false);
$('#'+$(this).attr('id')).attr('checked',true);
search_types(map.getCenter());
});

});

var map;
var infowindow;
var markersArray = [];
var pyrmont = new google.maps.LatLng(20.268455824834792, 85.84099235520011);
var marker;
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
// var waypoints = []; 
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: pyrmont,
zoom: 14
});
infowindow = new google.maps.InfoWindow();
//document.getElementById('directionsPanel').innerHTML='';
search_types();
}

function createMarker(place,icon) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: icon,
visible:true 

});

markersArray.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent("<b>Name:</b>"+place.name+"<br><b>Address:</b>"
+place.vicinity+"<br><b>Reference:</b>"+place.reference+"<br><b>Rating:</b>"
+place.rating+"<br><b>Id:</b>"+place.id);
infowindow.open(map, this);
});

}
var source="";
var dest='';

function search_types(latLng){
clearOverlays(); 

if(!latLng){
var latLng = pyrmont;
}
var type = $('.chkbox:checked').val();
var icon = "images/"+type+".png";


var request = {
location: latLng,
radius: 20000,
types: [type] //e.g.school,restaurant,bank etc..
};

var service = new google.maps.places.PlacesService(map);
service.search(request, function(results, status) {
map.setZoom(14);
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
results[i].html_attributions='';
createMarker(results[i],icon);
}
}
});

}


// Deletes all markers in the array by removing references to them
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setVisible(false)
}
//markersArray.length = 0;
}
}
google.maps.event.addDomListener(window, 'load', initialize);

function clearMarkers(){
$('#show_btn').show();
$('#hide_btn').hide();
clearOverlays()
}
function showMarkers(){
$('#show_btn').hide();
$('#hide_btn').show();
if (markersArray) {
for (i in markersArray) {
markersArray[i].setVisible(true)
}

}
}

function showMap(){

var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&
chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
var markerImage = new google.maps.MarkerImage(imageUrl,new google.maps.
Size(24, 32));
var input_addr=$('#address').val();
geocoder.geocode({address: input_addr}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var latlng = new google.maps.LatLng(latitude, longitude);
if (results[0]) {
map.setZoom(14);
map.setCenter(latlng);
marker = new google.maps.Marker({
position: latlng, 
map: map,
icon: markerImage,
draggable: true 

}); 
$('#btn').hide();
$('#latitude,#longitude').show();
$('#address').val(results[0].formatted_address);
$('#latitude').val(marker.getPosition().lat());
$('#longitude').val(marker.getPosition().lng());
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
search_types(marker.getPosition());
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);

});


google.maps.event.addListener(marker, 'dragend', function() {

geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$('#btn').hide();
$('#latitude,#longitude').show();
$('#address').val(results[0].formatted_address);
$('#latitude').val(marker.getPosition().lat());
$('#longitude').val(marker.getPosition().lng());
}

infowindow.setContent(results[0].formatted_address);
var centralLatLng = marker.getPosition();
search_types(centralLatLng);
infowindow.open(map, marker);
}
});
});
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
} 
</script>