How to get restaurant list from google map by just entering city/town name?

0
votes

Cannot understand difference between Google Map and Google Places API.

Just implemented simple google map code

 <html>
    <head>
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <script>
    function initialize() {
      var mapProp = {
        center:new google.maps.LatLng(25.0000, 66.0000),
        zoom:4,
        mapTypeId:google.maps.MapTypeId.ROADMAP
      };
      var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    </head>

    <body>
    <select name="home_city_select" id="home_city_select" data-icon="carat-d" style="width:auto;" onchange="getCity()">
<option>
    ....
</option>
</select>

    <div data-role="content" style="padding: 0px" dir="ltr">

        <div id="googleMap" style="width:100%;height:215px;"></div>

    </div>

    </body>

JS

//City--tested by multiple code ways
function getCity() {
    var x = document.getElementById("home_city_select").value;
    var xx=$("#home_city_select").val();
    //alert(xx);
}

$(function() {
    $("#home_city_select").change(function() {
        alert( $('option:selected', this).text() );
    });
});

Here I have to give latitude longitude manually.But this not the correct method.And no one knows latitude and longitude of every cities.

  1. But how to write the javascript so that while selecting city name such as "Mumbai" from drop down the map changes and shows restaurant symbols on the map.
  2. How to get restaurant names in a list, finds within the selected city.
  3. Search by food names.

Ultimately what the correct codes needed to implement the above required features?Please provide the codes.

2
javascripthtmlgoogle-maps

2 Answers

2
votes

You can't do all of this with just the maps api. You'll need the geocoding API to pull the lat long of your city:

https://developers.google.com/maps/documentation/geocoding/

The docs have a wealth of information there, but the tl;dr is: Call the API like this: https://maps.googleapis.com/maps/api/geocode/json?address=Toledo&key=API_KEY and you'll get some JSON back that has a "bounds" key. Take your boundbox, and pass it to the places API:

https://developers.google.com/maps/documentation/javascript/places#TextSearchRequests