Questions tagged [react-google-maps]

Questions regarding Reactjs component for google maps by tomchentw.

Questions regarding Reactjs component for google maps by tomchentw. https://github.com/tomchentw/react-google-maps.

462 questions
1
vote
2 answers

React - hovering over dynamically generated component calls render method

My app contains a google map that displays markers based on coordinates from an API. Upon the loading the app, an API request is made and a few coordinates are grabbed to be displayed on the screen. The API data is mapped to a component.…
asus
  • 1,427
  • 3
  • 25
  • 59
1
vote
0 answers

How to render view in react google map marker?

I need to draw the circle inside my marker and change their circle color dynamically, do we have any options to render view in react google map icon. My marker looks similar to the below link picture and i need to draw the circle inside the marker…
Abtisam Ahmed
  • 85
  • 1
  • 8
1
vote
1 answer

react-google-maps: MarkerWithLabel AND InfoWindow?

I've been trying to get MarkerWithLabel to work with InfoWindow but it doesn't seem to be working since MarkerWithLabel expects only a single child. which is the label where Marker accepts a single child which is the InfoWindow.
hojoyi
  • 11
  • 1
1
vote
1 answer

how to set bound property in google map in react?

could you please me how to show polylines on viewport using bounds or getBounds properties? currently my polyline are visible but I need to zoomout . I want to use bound property to show my line on viewport without zoomout. here is my…
user944513
  • 12,247
  • 49
  • 168
  • 318
1
vote
0 answers

In react-google-maps Try to use fitbounds in componentDidMount lifecycle but get "Can't perform a React state update on an unmounted component."error

I'm trying to follow tutorials make bounds and center the map based on all the marks when the map is first rendered. It works on the map page, however I got this error when I use back button to go to other pages. "index.js:1446 Warning: Can't…
Ying
  • 299
  • 1
  • 5
  • 20
1
vote
0 answers

How can I set a onClick function to the MarkerWithLabel Children elements?

I can't set onClick functions to the MarkerWithLabel children elements. I want to create a MarkerWithLabel to display a simple Component, a div with a few h1 elements, I want to log something different when the user clicks any of the h1 elements,…
dancalderon
  • 65
  • 1
  • 9
1
vote
1 answer

Unused div is appearing on react google maps and I can't style it

I'm using React Google Maps and I'm trying to style it. I want to place two divs in a container of 100% width. Both of them needs to have 50% width but React Google Maps is adding a div which I can't style it. GoogleMap.js: import React, {…
Freelancer Help
  • 151
  • 1
  • 3
  • 13
1
vote
0 answers

How to import SVG file to use in image path?

I'm importing a PNG image and passing it to an external component (@react-google-maps) to use as an icon. PNG import works fine, but the SVG file does not. I've never worked with SVGs before so I must be misunderstanding something. Might I be…
colemars
  • 979
  • 3
  • 12
  • 25
1
vote
1 answer

Async issues with geolocation and react-google-maps

I'm implementing google maps directions in a react component and am struggling using navigator.geolocation as the starting location. Warning: I'm rather new to React and Node. I have two main methods which are invoked within ComponentDidMount,…
max
  • 256
  • 1
  • 3
  • 7
1
vote
1 answer

How Can I Change a React-Google-Maps Polygon's Style Options onHover?

I am unable to get a polygon to show/hide using the onMouseOver/onMouseOut events. So far I've tried directly manipulating the options via this, and using a parent's state passed down via props with ternary operators for the option values. const…
Spencer Fink
  • 149
  • 1
  • 11
1
vote
1 answer

Is there a way to set maximum and minimum radius for circle in react-google-maps?

I'm using react-google-maps circle and while changing the circle radius I'm unable to prevent it to the maximum and minimum radius limits, can anyone help me with this, Thank you. and below is my code
1
vote
2 answers

Show my current location icon in React google map

Do we have any way to show current location icon in google maps by using react google maps I could not find any such props for showing current location icon in the documentation Documtation_link. here is my component i just need to show user…
user8590996
1
vote
1 answer

React Google Maps not displaying HeatMap , lat and long not working for my positions

This what i want, each marker to be sharing the same position as the lat and lng as the heatmap, the markers are working perfectly Im having problems sending data towards my heatmap, it seems like The heatmap from google receives and latitude and…
1
vote
0 answers

Freezing of browser when attempting to unmount 4k+ Markers on react-google-maps

I'm building a React app in which many Markers are displayed on a react-google-maps map. The user can filter the Markers so that not all are displayed at once. Displaying 4000 Markers with a MarkerClusterer works fine. It takes a resonable amount of…
1
vote
0 answers

How to use google map services with dynamically updated google api key?

I'm developing an admin panel for controlling some of the users with REACT. So in that, I'm using react-google-maps third-party module to enabling google map services with dynamically changing google API key by admin. Here, after changing API key by…
user10269224
  • 73
  • 10