Google Maps Places - Get Details

by Adam Boother

HTML

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>

CSS

#map {
    width: 100%;
    height: 600px;
}

JavaScript

$(function(){     
	var latlng = new google.maps.LatLng(51.752021, -1.257726);

	var myOptions = {
		zoom: 15,
		center: latlng,
		scrollwheel: false
    };
	
	map = new google.maps.Map(document.getElementById('map'), myOptions);
	
	var request = {
		location: latlng,
		radius: 10000,
		types: ['school', 'subway_station', 'train_station']
	};
	infowindow = new google.maps.InfoWindow();
	var service = new google.maps.places.PlacesService(map);
	service.nearbySearch(request, callback);

    var marker, i;

	marker = new google.maps.Marker({
        position: latlng,
		animation: google.maps.Animation.DROP,
		map: map,
		title: 'Property Location'
	});
    
    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,
            animation: google.maps.Animation.DROP,
            position: place.geometry.location
        });
    
        console.log(place);
        
        google.maps.event.addListener(marker, 'click', function() {
            
            infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + '</div>');
            infowindow.open(map, this);
        });
    }
});