My objective is to request a group of locations that fit my criteria using a "routeRequest" and save them. In order to to that, I was to use google Places to check the locations around the center of my map.

let map = new google.maps.Map(document.querySelector("#myMap"), {
    center: { lat: 41.148481, lng: -8.606893 },
    zoom: 15
  });

let service = new google.maps.places.PlacesService(map);
service.nearbySearch(routeRequest, callback);


let routeRequest = {
    location: map.center,
    radius: '1000',
    type: [this.typeRoute]
  };


function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      for (const result of results) {
        this.listLocations.push(result);
      }
    }
  }

The issue is, placesService doens't seem to recognize the map

My objective is to request a group of locations that fit my criteria using a "routeRequest" and save them. In order to to that, I was to use google Places to check the locations around the center of my map.

let map = new google.maps.Map(document.querySelector("#myMap"), {
    center: { lat: 41.148481, lng: -8.606893 },
    zoom: 15
  });

let service = new google.maps.places.PlacesService(map);
service.nearbySearch(routeRequest, callback);


let routeRequest = {
    location: map.center,
    radius: '1000',
    type: [this.typeRoute]
  };


function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      for (const result of results) {
        this.listLocations.push(result);
      }
    }
  }

The issue is, placesService doens't seem to recognize the map

• javascript
• google-maps
• vue.js
• google-places-api

• You can't access that property until the callback has run. Move your assignment into the if check after it's returned successfully. – Brian Lee Commented Jan 27, 2020 at 16:59
• @DigitalDrifter What do you mean as "assignment"? Should I move "service=new google.maps.places.PlacesService(map)" into the callback function? If I do that, it tells me "service" is undefined and that "google.maps.places.PlacesService(map)" is defined but not used. – user12792083 Commented Jan 27, 2020 at 17:42
• Can you please provide a codesandbox or stackblitz so that we can reproduce this issue from our side? – evan Commented Jan 29, 2020 at 16:51
• Do you have the places library loaded in your bootstrap URL a la <script type="text/javascript" src="maps.googleapis./maps/api/…> – ecg8 Commented Jan 29, 2020 at 22:24
• 1 @evan here is the link for it: codesandbox.io/s/epic-mendeleev-3i3r9. You need to add an API Key to it though. With google maps API and google Places API. – user12792083 Commented Jan 30, 2020 at 13:23

1 Answer 1

It looks like you are getting this error because you haven't loaded the places library. In index.html you have this Maps API script:

<script async src="https://maps.googleapis./maps/api/js?key="></script>

Add the following:

<script async src="https://maps.googleapis./maps/api/js?key=&libraries=places"></script>

Hope this helps!