Google Maps - Places

by Paulo Ávila

HTML

<script src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>

<div id="map"></div>

CSS

#map { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

JavaScript

window.addEventListener('load', function(){
    var originLatLng = new google.maps.LatLng(41.3857, 2.1699);
    
	var map = new google.maps.Map(document.getElementById('map'),{
		zoom: 14,
		center: originLatLng,
		panControl: false,
		zoomControl: true,
		streetViewControl: true,
		zoomControlOptions: {
			style: google.maps.ZoomControlStyle.SMALL,
			position: google.maps.ControlPosition.TOP_LEFT
		},
		mapTypeControl: true,
		scaleControl: false,
		overviewMapControl: false
	});

    var infowindow = new google.maps.InfoWindow();

    // https://developers.google.com/places/documentation/
    var service = new google.maps.places.PlacesService(map);
    service.search({
        location: originLatLng,
        radius: 10000, // max = 50,000 (meters)
        // https://developers.google.com/places/documentation/supported_types
        types: ['parking']
        //types: ['train_station', 'bus_station', 'subway_station', 'transit_station']
    }, searchForPlacesCallback);

    function searchForPlacesCallback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                createPlaceMarker(results[i]);
            }
        }
    }

    function createPlaceMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location
        });
        var content='<strong style="font-size:1.2em">'+place.name+'</strong>'+
            '<br/><strong>Latitude:</strong>'+placeLoc.lat()+
            '<br/><strong>Longitude:</strong>'+placeLoc.lng()+
            '<br/><strong>Type:</strong>'+place.types[0]+
            '<br/><strong>Rating:</strong>'+(place.rating||'n/a');
        var more_content='<img src="http://googleio2009-map.googlecode.com/svn-history/r2/trunk/app/images/loading.gif"/>';
        
        // Get more details
        service.getDetails({
           ...