Skip to main content
89 questions
Newest Active Bountied Unanswered
Filter by
Sorted by
Tagged with
2 votes
2 answers
149 views

I have a Map component in my React project, which receives a prop of a current hotel and is supposed to retrieve and present the hotel's location on a Google Map React Map. This is the code of my ...
KarinP's user avatar
  • 173
2 votes
0 answers
130 views

What I'm doing: I'm using @react-google-maps/api with React, rendering some markers + popup div. I'm using OverlayView for the markers on the map. When I click a pin - I show an info div for that pin....
Dave's user avatar
  • 5,436
0 votes
2 answers
317 views

I'm using google-map-react version 2.2.0 in my React application. I've encountered an issue where this component injects a tag into the head of my page, specifically: <link type="text/css&...
John's user avatar
  • 5,031
1 vote
1 answer
115 views

This component passes in the address then uses another API to get the latitude and longitude. The latitude and longitude are then passed into the google-map-react API to be converted into a map. But I'...
ccy's user avatar
  • 29
1 vote
1 answer
499 views

I have used the @react-google-maps/api library to add a google map and show some custom marker icons on the google map. I have followed the documentation found in here. And added a marker. I have ...
Cham's user avatar
  • 867
1 vote
0 answers
86 views

I am trying to implement the simple example shown on the google-map-react npm website found here, https://www.npmjs.com/package/google-map-react, but I can't seem to get the API key to translate onto ...
LuckyPierre's user avatar
  • 31
0 votes
0 answers
285 views

Struggling hard with this issue... I need a map on my react app that can change its center dynamically based on data passed in. Map loads with this current code. Tried to pass lat, lng props into ...
NotGoodatCoding90's user avatar
  • 1
9 votes
2 answers
3k views

I am adding a map with a marker marking a fixed location in my React app, all works fine, but if I zoom out, the marker moves around and goes further to the right of where it should do. import ...
Danny Jebb's user avatar
  • 981
-1 votes
1 answer
136 views

Trying to learn React and following this tutorial:https://youtu.be/GDa8kZLNhJ4?t=3547 There you have a App.js component that makes Travel Advisor API call that populates the data object: import React, ...
PinPiguin's user avatar
  • 487
0 votes
1 answer
805 views

can anyone help me out and explain how I can set another state in this component: export class MapContainer extends Component { constructor(props) { super(props); this.state = { ...
mcdoodle's user avatar
  • 3
0 votes
1 answer
2k views

According to https://www.npmjs.com/package/google-map-react, the marker on the map get its location on the map from the longitude and latitude from props. import React from "react"; import ...
Rongeegee's user avatar
  • 1,158
0 votes
2 answers
850 views

I've been hitting the issue mentioned in this thread where, when using the ref callback the refs are updating AFTER componentDidMount. Apparently this can happen when you pass refs to elements that ...
Weardian's user avatar
  • 221
3 votes
0 answers
208 views

I'm rather new to React & I'm trying to make a map that allows you to drag an infinite number of markers from a sidebar onto the google map. import GoogleMapReact from 'google-map-react'; import { ...
rayleigh's user avatar
  • 31
1 vote
1 answer
2k views

I use google-map-react and I want to have the correct zoom and center to the map. To center the map I use the props center on GoogleMapReact component that I can calculate. But for the zoom it is more ...
Lucas Bodin's user avatar
  • 356
1 vote
2 answers
8k views

Everyone I am using google-map-react and not react-google-map. Can you help me drawing a line between two points. <div className='videoDetails__map'> <GoogleMapReact ...
Fakhar Abbas's user avatar
  • 49
0 votes
1 answer
964 views

I'm developing a basic nextjs app with the google-map-react component and nextjs. I got the following error every time I try to use the component TypeError: can't access property "getChildren&...
Matt's user avatar
  • 1
1 vote
0 answers
27 views

I am new to React Google Maps. I am using this library to create a map with several locations and trying fit the boundaries and center it. I am using it to locate restaurants, hotels and all on that ...
Gaurav's user avatar
  • 11
10 votes
4 answers
8k views

import React from "react"; import GoogleMapReact from "google-map-react"; const AnyReactComponent = ({ text }) => <div>{text}</div>; export default function ...
Suraj Regmi's user avatar
  • 253
4 votes
2 answers
10k views

I'm not sure what I'm doing wrong. I'm trying to use google-map-react in my Next.js application. I copied the example on their npm page almost verbatim. Here's the code: import React from "react&...
neilge's user avatar
  • 331
0 votes
2 answers
5k views

i want to get the coordinates of google map react onclick. this is my code : return ( <GoogleMapReact google={this.props.google} styles={customizeMap} style= {ukuran} ...
Rival_D21's user avatar
  • 1
1 vote
1 answer
530 views

I'm using google-map-react to display places on google map with auto-suggestion feature, following example here: https://www.freakyjolly.com/google-maps-in-react-example-application. I'm using ...
Yang Liu's user avatar
  • 771
2 votes
0 answers
337 views

onGoogleApiLoaded not invoked on locations data change, Is there any way to achieve this? I tried to use useEffect to load markers but then I have to save map and maps objects in useRef as well as ...
Abhijit Desai's user avatar
  • 157
0 votes
1 answer
712 views

{!loading ? ( <GoogleMapReact defaultZoom={isEqual(latLong, USLatLong) ? 4 : 18} defaultCenter={latLong.lat && latLong.lng ? latLong : USLatLong} ...
Mohammed Mak's user avatar
  • 47
1 vote
0 answers
3k views

I'm using google-maps-react library for maps in my react application, and I'm adding search address functionality in my application and facing CORS error. Error: Autocomplete.js import React, { ...
Zain Khan's user avatar
  • 1,890
0 votes
1 answer
926 views

In React, I'm trying to make an onClick event point a marker on a map to a new location using google-map-react library. My map is showing and I have a button on the map but I'm not sure how to make a ...
Victor Ok's user avatar
  • 11
1 vote
1 answer
344 views

NOT DUPLICATE BECAUSE: Because I am specifically using the "google-map-react" npm package to handle the Google Maps API I don't believe this is a duplicate question. This is more a question ...
Sheldonfrith's user avatar
  • 3,386
0 votes
1 answer
549 views

CSP Issue: Our project have strict content security issue i.e. we are using style-src * and cannot add unsafe-inline option here. I am getting "refused to apply inline styles error" and CSS ...
Vishal Shinde's user avatar
  • 11
0 votes
0 answers
606 views

I am using google-map-react to render a google map, for a path, using GPS positions. At the moment, I am rendering a path in a single colour. I would like to change the colour of the line, based on ...
Craig's user avatar
  • 18.9k
1 vote
1 answer
1k views

I have made the marker so it is draggable on the map. I am trying to get the coordinates from the marker though so I can save them into my database. Below is the code , is there a function that I can ...
jman4934's user avatar
  • 33
-2 votes
2 answers
2k views

Tech Stack - Google Map Directions Api, React JS, etc. Problem Statement - Using google maps direction Api's i am drawing 3 pins i.e. origin, waypoints and destination. I am able to plot all these of ...
F-Developer's user avatar
  • 87
0 votes
1 answer
2k views

I'm trying to get my position on a map and it works fine on my computer in Google Chrome, but when simulating to android/iPhone nothing happens when using for example Custom Location on iPhone ...
Michael's user avatar
  • 1
2 votes
2 answers
2k views

Just to be clear I am using react-google-map https://www.npmjs.com/package/google-map-react and I followed the documentation clearly and I was able to get it working. here is my code. import React ...
Shri Hegde's user avatar
  • 572
-2 votes
2 answers
771 views

Any idea how to disable these bubbles on my embedded google map? I'm embedding this into a react/typescript app with react-google-map Here is my code : import React, { FC, useState, useEffect } from '...
Dlongnecker's user avatar
  • 3,067
-1 votes
1 answer
3k views

I am using react-google-maps and I am able to display location based on lan and lat but I can not find any way to display location using shared link for example https://goo.gl/maps/YBuwmbwH21yUE19Z9 I ...
Tania Gupta's user avatar
  • 11
3 votes
1 answer
5k views

I have this : <GoogleMapReact bootstrapURLKeys={{ key: 'key' }} defaultCenter={center} defaultZoom={zoom} > <TacoMarker link={shop.id} lat={latitude} lng={...
lautaro's user avatar
  • 53
0 votes
1 answer
769 views

I'm trying to handle the click event of a button inside a google.maps.infoWindow. I tried to pass the function name to onClick via infoWindow contents but didn't work. So, I moved to getElementById ...
bmalbusca's user avatar
  • 377
2 votes
0 answers
307 views

Being very new to React TS, I'd like some help on managing the sessionEntity variable. I load data from DB using a function called getEntity(). On dev env. the code below works just fine. On prod ...
Mohamed Taher Alrefaie's user avatar
  • 16.3k
0 votes
1 answer
467 views

I've been creating a small website using NextJS. I used formik and google-map-react to validate a form and show a basic map. IE11 is "not cooperating" in using these libraries. I've tried ...
Kurt Van Hal's user avatar
  • 35
0 votes
1 answer
2k views

After figuring out how to deal with TypeScript and use-supercluster library I have "made it work" until I got a new problem: I get an empty array whenever I use useSuperCluster() function. I ...
Maramal's user avatar
  • 3,494
0 votes
1 answer
593 views

I have a map component where I need to pass default coordinates which will be coming from custom useSwr hook. After fetching the data I pass them to the state and render it if the values or not ...
em_code's user avatar
  • 438
-2 votes
1 answer
693 views

I'm using the google-map-react component and I'm attempting to set the coordinates of the position the user clicked on. I have the coordinates, however the first time I click on the map (and the click ...
Andre MacNamara's user avatar
  • 19
3 votes
1 answer
8k views

This works beautifully on a computer, but I just tried testing it on mobile, and none of the onChildMouse event handlers are recognized. I've tried finding other event handlers, but onChildMouseXXX is ...
gwalshington's user avatar
  • 1,535
1 vote
1 answer
348 views

Trying to use google-maps-react library. i imported the following:import {Map,Marker, GoogleApiWrapper} from 'google-maps-react' one thing is unclear here and i could not find answer on tutorials. <...
Yasin's user avatar
  • 387
0 votes
1 answer
110 views

I am getting geocode locations into the latt,lngg variables through axios and setState , i want to use this variables inside google-map-react package center How can i pass these state values into ...
AnotherOne's user avatar
  • 111
1 vote
1 answer
937 views

Using the google-map-react package, I've created a MapView component in TypeScript as follows. export function MapView<I extends Mappable>({ getData }: MapViewProps<I>): JSX.Element { ...
jonchaf's user avatar
  • 166
0 votes
0 answers
669 views

Hi I am implementing google map in my nextjs app Here is my map.js component file import { AsYouType } from 'libphonenumber-js' import { useState } from 'react'; import {get_location_slug} from '../...
Puja Garg's user avatar
  • 251
1 vote
0 answers
48 views

I have two json arrays with which I am trying to produce Markers on a Map. I'm getting the error: Attempted import error: 'find' is not exported from './data/geoData.json' (imported as 'geoData'). ...
Jim from Princeton's user avatar
  • 741
1 vote
1 answer
4k views

Hi I am creating nextjs Application in which I have used GoogleMapReact from google-map-react library,I want to re-render my GoogleMapReact component according to the new prop here is my map.js file ...
Puja Garg's user avatar
  • 251
2 votes
1 answer
3k views

My code is working fine on localhost, I am using google-map-react package to render map on my react app but when i merged the code in QA or PROD environment the map gets loaded for a second and then ...
Minks's user avatar
  • 55
2 votes
0 answers
112 views

I've been struggling a lot lately with the pagination of a list. The issue Each element of that list contains a tiny map and several other information. That list was displaying the map of each row the ...
Tupac's user avatar
  • 83

1
2