Easy Code Stuff: Getting The Nearest Places For A Location In Google Map Using Google MAP API

Following example will help you to develop your own 'Google Map' to get the nearest places of a location by latitude and longitude using java script.

"mylocation" variables contains the location you want to search for places. In this example first it will load the map and center it to your given latitude and longitude. After loading the map it will create the marker in the map of the location searched. This is happening in the "setCurrentLocation()" function. If you want, you can get rid of this method, if you don't want to show your location on the map.

Then we should request details from " google.maps.places.PlacesService". In the request you should specify your location and types. In my example I have used types such as 'train_station', 'bus_station' and 'subway_station'.You can find more types here.

In the request I have specified another parameter called 'rankBy'. This will sort the results your getting. In my example I have specified 'google.maps.places.RankBy.DISTANCE', which will sort the results by nearest to the place search.

Now lets have a look on code.

<html>
<head>
    <title>Getting The Nearest Places For A Location In Google Map Using Google MAP API</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
</head>
<body>
    <div id="map-canvas" style="height: 100%;"></div>
    <script type="text/javascript">
        var map;
        var infowindow;
        var service ;
        var mylocation = new google.maps.LatLng(6.928940573589038, 79.87219331750487);
        //Set Your Current Location to 'mylocation'
        getGooglePlaces();

        function getGooglePlaces(lat,lng)
        {      
            //load the map
            map = new google.maps.Map(document.getElementById('map-canvas'), {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: mylocation,
                zoom: 15
            });
     
            infowindow = new google.maps.InfoWindow();
            service = new google.maps.places.PlacesService(map);
    
            setCurrentLocation();
  
            var request = {
                location: mylocation,
                rankBy: google.maps.places.RankBy.DISTANCE,
                types: ['train_station','bus_station','subway_station'] 
                //More Types From
                //https://developers.google.com/places/supported_types
            };
            service.search(request, callback_googlePlaces);
        }
   
        function setCurrentLocation() {
            var marker = new google.maps.Marker({
                map: map,
                position: mylocation,
                icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000',
                animation: google.maps.Animation.DROP
            });

            google.maps.event.addListener(marker, 'click', function() {
                var content='<strong>Current Place</strong>';
                infowindow.setContent(content);
                infowindow.open(map, this);
            });
        }

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

        function createMarker(place) {
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location,
                animation: google.maps.Animation.DROP
            });
    
            google.maps.event.addListener(marker, 'click', function() {
                var content='<strong>' + place.name + '</strong><br/>' + '<span>' + place.vicinity + '</span><br/>' + '<span>' + place.types[0] + '</span><br/>' + '<span>' + google.maps.geometry.spherical.computeDistanceBetween(mylocation, place.geometry.location).toFixed(2) + ' meters</span>';
                infowindow.setContent(content);
                infowindow.open(map, this);
            });
        } 
   
    </script>
</body>
</html>

In this example I have used the 'googleapis' online. So no need to include any java script files. Copy the code and save as a html file. Just open the file in the browser. You will see the below result.

If you click the marker you will get a info window which shows you the distance.
Please note that this distance is direct distance. This is not the direction distance.
That mean travelling distance.

Check My Other Articles About Google Maps.

1. Creating A Google Map Using Google Map API v3
2. Show Current Location In A Google Map Using Google Map API v3
3. Getting The Address Of Selected Location In Google Map Using Google Map API v3
4. Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3
5. Google Map With Multiple Markers & Info Windows Using Google Map API v3
6. Getting The Direction Between Two Markers In Google Map Using Google MAP API
7. Getting The Direction Between Two Locations Using Google MAP API
8. Getting The Distance Between Two Markers In Google Map Using Google MAP API
9. Getting The Distance Between Two Locations Using Google MAP API
10. Getting The Nearest Places For A Location In Google Map Using Google MAP API
11. Google Map With InfoBubble
12. Google Maps Creating Polygon And Retrieving Coordinates

Easy Code Stuff

Aug 13, 2015

Getting The Nearest Places For A Location In Google Map Using Google MAP API

No comments:

JWT Token Decode Using Jquery