How to design a simple webpage wherein an input GPS location returns you all places(lika ATMs,bars etc) and their distance from the location

Question

Now,I have to design a simple webpage wherein an input GPS location returns the following -
1. Nearest market(s), nearest ATM(s), nearest Metro station(s), nearest restaurant(s) on a map.
2. Distances of these points from the input location in a table.
I have gone around reading about how to use the Google MAPS API and but i dint clearly understand that how exactly can i search for specific kind of places near the given coordinates(within a radius) and then appropriately display them on my Google MAP :/

Answer 1

Well,after having worked out a lot and looking here and there this is how i made it using Google MAPS API v3 : 1.First,you need to initialize your map which should be centered at the input coordinates.

function initialize()
{
    var lat=parseFloat(document.getElementById("Lat").value);
    var lng=parseFloat(document.getElementById("Long").value);  
    map = new google.maps.Map(document.getElementById('map-canvas'), 
   {
        center: new google.maps.LatLng(lat,lng),
        zoom: 15,
        styles: [
          {
            stylers: [
              { visibility: 'on' }
            ]
          },
          {
            elementType: 'labels',
            stylers: [
              { visibility: 'on' }
            ]
          }
        ]
   });
   document.getElementById("map-canvas").style.borderColor="aquamarine ";
   document.getElementById("help").innerHTML="<u>HELP</u><br> Click on a Place to find out the direction & distance.<br>";
   /*The following creates a marker in the provided Coordiantes
    using a DROP animation. Clicking on the marker will toggle
    the animation between a BOUNCE animation and no animation.*/
    var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat,lng),
    map: map,
    animation: google.maps.Animation.DROP,
    title:"You're Here!"
    });
    google.maps.event.addListener(marker,'click', toggleBounce);

   infoWindow = new google.maps.InfoWindow();
   service = new google.maps.places.PlacesService(map);

   google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch);
}

And so on and so forth using the directions API and the MAP API i have created a very basic map which is good for any beginner. https://drive.google.com/file/d/0B5NwjTjzPp9lV18zWGNMenF1Q0k/edit?usp=sharing