I have a component where i get the distance from one point to another, with Google Maps (DirectionsRenderer). What i want, is to use this data in a h1 This is my return EDIT: ShowProduct.js (This is where i get the distance) ProductCard.js (This is where want to use it) Answer You need to set up a state using useState
Tag: google-maps
Javascript – Google map not displaying
I am trying to create a page that shows google map and allows users to draw lines on the map and save them.. but when I try to run the page, the map doesn’t show up at all. What am I doing wrong? the page is literally blank with the form at the end. I was having a look online
Get new location and radius from Circle component in React Google Maps API
I’m using React Google Maps API package to create a map component with a circle component inside it. Here is the package from the npm registry https://www.npmjs.com/package/@react-google-maps/api. I’m using Circle component inside a Google Map component. I set the Circle to be draggable and resizable. I need to get the new value of center for every drag action and get
Draw Lines between Multiple markers on Google Map
I am little new in JavaScript and Google Map. I am trying to draw lines between my multiple location. I am following this example. My Code is like this Its showing places fine and without issue. Its just not drawing the lines. I am getting error like below I am not getting idea what I should do for fix the
Google Maps can’t read property ‘extend’ of undefined after page load
I’m trying to increase page speed by loading my Google Maps two seconds after page load. While doing so, I keep on getting “Cannot read property ‘extend’ of undefined”. I know there is some asynchronous loading going on but I’m not sure how to get it in proper order to get this map to load 2 seconds after the page
Map markers not clustering
I have a map which has multiple markers within close proximity of each other. Trying to integrate the marker clustering through google dev kit. However the clustering is not occuring, and am also not getting an error in console – which makes it somewhat tricky. Map data being used: Javascript: Which is displaying the map in html via the div
google-maps-react – Specific Pins not Showing up until Click
SparkNotes: I’m pulling in a crime API to see hotspots. Certain crimes will not be logged with a lat/long, therefore, are not shown up in standard (free) crime apps. Lat/Long pins I’ve overridden to a new lat/long don’t show up on first load/or at all. (google-maps-react) (Confirmed lat/long is valid per crimes in near areas.) Normal pins that had an
How to change marker label color of react-google-maps
I am using @react-google-maps/api library. I’ve integrated google map but I am facing marker label color, I tried very hard but didn’t find any solution. Could someone please help me with how to resolve this issue. Answer Try this: label: {text: `${id}`, color: “blue”}
Google Maps, info window not working with multiple markers after getting all markers in the bounds of window
I have multiple markers being add dynamically to a map. I need the map to focus on all markers displayed on the map. This will vary depending on input in search fields. I also need an info window for each marker. I had the info window working before I got the map to focus on all of the markers. Now
‘google’ is not defined Using Google Maps JavaScript API Loader
I have a Vue CLI project that uses the Google Maps JavaScript API Loader. I import the loader using the code below: After that, I defined the loader, like so: Now, when I try to display a map using the google.maps.Map object, I get an error stating that ‘google’ is not defined. All the code above is in the project’s