pieterv / react-googlemaps Goto Github PK

Any example how to open google maps in streetview mode ?

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:

1. Decrease of performance with growing number of markers.
2. Flickering of markers if they overlap -- I suppose they are rendered assynchronously in slightly different order everytime. You can check that behavior on http://windfreaks.net.

Do you see any solution for these problems?

When using <Marker> is it possible to get the actual marker instance (not the React component) so you can use LatLngBounds, etc.

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

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

Is there any way of setting width to be 100% of wrapping container ?

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.

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.

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

In your examples dir's README it says to open index.html which does not exist anywhere in the repo.

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?

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?

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

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!

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

Need to add noop event handlers within _updateMapProperties when no custom callback is defined and side effect prop exists.

Is there any plan to have a version built for react 0.13?

I ran into a bug (I think) with ReactOverlayView. Here's what I think is happening:

1. MyReactComponent renders a Map component with overlays.
2. Before the Google Maps JS can add the overlays to the Google Map, MyReactComponent#setState triggers a re-render (because of Flux in my case).
3. React calls ReactOverlayView#componentDidUpdate, which calls MapOverlayView#draw. (Note that MapOverlayView#add has still not been called.)
4. 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.

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

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.

Hi,

I have this error message while I try using the component. Anyone has an idea?

Thanks for helping ! :)

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

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.

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 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>

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...

Anyone successfully loaded Google's maps API and js only when the component is being rendered?