Error: The value of 'PlacesService' property is not defined and cannot be read

I am working towards gathering a selection of locations that meet specific criteria by making a "routeRequest" and storing them. To achieve this, I aim to utilize Google Places to search for locations around the central point 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);
      }
    }
  }

However, there seems to be an issue as placesService is unable to recognize the map.

Answer №1

It seems like the error you're encountering is due to not loading the places library. Within your index.html, there's a Maps API script present:

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

To resolve this, please include the following addition:

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

Hopefully, this solution proves helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for animating elements to move on scroll while navigating through the webpage

I came across a fascinating website that has a unique scrolling effect. As you scroll down the page, only the elements and images move while the page itself remains static, creating an interesting visual effect. I tried to replicate this on my own websit ...

Removing solely the selected item, leaving the rest of the elements on the canvas untouched

Just starting out with coding and working on a game for a school project. The idea is to have random circles or "targets" appear on the screen, and the user has to click them. I've been struggling with keeping the "un-clicked" circles on the canvas wh ...

Email the jQuery variable to a recipient

I'm facing an issue with sending a jQuery variable containing HTML and form values via email using a separate PHP file with the @mail function. My attempt involves using the jQuery $.ajax function on form submit to send this variable, but unfortunate ...

Display the image title in a separate div when hovering over it

As a beginner in jQuery, I am working on creating a gallery that displays the title attribute of an image in a separate div when hovering over the image. The title should disappear when the mouse moves away from the image. I hope that explanation is clear! ...

Creating a Paytm payment link using API in a React Native app without the need for a server

Suppose a user enters all their details and the total cost of their order amounts to 15000 rupees. In that case, the app should generate a Paytm payment link for this amount and automatically open it in a web view for easy payment processing. Any suggesti ...

Using NodeJS to handle server side FormData

Currently, in the process of building a web application with nodejs on the server-side, I am facing a challenge of transferring PDF files from the client to the server. Client side: var files = new FormData(); var count = 0; $('#tableSlideId tr&apos ...

Despite implementing componentDidMount, the setState function is failing to update an initialized array state property

I have checked out similar questions such as : Why isn't this.setState updating the state property? Issue with this.setState not updating state Understanding that setState operates asynchronously is key. This snippet showcases my code: import Rea ...

Activate Bootstrap tooltip when input element is focused, and then when the next input element is selected

I'm trying to activate a tooltip on an input element within a table. My goal is to trigger the tooltip when either that specific input element or the adjacent input element in the table are focused. Below is the HTML structure: <td class="fea ...

Nodejs: The JSON.stringify method is automatically rounding the numbers

I am encountering a strange issue. When I call the credit card processor (CCBILL) with a payment token, they return a subscription ID. For example, 0124058201000005323 should be returned but what I receive is 124058201000005330, indicating that it has been ...

Having trouble with Javascript in getting one-page scroll navigation to work?

Hey there, I am working on creating a one-page scroll navigation with some basic javascript to add a smooth animation effect that takes 1 second as it scrolls to the desired section. However, I seem to be experiencing an issue where it's not functioni ...

Difficulty in sharing cookies among subdomains

I have successfully stored my visitors' style sheet preference in a cookie, but I am facing an issue with sharing the cookie across subdomains. Even after specifying the domain, the cookie does not seem to be shared. What could be causing this proble ...

JQuery is not able to render Hindi content properly

I am attempting to showcase some Hindi words using JQuery because these are essential contents that need to be displayed on every page of the website. Please note that this is a static website built with HTML and JQuery/JavaScript. Below is my JS file: in ...

React js select all checkbox implementationIs this what you need? Let

I am working on creating a select-all checkbox feature where each product row has a checkbox. When a checkbox is clicked, it should capture the product id, variations, and count to calculate and display the total price of the selected products. I have su ...

The onKeyUp event in Material-UI components does not seem to be functioning as

I am experiencing an issue with a material-ui component Grid where the onKeyUp event does not seem to be triggering as expected. Here is the code snippet: <Grid item xs={12} onKeyUp={handleClickOnKeyUp} sx={{cursor: "pointer"}} onClick= {ha ...

Reactivity in Vue not responding when listening from a different object

Can someone help me understand why my Vue object is not reactive to changes in another object? See the code snippet below. exampleObject = { exampleProperty: null } exampleObject.update = function () { this.exampleProperty = 'updated data&apo ...

The implementation of async await within a switch case statement is failing to function properly

Is it possible to wait for the resolution of a promise within a switch case statement by using the keyword await? I am facing an issue with my Angular component where the following code is causing crashes in my application. switch (this.status) { ...

Trouble locating the ID selector within a nested Backbone view

Within this code snippet, I am utilizing the element controller pattern to display a collection of products. The main view template is rendering properly, showing all elements and the div selector "#cart-wrapper". However, when the main view calls the nest ...

Is it possible to include a border/stroke on a Raphael picture?

Currently, I am attempting to enhance a Raphael image element by adding either a border, stroke, or drop shadow. My end goal is to create an animated glowing border effect. Previously, I successfully implemented this on traditional HTML elements using Java ...

Using Vuejs for Seamless Facebook Social Login

Currently utilizing Laravel Vuejs, I'm attempting to implement social login with the vue-social-auth plugin. However, upon clicking the 'login with Facebook' button, a new Facebook window opens but unfortunately the client id and redirect ar ...

Understanding the concept of inertia within the OrbitControls feature of ThreeJS

I have implemented THREE.OrbitControls to rotate my objects in a project. Yet, I am interested in incorporating some inertia for the camera rotation so that it gradually comes to a stop after the user stops moving the mouse. What would be the best approa ...