How to use the react-google-maps.withGoogleMap function in react-google-maps

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 (

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

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>

import React from 'react'
import { render } from 'react-dom'
import { withGoogleMap, GoogleMap, Polygon, InfoWindow, Marker } from 'react-google-maps'
import axios from 'axios'
import { uploadMapContext } from '../actions'

import LegendContainer from '../containers/legend_container'

const MyApp = withGoogleMap(props => {
  return(
    <div>
      
        
        {props.markers.map((marker, index) =&gt; (
          </div>

import busData from './bus.json';
import Autocomplete from './Autocomplete';
import OpeningHours from './OpeningHours';
import history from '../../history';

import { clean as cleanKennitala, isPerson } from 'kennitala';

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

const Map = withGoogleMap(({ mapOptions, kjorstadur }) => {
  return (
    
      
    
  );
});

const getItineryInfo = ({ duration, distance, type, from, to }) => {
  return {
    walking: {

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import AppBar from 'material-ui/AppBar'
import Dialog from 'material-ui/Dialog'
import AutoComplete from 'material-ui/AutoComplete'
import MenuItem from 'material-ui/MenuItem'
import IconButton from 'material-ui/IconButton'
import FontIcon from 'material-ui/FontIcon'

import {withGoogleMap, GoogleMap, FusionTablesLayer} from 'react-google-maps';
import 'whatwg-fetch'

import About from './About'
import './App.css';

const SimpleExampleGoogleMap = withGoogleMap(props => (
  
    
  
));

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

const CustomSkinMap = withScriptjs(
  withGoogleMap(() => (