pieterv / react-googlemaps Goto Github PK
View Code? Open in Web Editor NEWA declarative React interface to Google Maps
License: MIT License
A declarative React interface to Google Maps
License: MIT License
When loading the frags example, for instance, I get a lot of warnings in the console:
react/lib/merge has been deprecated and will be removed in the next version of React. All uses can be replaced with Object.assign({}, a, b) or _.extend({}, a, b).
frags.js (line 217)
react/lib/mergeInto has been deprecated and will be removed in the next version of React. All uses can be replaced with Object.assign(a, b, c, ...) or _.extend(a, b, c, ...).
frags.js (line 643)
Warning: Something is calling a React component directly. Use a factory or JSX instead. See: http://fb.me/react-legacyfactory
frags.js (line 11031)
Warning: React.renderComponent will be deprecated in a future version. Use React.render instead.
frags.js (line 11031)
Warning: GoogleMapFrags is calling a React component directly. Use a factory or JSX instead. See: http://fb.me/react-legacyfactory
frags.js (line 11031)
Warning: ReactMap is calling a React component directly. Use a factory or JSX instead. See: http://fb.me/react-legacyfactory
frags.js (line 11031)
Warning: transferPropsTo is deprecated. See http://fb.me/react-transferpropsto for more information.
frags.js (line 11031)
Warning: React.isValidComponent will be deprecated in a future version. Use React.isValidElement instead.
frags.js (line 11031)
Warning: DraggableFace is calling a React component directly. Use a factory or JSX instead. See: http://fb.me/react-legacyfactory
I have react 0.12.1 installed via npm.
Need to add noop event handlers within _updateMapProperties
when no custom callback is defined and side effect prop exists.
Any example how to open google maps in streetview mode ?
Module not found: Error: Cannot resolve module 'react/lib/invariant' in /var/www/htdocs/projects/SSS/web/node_modules/react-googlemaps/src/ui
FYI: I'm on [email protected] and can't downgrade because of other dependecies...
is directions api implemented? if not what would be the best approach to get this functionality?
https://developers.google.com/maps/documentation/javascript/examples/directions-travel-modes
Anyone successfully loaded Google's maps API and js only when the component is being rendered?
I followed the installation instruction in the examples, from the root repo
npm install
npm run build-examples
However the following errors occurred:
ERROR in ./src/ReactMapComponents.js
Module not found: Error: Cannot resolve module 'react/lib/mapObject' in /Users/jmart/experiment/react-googlemaps/src
@ ./src/ReactMapComponents.js 4:16-46
ERROR in ./src/ui/MapOption.js
Module not found: Error: Cannot resolve module 'react/lib/invariant' in /Users/jmart/experiment/react-googlemaps/src/ui
@ ./src/ui/MapOption.js 3:16-46
ERROR in ./src/ui/MapEvent.js
Module not found: Error: Cannot resolve module 'react/lib/invariant' in /Users/jmart/experiment/react-googlemaps/src/ui
@ ./src/ui/MapEvent.js 3:16-46
ERROR in ./src/GoogleMapsAPI.js
Module not found: Error: Cannot resolve module 'react/lib/invariant' in /Users/jmart/experiment/react-googlemaps/src
@ ./src/GoogleMapsAPI.js 3:16-46
ERROR in ./src/ui/ReactMapComponent.js
Module not found: Error: Cannot resolve module 'react/lib/invariant' in /Users/jmart/experiment/react-googlemaps/src/ui
@ ./src/ui/ReactMapComponent.js 4:16-46
ERROR in ./src/ui/components/ReactMap.js
Module not found: Error: Cannot resolve module 'react/lib/keyMirror' in /Users/jmart/experiment/react-googlemaps/src/ui/components
@ ./src/ui/components/ReactMap.js 5:16-46
ERROR in ./src/ui/ReactMapComponentMixin.js
Module not found: Error: Cannot resolve module 'react/lib/invariant' in /Users/jmart/experiment/react-googlemaps/src/ui
@ ./src/ui/ReactMapComponentMixin.js 4:16-46
This looks like the simplest library for GoogleMaps, so I decided to try it.
Importing thins like this
import React, { Component } from 'react'
import ReactGoogleMaps, { Map, Marker, OverlayView } from 'react-googlemaps'
const GoogleMapsAPI = window.google.maps
class Example extends Component {
...
Also, I have the google maps script in index.html
<script src="http://maps.googleapis.com/maps/api/js"></script> <script src="bundle.js"></script>But all I get is
ERROR in ./~/react-googlemaps/src/ReactMapComponents.js
Module not found: Error: Cannot resolve module 'react/lib/mapObject' in /home/seba/repos/test_applications/react-redux-cordova-boilerplate/node_modules/react-googlemaps/src
@ ./~/react-googlemaps/src/ReactMapComponents.js 4:16-46
ERROR in ./~/react-googlemaps/src/ui/components/ReactMap.js
Module parse failed: /home/seba/repos/test_applications/react-redux-cordova-boilerplate/node_modules/react-googlemaps/src/ui/components/ReactMap.js Line 55: Unexpected token <
You may need an appropriate loader to handle this file type.
| if (this.state.mapLifeCycleState !== MapLifeCycle.CREATING_HOLDER) {
| map = (
| <GoogleMapsMap
| {...this.props}
| ref="map"
@ ./~/react-googlemaps/src/ui/ReactDefaultInjection.js 7:15-47
ERROR in ./~/react-googlemaps/src/ui/components/ReactOverlayView.js
Module parse failed: /home/seba/repos/test_applications/react-redux-cordova-boilerplate/node_modules/react-googlemaps/src/ui/components/ReactOverlayView.js Line 36: Unexpected token <
You may need an appropriate loader to handle this file type.
|
| React.render(
| cloneWithProps(<div />, props),
| this._containerElement
| )
@ ./~/react-googlemaps/src/ui/ReactDefaultInjection.js 8:23-63
ERROR in ./~/react-googlemaps/src/ui/components/ReactFrag.js
Module parse failed: /home/seba/repos/test_applications/react-redux-cordova-boilerplate/node_modules/react-googlemaps/src/ui/components/ReactFrag.js Line 24: Unexpected token <
You may need an appropriate loader to handle this file type.
|
| return (
| <span>{children}</span>
| );
| }
@ ./~/react-googlemaps/src/ui/ReactDefaultInjection.js 9:16-49
ERROR in ./~/react-googlemaps/src/ui/MapOption.js
Module not found: Error: Cannot resolve module 'react/lib/invariant' in /home/seba/repos/test_applications/react-redux-cordova-boilerplate/node_modules/react-googlemaps/src/ui
@ ./~/react-googlemaps/src/ui/MapOption.js 3:16-46
ERROR in ./~/react-googlemaps/src/ui/MapEvent.js
Module not found: Error: Cannot resolve module 'react/lib/invariant' in /home/seba/repos/test_applications/react-redux-cordova-boilerplate/node_modules/react-googlemaps/src/ui
@ ./~/react-googlemaps/src/ui/MapEvent.js 3:16-46
ERROR in ./~/react-googlemaps/src/GoogleMapsAPI.js
Module not found: Error: Cannot resolve module 'react/lib/invariant' in /home/seba/repos/test_applications/react-redux-cordova-boilerplate/node_modules/react-googlemaps/src
@ ./~/react-googlemaps/src/GoogleMapsAPI.js 3:16-46
ERROR in ./~/react-googlemaps/src/ui/ReactMapComponent.js
Module not found: Error: Cannot resolve module 'react/lib/invariant' in /home/seba/repos/test_applications/react-redux-cordova-boilerplate/node_modules/react-googlemaps/src/ui
@ ./~/react-googlemaps/src/ui/ReactMapComponent.js 4:16-46
ERROR in ./~/react-googlemaps/src/ui/ReactMapComponentMixin.js
Module not found: Error: Cannot resolve module 'react/lib/invariant' in /home/seba/repos/test_applications/react-redux-cordova-boilerplate/node_modules/react-googlemaps/src/ui
@ ./~/react-googlemaps/src/ui/ReactMapComponentMixin.js 4:16-46
What's going on here?
UPDATE: exactly the same thing is happening with the examples repo. I'm starting to think it's not me messing things up
I always get this error when trying to install the package via NPM:
npm ERR! peerinvalid The package reactify does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants reactify@>=0.17.1
I was having this issue
/node_modules/react-googlemaps/src/GoogleMapsAPI.js:6
window.google && window.google.maps,
^
ReferenceError: window is not defined
when i was trying it on isophormic-react. using https://github.com/kriasoft/react-starter-kit
Hey,
i'm currently just playing around, and looked over the source. I saw that you're referencing the window
object at some points. As far as i checked it out this will throw an Error and makes server side rendering impossible. Do you have any plan to support React.renderToString aka. server-side rendering ?
Thanks in advance!
When created a map component like this:
var ReactGoogleMaps = require('react-googlemaps');
var Map = ReactGoogleMaps.Map;
<Map
ref="myMap"
initialZoom={15}
initialCenter={new google.maps.LatLng(53.4335187, 14.5497363)}
</Map>
In the parent component, that created it, I would like to do this.refs.myMap.getMapNode()
. However this is not possible, because the ReactGoogleMaps.Map
is not exposing such method.
My motivation is to centre the map after the component is rendered, in componentDidMount
. I want to do it using map.panTo
method of Google API.
for example,
react-googlemaps/src/ui/components/ReactMap.js
is jsx, not js.
This makes building a little hairy, as it's easier to apply a jsx loader to *.jsx. Webpack works this way.
There is another lib to get react & gmaps to play with each other https://github.com/tomchentw/react-google-maps
Could you describe the difference and suggest what to use and when
Is there any plan to have a version built for react 0.13?
Add the ability to set all options that have a side effect to have an initial prop, e.g. initialZoom
which would set the zoom option when the map on mount but not force the value if a user manually zooms.
I'm getting the following warning after mounting the component. Do you have any plans in improving this?
Warning:
ReactMap is accessing getDOMNode or findDOMNode inside its render(). render() should be a pure function of props and state. It should never access something that requires stale data from the previous render, such as refs. Move this logic to componentDidMount and componentDidUpdate instead.
I can't seem to be able to have a draggable map.
This is how I use it:
<Map
initialZoom={3}
center={new GoogleMapsAPI.LatLng(32.770807, -17.038183)}
width={1000}
draggable={true}
height={1000}>
{markers}
</Map>
When using <Marker>
is it possible to get the actual marker instance (not the React component) so you can use LatLngBounds
, etc.
I'd like to register event listeners with elements contained within OverlayView. However, when I tried something similar to:
<OverlayView>
<div onClick={onClickHandler} />
</OverlayView>
the event handlers don't actually receive the events. Is there a nice way to resolve this?
The MVCArray totally works when it renders, but it just pops up an annoying warning to the console. And more importantly, it lets me add LatLngs to the MVCArray async'ly.
Warning: Invalid prop `path` of type `object` supplied to `Polyline`, expected `array`. Check the render method of `ReactFrag`.
This is an issue of the frag being too tight in PropTypes?
Hi,
I have this error message while I try using the component. Anyone has an idea?
Thanks for helping ! :)
I ran into a bug (I think) with ReactOverlayView. Here's what I think is happening:
MyReactComponent#setState
triggers a re-render (because of Flux in my case).ReactOverlayView#componentDidUpdate
, which calls MapOverlayView#draw
. (Note that MapOverlayView#add
has still not been called.)MapOverlayView#getProjection
returns undefined, so the following error appears: Uncaught TypeError: Cannot read property 'fromLatLngToDivPixel' of undefined
I think the fix is pretty simple -- have ReactOverlayView#componentDidUpdate
check whether __node
has a _containerElement
before drawing (which means that onAdd has been called and drawing is ๐ ).
Pull request incoming, but feel free to push back if there's a better solution.
In your examples
dir's README it says to open index.html which does not exist anywhere in the repo.
I have a simple map with many markers and possibility to select one. Clicking marker updates a controller-view state and the Map rerenders. I have a feeling that all markers are rerendered even if they didn't change. So there is no diffing mechanism like React does it with HTML, rendering only the differences. Is that correct?
It has two unfortunate consequences:
Do you see any solution for these problems?
npm ERR! [email protected] build-examples: webpack --devtool inline-source-map
npm ERR! Exit status 255
npm ERR!
npm ERR! Failed at the [email protected] build-examples script.
npm ERR! This is most likely a problem with the react-googlemaps package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack --devtool inline-source-map
npm ERR! You can get their info via:
npm ERR! npm owner ls react-googlemaps
npm ERR! There is likely additional logging output above.
npm ERR! System Linux 3.13.0-24-generic
npm ERR! command "/usr/bin/node" "/usr/bin/npm" "run" "build-examples"
npm ERR! cwd /home/user/Business/hackathon/react-hot-boilerplate/node_modules/react-googlemaps
npm ERR! node -v v0.10.33
npm ERR! npm -v 1.4.28
npm ERR! code ELIFECYCLE
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.