Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Places API library use without map - javascript

I need to get the closest establishments in 100m radius from specific coordinates. I found the Google Places API sample code, but I don't use a map in my application, since this results will be rendered in a list. Here is the API code:

var map;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);

  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: pyrmont,
    zoom: 15
  });

  var request = {
    location: pyrmont,
    radius: 500,
    types: ['store']
  };
  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]);
    }
  }
}

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

Someone here has found that you can use a node to render the attribution into, but when I try ti render in it:

var $attrib = $('<div id="attributions"></div>');
$('#main').append($attrib);
...
service = new google.maps.places.PlacesService($attrib);
service.nearbySearch(request, callback);

I get an error:

TypeError: this.j[Wb] is not a function

from somewhere deep inside the API library. I hope this is enough of information to figure the problem out

like image 742
Stepan Ulyanin Avatar asked Mar 05 '15 03:03

Stepan Ulyanin


People also ask

How do I use Google Places autocomplete API?

Go to the Google Cloud Console. Click the Select a project button, then select the same project you set up for the Maps JavaScript API and click Open. From the list of APIs on the Dashboard, look for Places API. If you see the API in the list, you're all set.

Can I put Google Maps on my site without using Google Maps platform products?

Google Maps now offers the ability to embed the map that you're viewing into your website or blog, without any programming or use of the Google Maps Platform.

Can you store Google Places API data?

Note that the place ID, used to uniquely identify a place, is exempt from the caching restriction. You can therefore store place ID values indefinitely.

How do I integrate Google Places API on my website?

Go to the Google Maps Platform > Credentials page. On the Credentials page, click Create credentials > API key. The API key created dialog displays your newly created API key. Click Close.


1 Answers

$attrib probably is not a Node, I guess it's a jQuery-object.

Use

service = new google.maps.places.PlacesService($attrib[0]);

or without jQuery:

service = new google.maps.places
          .PlacesService(document.getElementById('main')
                         .appendChild(document.createElement('div')));
like image 198
Dr.Molle Avatar answered Oct 21 '22 13:10

Dr.Molle