react-google-maps

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

由 我只是一个虾纸丫 提交于 2019-12-13 03:46:54
问题 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 perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method." May I know how to solve this? Thank

Create Google Maps Circle and set its radius in React

由 若如初见. 提交于 2019-12-13 01:14:14
问题 Given the below data: [ { "id": 1, "name": "Park Slope", "latitude": "40.6710729", "longitude": "-73.9988001" }, { "id": 2, "name": "Bushwick", "latitude": "40.6942861", "longitude": "-73.9389312" }, { "id": 3, "name": "East New York", "latitude": "40.6577799", "longitude": "-73.9147716" } ] ] I'm creating markers via react-google-maps like this: <Map center={{ lat: 40.64, lng: -73.96 }} zoom={12} places={data} googleMapURL="https://maps.googleapis.com/maps/api/js?key=" loadingElement={<div

create google map with users location with react

由 半腔热情 提交于 2019-12-12 13:03:13
问题 I'm new to React and currently trying to learn how to use react-google-maps library. Tried to show a map with users geolocation as the initialCenter of the map. This is my code: import React from "react"; import { GoogleApiWrapper, Map } from "google-maps-react"; export class MapContainer extends React.Component { constructor(props) { super(props); this.state = { userLocation: { lat: 32, lng: 32 } }; } componentWillMount(props) { this.setState({ userLocation: navigator.geolocation

React + TS + react-google-maps (Property 'getZoom' does not exist on type 'RefObject<GoogleMap>')

由 谁说我不能喝 提交于 2019-12-11 21:25:53
问题 I've been playing around with React, TypeScript and react-google-maps and is currently stuck on a TypeScript error. I want to retrieve the zoom level in the onZoomChanged callback but TypeScript is throwing 'Property 'getZoom' does not exist on type 'RefObject' import React, { Component } from 'react' import { GoogleMap, withGoogleMap, withScriptjs } from 'react-google-maps' import Marker from './marker' import Circle from './circle' import Config from '../infrastructure/config' class Map

Can I use OverlappingMarkerSpiderfier with react-google-maps?

由 五迷三道 提交于 2019-12-11 05:11:24
问题 I'm working on a project which uses react-google-maps (https://github.com/tomchentw/react-google-maps) library. It works well, but we stumbled upon a problem with overlapping markers. Ideal solution to our case would be to use this plugin: https://github.com/jawj/OverlappingMarkerSpiderfier. Is there any way to use it with react-google-maps ? 回答1: How to OverlappingMarkerSpiderfier plugin integrate into react-google-maps 1)install npm-overlapping-marker-spiderfier package: npm i npm

How to stop drawing after completing one polygon or rectangle in DrawingManager on react-google-maps?

由 陌路散爱 提交于 2019-12-08 13:29:35
问题 I'll use my code as a reference: export default class DrawingContainer extends Component { static propTypes = { onPolygonComplete: PropTypes.func }; state = { drawingMode: 'rectangle' }; render() { return ( <DrawingManager drawingMode={this.state.drawingMode} onPolygonComplete={polygon => { this.setState({ drawingMode: '' }, () => { if (this.props.onPolygonComplete) { this.props.onPolygonComplete(convertPolygonToPoints(polygon)); } }); }} onRectangleComplete={rectangle => { this.setState({

React-google-maps - MarkerWithLabel - Labels overlap

由 被刻印的时光 ゝ 提交于 2019-12-07 15:48:21
问题 I'm trying to build a react project with the react-google-maps library. Basically it calculates the best route between 2 points and displays the route on the map using the library above. For drawing I'm using the Polyline and MarkerWithLabel modules: The Polyline to draw the segments The Markers to place the start of a segment The issue that I am having is the position of the labels form the MarkerWithLabel , if the zoom level is set to fit the whole route the labels overlap. This is because

react-google-maps: how to use fitBounds, panBy, panTo, panToBounds public APIs?

由 点点圈 提交于 2019-12-07 14:51:17
问题 According to the React Google Maps library, you can call these four methods from the ref object. What seems weird, is that these methods are supposed to receive two parameters, a map instance and other arguments, like so: fitBounds(map, args) { return map.fitBounds(...args); } However, when calling fitBounds() this way, nothing happens on the map, no bounds are changed and no errors are thrown. This is the way I have structured the component, calling fitBounds in componentDidUpdate: import

react-google-maps how does one get marker position?

由 这一生的挚爱 提交于 2019-12-07 12:21:09
问题 I read the docs and it conveniently outlines the props and methods available. Please look here. My question is, given the example component here: import {withScriptjs, withGoogleMap, GoogleMap, Marker} from "react-google-maps"; class MyParentComponentWrapper extends Component { ... ...// inside react component class mapComponent() { const MyMapComponent = withScriptjs(withGoogleMap((props) =>{ return ( <GoogleMap defaultZoom={18} defaultCenter={{ lat: props.lat, lng: props.lng }} > { props

react-google-maps how does one get marker position?

由 妖精的绣舞 提交于 2019-12-06 01:30:07
I read the docs and it conveniently outlines the props and methods available. Please look here . My question is, given the example component here: import {withScriptjs, withGoogleMap, GoogleMap, Marker} from "react-google-maps"; class MyParentComponentWrapper extends Component { ... ...// inside react component class mapComponent() { const MyMapComponent = withScriptjs(withGoogleMap((props) =>{ return ( <GoogleMap defaultZoom={18} defaultCenter={{ lat: props.lat, lng: props.lng }} > { props.isMarkerShown && <Marker onPositionChanged={()=>{ // This event will trigger the // call to update the
订阅 react-google-maps