map reworked to handle arbitrary pin locations and new google maps version

Author: nrl240

App.jsx

@@ -1,6 +1,5 @@
 import React, { Component } from "react";
 import { Route, Switch } from "react-router-dom";
-// import GoogleMap from "./GoogleMap";
 import Map from './components/maps/Map';
 import Login from "./Login";
 import Sidebar from "./Sidebar";

components/GoogleApi.jsx

@@ -1,16 +1,21 @@
 import React from 'react'
-import { GoogleApiWrapper } from 'google-maps-react'
 import createContext from 'create-react-context'
 
 const ApiContext = createContext(null)
 
-export const GoogleProvider = GoogleApiWrapper({
-  apiKey: "AIzaSyBNO9SHxnyzMG6J1FCDYcle7DjXMjg6jBU"
-})(
-  ({google, children}) =>
-    <ApiContext.Provider value={google}>{
+export class GoogleProvider extends React.PureComponent {
+  async componentDidMount() {
+    await window.__googleHasLoaded__
+    this.setState({loaded: true})
+  }
+
+  render() {
+    if (!window.google) return null
+    const {children} = this.props
+    return <ApiContext.Provider value={window.google}>{
       children
     }</ApiContext.Provider>
-)
+  }
+}
 
 export default ApiContext.Consumer

components/MapView.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import GoogleMap, {Marker} from './maps/Map'
+import GoogleMap, {Marker, Info} from './maps/Map'
 import {Map} from 'fireview'
 import firebase from '~/fire'
 import debounce from 'debounce'
@@ -35,32 +35,61 @@ const writeTags = debounce(
 
 const TagInput = ({ from, style }) =>
   <Map from={from}
-      Render={
-        ({ tags }) =>
-          <input
-            style={style}
-            defaultValue={tagsAsString(tags)}
-            onChange={setTags(from)} />
-      } />
+    Render={
+      ({ tags }) =>
+        <input
+          style={style}
+          defaultValue={tagsAsString(tags)}
+          onChange={setTags(from)} />
+    } />
+
+
+export default class Editor extends React.Component {
+  state = {adding: null}
+
+  mapWasClicked = ({latLng}) =>
+    this.setState({adding: latLng})
+
+  addPlace = latLng => evt => {
+    evt.preventDefault()
+    return this.props.of.collection('places').add({
+      position: new GeoPoint(latLng.lat(), latLng.lng()),
+      name: evt.target.name.value
+    }).then(() => this.setState({adding: null}))
+  }
+
+  get addPlaceWindow() {
+    const {adding} = this.state
+    if (!adding) return null
+    return (
+      <Info position={adding}>
+        <form onSubmit={this.addPlace(adding)}>
+          <input name="name" />
+          <input type="submit" value="➕" />
+        </form>
+      </Info>
+    )
+  }
+
+  render() {
+    const {of} = this.props
 
-export default ({ of }) => <div style={{position: 'relative'}}>
-  <GoogleMap
-    onClick={
-      ({latLng}) =>
-        of.collection('places').add({
-          position: new GeoPoint(latLng.lat(), latLng.lng())
-        })
-    }
-    defaultCenter={{lat: 40.732540, lng: -74.005120}}
-    defaultZoom={10}>
-    <Layer map={of} />
-  </GoogleMap>
-  <TagInput
-    from={of}
-    style={{
-      top: '9px',
-      right: '9px',
-      position: 'absolute',
-      zIndex: 500000,
-    }} />
-</div>
+    return <div style={{position: 'relative'}}>
+      <GoogleMap
+        onClick={this.mapWasClicked}
+        defaultCenter={{lat: 40.732540, lng: -74.005120}}
+        defaultZoom={10}>
+        <Layer map={of} />
+        {this.addPlaceWindow}
+      </GoogleMap>
+      <TagInput
+        from={of}
+        style={{
+          top: '9px',
+          right: '9px',
+          position: 'absolute',
+          zIndex: 500000,
+        }} />
+    </div>
+  }
+}

components/maps/Map.jsx

@@ -17,11 +17,18 @@ const db = firebase.firestore();
 
 const { Provider, Consumer } = createReactContext(null)
 
+export const MapConsumer = Consumer
+
 export const Marker = props =>
   <Consumer>{
       map => map && <RenderMarker map={map} {...props} />
   }</Consumer>
 
+export const Info = props =>
+  <Consumer>{
+      map => map && <RenderInfoWindow map={map} {...props} />
+  }</Consumer>
+
 class RenderMarker extends Component {
   componentDidMount() {
     this.marker = new google.maps.Marker(this.props)
@@ -36,30 +43,65 @@ class RenderMarker extends Component {
   }
 }
 
-class GoogleMap extends Component {
+class RenderInfoWindow extends Component {
+  node = document.createElement('div')
+
   componentDidMount() {
-    this.loadMap(this.props);
+    this.win = new google.maps.InfoWindow({
+      content: this.node,
+      ...this.props,
+    })
+    this.win.addListener('close', console.log)
   }
 
   componentWillReceiveProps(props) {
-    this.loadMap(props);
+    if (props.position !== this.props.position)
+      this.win.setPosition(props.position)
   }
 
-  loadMap({ google, onClick }) {
+  componentWillUnmount() {
+    this.win.close()
+  }
+
+  render() {
+    return ReactDOM.createPortal(this.props.children, this.node)
+  }
+}
+
+class GoogleMap extends React.PureComponent {
+  componentDidMount() {
+    this.setup(this.props);
+  }
+
+  componentWillReceiveProps(props) {
+    this.setup(props);
+  }
+
+  setup({ google, onClick }) {
     if (!google) return;
 
+    const map = this.initMap(google)
+
+    onClick && map.addListener('click', onClick)
+  }
+
+  initMap(google) {
+    if (this.map) return this.map
+
     const maps = google.maps;
     const node = this.refs.map;
 
     const map = new maps.Map(node,
       {
       center: this.props.defaultCenter,
       zoom: this.props.defaultZoom,
-      mapTypeId: "roadmap"
+      mapTypeId: this.props.defaultType || "roadmap"
     });
 
-    onClick && map.addListener('click', onClick)
+    this.map = map
     this.setState({map})
+
+    return map
   }
 
   render() {

public/index.html

@@ -4,7 +4,13 @@
     <link rel="stylesheet" href="/main.css">
   </head>
   <body>
-    <div id="main" />
-    <script async defer src="/bundle.js"></script>    
+    <div id="main"></div>
+    <script>
+      window.__googleHasLoaded__ = new Promise(resolve =>
+        window.__initGoogleMap__ = resolve)
+    </script>
+    <script async defer src="/bundle.js"></script>
+    <script
+      src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBNO9SHxnyzMG6J1FCDYcle7DjXMjg6jBU&callback=__initGoogleMap__"></script>
   </body>
 </html>