Google Maps on React Hooks

[stepanushariara]

Hi guys,

My project is fully build in react hooks and i want to use google maps react but im stuck to convert as a functional for this :

import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';

export class MapContainer extends Component {
  render() {
    return (
      <Map google={this.props.google} zoom={14}>

        <Marker onClick={this.onMarkerClick}
                name={'Current location'} />

        <InfoWindow onClose={this.onInfoWindowClose}>
            <div>
              <h1>{this.state.selectedPlace.name}</h1>
            </div>
        </InfoWindow>
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE)
})(MapContainer)

Anyone can help me ?

[duongnguyen8]

import React, { useRef, useMemo } from 'react';
import { Map, Marker, GoogleApiWrapper, Circle } from 'google-maps-react';
import PropTypes from 'prop-types';

export const GeoDistanceForm = ({ form, , google }) => {
  const {
    getFieldDecorator,
    getFieldValue,
    setFieldsValue,
    resetFields,
  } = form;

  return (
    <div>
    </div>
  );
};

GeoDistanceForm.propTypes = {
  form: PropTypes.shape({}).isRequired,
  google: PropTypes.shape({}).isRequired,
};

GeoDistanceForm.defaultProps = {
};

export default GoogleApiWrapper({
  apiKey: googleMapsKey, // google maps key
  libraries: ['places'],
})(GeoDistanceForm);

[GBelonozhko]

I have the same issue but the code provided isn't working am i missing something?

[duongnguyen8]

could you provide your code here, react hooks works fine for me

[GBelonozhko]

I just copied the code posted and replaced my map code that is very similar to the one posted in the question. There wasn't any data being sent into the function. Witch is why I'm guessing it didnt work. I did manage to get the maps working in hooks but it was still a class based component and for some reason I cant figure out it changes the text making things bolded and shifted slightly. At the end of the day everything "works" but any component that I use that implements google maps the style gets changed and those pages loose their uniformity. This happens with every single google maps node module I've tried so far that was built using classes. I got to a point where I just took off the map for now until I find or make a suitable replacement.

[duongnguyen8]

import React, { useRef } from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';
import PropTypes from 'prop-types';

export const Geo = ({ google }) => {
  console.log(google);
  const mapRef = useRef(null);

  return (
    <Map 
        ref={mapRef}
        google={google}
        containerStyle={{
          height: '40vh',
          width: '100%',
          position: 'relative',
        }}
        center={{
           lat: 40.854885,
           lng: -88.081807
         }}
         zoom={15}

    />
  );
};

GeoDistanceForm.propTypes = {
  google: PropTypes.shape({}).isRequired,
};

GeoDistanceForm.defaultProps = {
};

export default GoogleApiWrapper({
  apiKey: googleMapsKey, // google maps key
  libraries: ['places'],
})(Geo);

[SimantoR]

Has this been resolved? I used it with React.FC, works fine on my end. I even used typescript:

import React, { Component } from 'react';
import { Coords } from '../resources/types';
import {
  Map,
  Marker,
  MapProps,
  InfoWindow,
  ProvidedProps,
  InfoWindowProps,
  GoogleApiWrapper
} from 'google-maps-react';

interface Props extends ProvidedProps {
  points?: Coords[]
}

interface States {
  marker?: any
  showInfo: boolean
}

class DataMap extends Component<Props, States> {
  private mapRef = React.createRef<Map>();
  constructor(props: Props) {
    super(props);
    this.state = {
      showInfo: false
    }
  }

  onMarkerSelect = (props: any, marker: any, e: any) => {
    this.setState({
      marker: marker,
      showInfo: true
    });
  }

  render() {
    const { showInfo, marker } = this.state;
    const { points } = this.props;
    let center: Coords = { lat: 45, lng: 45 }

    if (points) {
      let midX = 0;
      let midY = 0;
      points.forEach(({ lat, lng }) => {
        midX += lat;
        midY += lng;
      });
      center.lat = midX / points.length;
      center.lng = midY / points.length;
    }

    let infoWinProps = {
      marker: marker,
      visible: showInfo,
      google: this.props.google
    } as Partial<InfoWindowProps>;

    return (
      <Map
        ref={this.mapRef}
        draggable
        zoom={4}
        initialCenter={center}
        google={this.props.google}
      >
        {points && points.map((pos, i) => (
          <Marker onClick={this.onMarkerSelect} position={pos} />
        ))}
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'AIzaSyAoRpWSXL16EnnFQqFfkRtfMCKJJTMzvk8'
})(DataMap)

[GiselaMD]

I am having problem to use the reference in my component, for example:

myMapRef.current.map.setOptions({
      zoomControlOptions: {
        position: window.google.maps.ControlPosition.LEFT_BOTTOM,
      },
      mapTypeControlOptions: {
        position: window.google.maps.ControlPosition.RIGHT_TOP,
      },
    });

But it says Property 'map' does not exist on type 'Map'.ts(2339)