google map api nearby place search

Question

I am using the Google Maps API places library to use the nearby search feature in my Worklight application but only the map is displayed and the nearby places is not shown.Please help me with this.Here is my java script code.

var map;
var infowindow;

function initialize() {
  var latlon = new google.maps.LatLng(25.984602, 90.785091);
  mapCanvas = document.getElementById('mapholder');
  mapCanvas.style.height = '250px';
  mapCanvas.style.width = '500px';

  map = new google.maps.Map(document.getElementById('mapholder'), { mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: latlon,
    zoom: 15
  });

  var currentMarker = new google.maps.Marker({
     map: map,
     position: latlon,
     title:'Current Location'
   });
  
  var request = {
    location: latlon,
    radius: 500,
    types: ['atm']
  };
  infowindow = new google.maps.InfoWindow();
  var 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++) {
      createMarker(results[i]);
    }
  }
  else
   alert("Status not OK");
}

function createMarker(place) {
 alert("createMarker function");
  var placeLoc = place.geometry.location;
  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);
  });
}

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

Any javascript errors? Are you including the places library? — geocodezip, Jul 15 '15 at 18:37

geocodezip · Accepted Answer · 2021-10-02T17:34:06.393

There are no places with the type 'atm' within 500 meters of the location specified. It returns a result if I increase the radius to 5000 meters.

fiddle

code snippet:

var map;
var infowindow;

function initialize() {
  var latlon = new google.maps.LatLng(25.984602, 90.785091);
  mapCanvas = document.getElementById('mapholder');
  mapCanvas.style.height = '250px';
  mapCanvas.style.width = '500px';

  map = new google.maps.Map(document.getElementById('mapholder'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: latlon,
    zoom: 15
  });

  var currentMarker = new google.maps.Marker({
    map: map,
    position: latlon,
    title: 'Current Location',
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(3.5, 3.5)
    }
  });

  var request = {
    location: latlon,
    radius: 5000,
    types: ['atm']
  };
  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    document.getElementById('status').innerHTML = results.length + " places found";
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  } else
    alert("Status not OK");
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  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);
  });
}

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

html,
body,
#mapholder {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry,places&ext=.js"></script>
<div id="status"></div>
<div id="mapholder" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

google map api nearby place search

1 Answers1

Linked