javascriptgoogle-mapsgoogle-places-api

Google Map with Local Churches, how to construct API call?

Is there are way to retrieve a map from Google using the API so that it displays a list of local churches with churches with markers?

I have the basic syntax, and I have a basic API account setup, but I am not how/if I can use the type field.

var mapOptions = {
    center: new google.maps.LatLng("-33.8670522", "151.1957362"),
    zoom: 11,
    scrollwheel: false,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("googlemaps"), mapOptions);
Solution

  • Yes, you can do this using Google Places API.

    I'll use JavaScript API as it seems you're using JS.

    As said in documentation:

    The Places service is a self-contained library, separate from the main Maps API JavaScript code. To use the functionality contained within this library, you must first load it using the libraries parameter in the Maps API bootstrap URL:

    <script src="https://maps.googleapis.com/maps/api/js?key=${YOUR_API_KEY}&libraries=places"></script>

    After this, by using JavaScript Places API, you can request places by type and radius (in meters). The maximum allowed radius is 50.000 meters.

    Here is a piece of code that demonstrates this:

    var request = {
    location: sydney,
    radius: 5000,
    types: ['church']
};

var service = new gm.places.PlacesService(map);
service.nearbySearch(request, handlePlaceResponse);

    Obs.: In this example, handlePlaceResponse is a callback to handle the response and create the markers. See in the complete example how it works.

    This will request the churches in a 5km radius from Sydney point (lat: -33.8670522, lng: 151.1957362).

    To overlay markers you'll need to handle the response. In the example, I'm using only the place's name as the content of InfoWindow. You can see details about the response here: Place Details Responses

    So, a function to create markers looks like this:

    /**
 * Creates marker with place information from the response
 */
function createMarker(place) {
    var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location
    });
    
    var infowindow = new google.maps.InfoWindow();
    
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(place.name);
        infowindow.open(map, this);
    });
}

    For the types supported by the API, have a look at this link: Place Type

    Here is an example using the point you have in your question as the center point and 5000 meters for radius:

    <html>
<head>
    <title>Google Maps - Places Sample</title>
    <style>
        body {
            margin: 0;
        }
        #map {
            height: 100%;
            width: 100%;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=${YOUR_API_KEY}&libraries=places"></script>
    <script>
        var gm = google.maps;
        
        var map;
        var bounds;
        var service;
        var infowindow;
        
        var sydney = new gm.LatLng(-33.8670522, 151.1957362);

        function initialize() {
            var options = {
                zoom: 15,
                center: sydney,
                mapTypeId: gm.MapTypeId.ROADMAP,
                streetViewControl: false,
                scrollwheel: false
            };

            map = new gm.Map(document.getElementById("map"), options);
            
            var request = {
                location: sydney,
                radius: 5000,
                types: ['church']
            };

            bounds = new gm.LatLngBounds();
            infowindow = new gm.InfoWindow();
            service = new gm.places.PlacesService(map);
            service.nearbySearch(request, handlePlaceResponse);
        }
        
        /**
         * Handle place response and call #createMarker to creat marker for every place returned
         */
        function handlePlaceResponse(results, status) {
            if (status == gm.places.PlacesServiceStatus.OK) {
                for (var i = 0; i < results.length; i++) {
                    createMarker(results[i]);
                }
            }
            map.fitBounds(bounds);
            map.setCenter(bounds.getCenter());
        }

        /**
         * Creates marker with place information from response
         */
        function createMarker(place) {
            var location = place.geometry.location;
            var marker = new gm.Marker({
                map: map,
                position: location
            });
            
            bounds.extend(location);

            gm.event.addListener(marker, 'click', function() {
                infowindow.setContent(place.name);
                infowindow.open(map, this);
            });
        }

        gm.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

    P.S.: make sure to replace ${YOUR_API_KEY} with your own key.