Google Maps Places - Get Details

by Jonathan Smith

HTML

<div id="map" style="display:none"></div>
<div id="pics"></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(33.520, -117.706);

    var myOptions = {
        zoom: 15,
        center: latlng,
        scrollwheel: false
    };

    map = new google.maps.Map(document.getElementById('map'), myOptions);

    var request = {
        location: latlng,
        radius: 8000,
        types: ['grocery_or_supermarket']
    };
    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 p = 0; p < results.length; p++) {
                console.log("p: ", results[p]);
                (function (n) {
                    service.getDetails({
                        placeId: results[n].place_id
                    }, function (place, status) {
                        console.log(place);
                        if (place.photos) {
                            document.getElementById('pics').innerHTML += '<img alt src="' + place.photos[0].getUrl({
                                'maxWidth': 350,
                                    'maxHeight': 350
                            }) + '"></img>';
                        }
                    });
                })(p)
            }

        }
    }
});