Javascript Google Places API Project to Plot Nearby Places on Maps Using Autocomplete Location

SOURCE CODE

First of all you need to include the cdn of the google places api and the autocomplete location and google maps javascript api as shown below

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Nearby Restaurants</title>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=##yourapikey##&libraries=places"></script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Nearby Restaurants</title>

<script

src="https://maps.googleapis.com/maps/api/js?key=##yourapikey##&libraries=places"></script>

</head>

<body>

</body>

</html>

In the above code you need to copy paste the api key from the google cloud console and enable the location api and javascript maps api as shown below

And now we need to write the javascript code to render the map inside the browser as shown below

<body>
    <input id="searchTextField" type="text" size="50">
    <div id="map" style="height: 500px;"></div>
</body>

<body>

</body>

First of all as you can see we have the input field where we have the autocomplete location field where we allow the user to enter the location from the location api. And then we have the div section where we render the map inside the browser.

<script>
    var map;
    var service;
    var infowindow;

    function initialize() {
        var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);

        map = new google.maps.Map(document.getElementById('map'), {
            center: pyrmont,
            zoom: 15
        })
    }

    google.maps.event.addDomListener(window, 'load', initialize)
</script>

var map;

var service;

var infowindow;

function initialize() {

var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);

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

center: pyrmont,

zoom: 15

})

}

google.maps.event.addDomListener(window, 'load', initialize)

</script>

As you can see we are adding the load event handler when we load the page and then we are executing the method called initialize() and inside that we are rendering the map at the latitude and longitude and then we are displaying the map and passing the options such as center and zoom level as shown below

Adding the Autocomplete Location Field

Now we need to add the javascript code for adding the autocomplete location field at the top of the google map as shown below

var input = document.getElementById('searchTextField');

let autocomplete = new google.maps.places.Autocomplete(input)

autocomplete.bindTo('bounds', map)

var input = document.getElementById('searchTextField');

let autocomplete = new google.maps.places.Autocomplete(input)

autocomplete.bindTo('bounds', map)

As you can see we are using the Autocomplete method of the location api to fetch all the locations as you write inside the text field as shown below

Adding the Nearby Places Markers inside Map

Now guys we will be finding the nearby places using the location api to place the markers inside the google map as shown below

let marker = new google.maps.Marker({
            map: map
        })

        google.maps.event.addListener(autocomplete, 'place_changed', () => {
            let place = autocomplete.getPlace()
            console.log(place)
            console.log(place.photos[0].getUrl())

            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport)
            } else {
                map.setCenter(place.geometry.location)
                map.setZoom(17)
            }
            marker.setPosition(place.geometry.location)
            marker.setVisible(true)

            let request = {
                location: place.geometry.location,
                radius: '500',
                type: ['atm']
            }

            service = new google.maps.places.PlacesService(map)
            service.nearbySearch(request, callback)

        })

let marker = new google.maps.Marker({

map: map

})

google.maps.event.addListener(autocomplete, 'place_changed', () => {

let place = autocomplete.getPlace()

console.log(place)

console.log(place.photos[0].getUrl())

if (place.geometry.viewport) {

map.fitBounds(place.geometry.viewport)

} else {

map.setCenter(place.geometry.location)

map.setZoom(17)

}

marker.setPosition(place.geometry.location)

marker.setVisible(true)

let request = {

location: place.geometry.location,

radius: '500',

type: ['atm']

}

service = new google.maps.places.PlacesService(map)

service.nearbySearch(request, callback)

})

As you can see we are listening for the place_changed event where as the location changes we are placing the red marker on the google map using the setPosition() method and here we are passing the latitude and longtitude and after that we are finding the nearby places using the location api and here we are providing the radius to be 500 and then type parameter to atm so it will find the nearby atm's in the radius 500m area. And now it will be execute the callback function once the data comes.

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

function callback(results, status) {

if (status == google.maps.places.PlacesServiceStatus.OK) {

for (var i = 0; i < results.length; i++) {

var place = results[i];

createMarker(results[i]);

}

As you can see inside the above code we are looping through all the places and inside it we are calling the createMarker() method and inside that we are passing the location inside the method.

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

        google.maps.event.addListener(marker, 'click', function () {
            alert(place.name);
            window.open(place.photos[0].getUrl(), "_blank");
        });
    }

function createMarker(place) {

var marker = new google.maps.Marker({

map: map,

position: place.geometry.location

});

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

alert(place.name);

window.open(place.photos[0].getUrl(), "_blank");

});

}

As you can see we are using the Marker() method to place the red markers on the map and then we are adding the click event listeners to the marker so when we click the marker it will display the name of the place and the picture of the place using the location api as shown below

FULL SOURCE CODE

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Nearby Restaurants</title>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=##apikey##&libraries=places"></script>
</head>
<script>
    var map;
    var service;
    var infowindow;

    function initialize() {
        var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);

        map = new google.maps.Map(document.getElementById('map'), {
            center: pyrmont,
            zoom: 15
        })

        var input = document.getElementById('searchTextField');

        let autocomplete = new google.maps.places.Autocomplete(input)

        autocomplete.bindTo('bounds', map)

        let marker = new google.maps.Marker({
            map: map
        })

        google.maps.event.addListener(autocomplete, 'place_changed', () => {
            let place = autocomplete.getPlace()
            console.log(place)
            console.log(place.photos[0].getUrl())

            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport)
            } else {
                map.setCenter(place.geometry.location)
                map.setZoom(17)
            }
            marker.setPosition(place.geometry.location)
            marker.setVisible(true)

            let request = {
                location: place.geometry.location,
                radius: '500',
                type: ['atm']
            }

            service = new google.maps.places.PlacesService(map)
            service.nearbySearch(request, callback)

        })

    }

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


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

        google.maps.event.addListener(marker, 'click', function () {
            alert(place.name);
            window.open(place.photos[0].getUrl(), "_blank");
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize)
</script>

<body>
    <input id="searchTextField" type="text" size="50">
    <div id="map" style="height: 500px;"></div>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Nearby Restaurants</title>

<script

src="https://maps.googleapis.com/maps/api/js?key=##apikey##&libraries=places"></script>

</head>

var map;

var service;

var infowindow;

function initialize() {

var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);

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

center: pyrmont,

zoom: 15

})

var input = document.getElementById('searchTextField');

let autocomplete = new google.maps.places.Autocomplete(input)

autocomplete.bindTo('bounds', map)

let marker = new google.maps.Marker({

map: map

})

google.maps.event.addListener(autocomplete, 'place_changed', () => {

let place = autocomplete.getPlace()

console.log(place)

console.log(place.photos[0].getUrl())

if (place.geometry.viewport) {

map.fitBounds(place.geometry.viewport)

} else {

map.setCenter(place.geometry.location)

map.setZoom(17)

}

marker.setPosition(place.geometry.location)

marker.setVisible(true)

let request = {

location: place.geometry.location,

radius: '500',

type: ['atm']

}

service = new google.maps.places.PlacesService(map)

service.nearbySearch(request, callback)

})

}

function callback(results, status) {

if (status == google.maps.places.PlacesServiceStatus.OK) {

for (var i = 0; i < results.length; i++) {

var place = results[i];

createMarker(results[i]);

}

function createMarker(place) {

var marker = new google.maps.Marker({

map: map,

position: place.geometry.location

});

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

alert(place.name);

window.open(place.photos[0].getUrl(), "_blank");

});

}

google.maps.event.addDomListener(window, 'load', initialize)

</script>

<body>

</body>

</html>