Show places of category in city with google api

Question

Input: user will select city and place category.

Output: google map with all places that have same category in that city.

How i can do it with google map APIs.

When i try to use places API it’s return json with geographic data but i cant use it with JavaScript or jQuery Json request.

$.getJSON( "https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=1500&type=restaurant&keyword=cruise&key=YOUR_API_KEY", function( json ) {
  console.log( "JSON Data: " + json );
 });

But browser log don’t show any output.

Any example code for best way to implement my idea??!

Thank you

Answer 1

with this code you need only to provide city name and place types or that you can find here: https://developers.google.com/places/web-service/supported_types

output will show 20 places in same city with type that you passed.

     <script>
      // This example requires the Places library. Include the libraries=places
      // parameter when you first load the API. For example:

      var map;
      var service;
      var infowindow;
      var city;

      function initMap() {
        var cityName = document.getElementById('cityInput').value;  // text input html tag 
        var type = document.getElementById('subCategory').value;    // select input html tag 

        map = new google.maps.Map(document.getElementById('map'), {zoom: 14});
        var cityRequest = {
          query: cityName,
          fields: ['name', 'geometry'],
        };

        //alert("find!! : " + cityName);

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

        service.findPlaceFromQuery(cityRequest, function(results, status) {
          if (status === google.maps.places.PlacesServiceStatus.OK) {
            let city = results[0].geometry.location;
            map.setCenter(city);

            infowindow = new google.maps.InfoWindow();
            //alert(type);


        var request = {
            location: city,
            radius: '1000', 
            query: type
        };
//radius is size of search area


        service.textSearch(request, function(results, status) {
          if (status === google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) { // adding places to map
              createMarker(results[i]);
            }

            //map.setCenter(results[0].geometry.location);
          }
        });
          }
        });



      }

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

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(place.name);
          infowindow.open(map, this);
        });
      }
    </script>

With this code you will show map in you web page

                <div id="map" style="height: 500px; "></div>

                <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&callback=initMap&language=ar" async defer></script>

Answer 2

You're probably looking for the client-side Places Library's Nearby Search service. Take a look at this working jsfiddle.

JS code below:

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 request = {
    location: pyrmont,
    radius: '500',
    type: ['restaurant']
  };

  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
  });

  infowindow = new google.maps.InfoWindow();
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

Hope this helps!