How to use react-google-maps - 10 common examples

Meteor.call('Events.getFutureEvents', data, (err, res) => {
          if (!err) {
            this.setState({
              events: res,
              filteredEvents: res
            })
            this.memoizeLocations = {} // reset caching
          }

          this.setState({ isFetching: false })
        })
      }
    }
  }
}
const MapComponent = withScriptjs(withGoogleMap(MapComponent_))

class Map_ extends Component {
  render () {
    const { key } = Meteor.settings.public.gm
    const url = 'https://maps.googleapis.com/maps/api/js?key=' + key + '&v=3.exp&libraries=places'

    return (
      }
        containerElement={<div id="map-container">}
        mapElement={<div id="map">}
        history={this.props.history}
      /&gt;
    )
  }</div></div>

import { getServicePoint, updateServicePoint, replaceServicePoint } from 'store/actions/service-point'

import * as authSelectors from 'store/selectors/auth'
import * as servicePointSelectors from 'store/selectors/service-point'

import { GOOGLE_API_KEY } from 'store/constants/api'


import { 
  renderTextField, 
  renderDropzoneImage, 
  renderAutoComplete,
} from 'ui/backend/shared/utils'


const ServicePointGoogleMap = withGoogleMap(({position}) => (
      
    
))

const validate = (values) => {
  const errors = {}
  // first time it is empty
  if(!values) return errors
  if (!values.name) {

import * as React from "react";
import { FieldProps } from "formik";
import Geosuggest, { Suggest } from "react-geosuggest";
import { withGoogleMap, GoogleMap, Marker } from "react-google-maps";

import "./geo.css";

interface DefaultCenter {
  lat: number;
  lng: number;
}

// -34.397, lng: 150.644
const MapWithAMarker = withGoogleMap<{
  defaultCenter: DefaultCenter;
  lat: number;
  lng: number;
  onClick: (e: google.maps.KmlMouseEvent | google.maps.MouseEvent) => void;
}>(props => (
  
    
));

interface State {
  defaultCenter: DefaultCenter | null;

import React from "react";
import {
  withGoogleMap,
  withScriptjs,
  GoogleMap,
  Marker,
} from "react-google-maps";

// styles
import useStyles from "./styles";

const BasicMap = withScriptjs(
  withGoogleMap(() => (
    
      
  )),
);

export default function Maps() {
  var classes = useStyles();

  return (

);
  }
}

const mapState = state => ({
  ipInfo: state.app.ipInfo,
  offerStores: state.exchange.offerStores,
});

const mapDispatch = dispatch => ({
  // rfChange: bindActionCreators(change, dispatch),
});

export default injectIntl(
  connect(mapState, mapDispatch)(withScriptjs(withGoogleMap(Map))),
);

render(){
		const AsyncMap = withScriptjs(
			withGoogleMap(
				props => (
					
						{/* InfoWindow on top of marker */}
						
							<div>
								<span style="{{">{ this.state.address }</span>
							</div>
						
						{/*Marker*/}

// used to display a line between the various versions' position markers
    const polylineJSX = (

import React from 'react'

import { GoogleMap, withGoogleMap, withScriptjs } from 'react-google-maps'

const GMap = withScriptjs(
  withGoogleMap(props => ),
)

export default function Map(props) {
  return (
    }
      containerElement={<div style="{{">}
      mapElement={<div style="{{">}
    /&gt;
  )
}
</div></div>

render() {
    const Map = withScriptjs(withGoogleMap(RelocationMap));
    return (
      <div>
        <map style="{{">}
          containerElement={<div style="{{">}
          mapElement={<div style="{{">}
          {...this.props}
        /&gt;
        <img alt="marker" height="{30}" width="{30}" src="{currentLocationIndicator}">
      </div>
    );
  }
}</div></map></div>