Google-Maps-React with TypeScript. Error with parameters

Question

So I am using TypeScript for this file.

import React, {Component} from 'react'
import {Map, InfoWindow, Marker, GoogleApiWrapper, mapEventHandler, markerEventHandler} from 'google-maps-react';
import { coordinates } from '../customerPage'

const mapStyle = {
    width: '920px',
    height: '500px'
}

export class MapContainer extends Component{
    onMapClicked: mapEventHandler;
    onMarkerClick: markerEventHandler;
    onInfoWindowClose: any;
    map?: google.maps.Map | google.maps.StreetViewPanorama

    render(){
        return(
            <>
                <Map google={google} 
                     zoom={16}
                     draggable
                     initialCenter={{
                        lat: coordinates.latitude,
                        lng: coordinates.longitude
                     }}
                     onReady={(mapProps, map) => {
                        this.setState({ map: map as google.maps.Map})
                    }}
                     style={mapStyle}
                     onClick={this.onMapClicked}>
                
                    <Marker onClick={this.onMarkerClick}
                            title={`Location of ...`} />
                </Map>
                <p className="float-left md:ml-0 mt-64 lg:ml-48 sm:pt-64 lg:pt-64">
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 rounded shadow">Alarm</button>
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 xs:ml-20 sm:ml-20 md:ml-32 lg:ml-40 rounded shadow">Unlock</button>
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 xs:ml-20 sm:ml-20 md:ml-32 lg:ml-40 rounded shadow">Reset</button>
                </p>
            </>
        )
    }
}

const GoogleMap = GoogleApiWrapper({
    apiKey: 'xxx'
})(MapContainer)


export default GoogleMap;

However, an error occurs for MapContainer at the last function:

Argument of type 'typeof MapContainer' is not assignable to parameter of type 'ComponentType<IProvidedProps>'.
  Type 'typeof MapContainer' is not assignable to type 'ComponentClass<IProvidedProps, any>'.
    Construct signature return types 'MapContainer' and 'Component<IProvidedProps, any, any>' are incompatible.
      The types of 'props' are incompatible between these types.
        Type 'Readonly<(props: any, mapStyle: any) => any> & Readonly<{ children?: ReactNode; }>' is not assignable to type 'Readonly<IProvidedProps> & Readonly<{ children?: ReactNode; }>'.
Property 'google' is missing in type 'Readonly<(props: any, mapStyle: any) => any> & Readonly<{ children?: ReactNode; }>' but required in type 'Readonly<IProvidedProps>'.ts(2345)

It's a tad frustrating. I do not understand what they are looking for. I was able to get the map to work with JSX but not TSX. I try to assign props to MainContainer but it doesn't change anything..

invm · Accepted Answer · 2021-12-14 17:30:51Z

If anybody wants a functional component way to achieve this and also for it to recognize the props, just refer to the wrapper.

import { useState } from 'react';
import PlacesAutocomplete from 'react-places-autocomplete';
import { GoogleApiWrapper, IProvidedProps } from 'google-maps-react';

interface PlacesAutocompleteProps {
    value: string;
    disabled?: boolean;
    onChange: () => void;
    counrtyResctrictions?: string[];
}

const PlacesAutoComplete = ({
    onChange,
    value,
    disabled,
    counrtyResctrictions = [],
}: PlacesAutocompleteProps & IProvidedProps) => {
    
    return (
        <PlacesAutocomplete>
        </PlacesAutocomplete>
    );
};

export default GoogleApiWrapper({
    apiKey: process.env.REACT_APP_FB_API_KEY!,
    language: 'en',
})<PlacesAutocompleteProps & IProvidedProps>(PlacesAutoComplete);

Codigo Morsa · Accepted Answer · 2020-07-10 18:39:42Z

1

I'll paste part of my code that works on .TSX

class App extends React.Component<any, any> {
  constructor(props: any) {
    super(props);

    // ... 
  }
}

export default GoogleApiWrapper(
  (props: any) => ({
    apiKey: <your_key>
  }
))(App)

answered Jul 10, 2020 at 18:39

Codigo Morsa

8507 silver badges14 bronze badges

2 Comments

Sabrina Reyes Over a year ago

Thank you. This is off topic, but has TypeScript ever given you some issues regarding width and height? I am able to change the height and width of the Google Map, but it still spreads as though it is the height and width of the screen. Like there is an overflow that can't be seen.

Codigo Morsa Over a year ago

I remember I spent some time adjusting the map. It was mainly .css stuff though. Just make sure your css is well tuned. I used position: absolute, width: 100% and height: 'calc(100% - 3.7rem)'

Sabrina Reyes · Accepted Answer · 2021-01-06 19:11:17Z

1

I didn't change much honestly. I primarily added the <{google}> parameter that it had asked for, and it appears that it was seeking that prop it was missing. I am using Visual Studio Code which also processes errors slowly sometimes for me, which might add onto why there was an issue in the first place.

import React, {Component} from 'react'
import {Map, InfoWindow, Marker, GoogleApiWrapper, mapEventHandler, markerEventHandler} from 'google-maps-react';
import { coordinates } from '../customerPage'

const mapStyle = {
    width: '920px',
    height: '500px'
}

export class MapContainer extends Component<{google}>{
    onMapClicked: mapEventHandler;
    onMarkerClick: markerEventHandler;
    onInfoWindowClose: any;
    map?: google.maps.Map | google.maps.StreetViewPanorama

    render(){
        return(
            <>
                <Map google={google} 
                     zoom={16}
                     draggable
                     initialCenter={{
                        lat: coordinates.latitude,
                        lng: coordinates.longitude
                     }}
                     onReady={(mapProps, map) => {
                        this.setState({ map: map as google.maps.Map})
                    }}
                     style={mapStyle}
                     onClick={this.onMapClicked}>
                
                    <Marker onClick={this.onMarkerClick}
                            title={`Location of ...`} />
                </Map>
                <p className="float-left md:ml-0 mt-64 lg:ml-48 sm:pt-64 lg:pt-64">
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 rounded shadow">Alarm</button>
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 xs:ml-20 sm:ml-20 md:ml-32 lg:ml-40 rounded shadow">Unlock</button>
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 xs:ml-20 sm:ml-20 md:ml-32 lg:ml-40 rounded shadow">Reset</button>
                </p>
            </>
        )
    }
}

const GoogleMap = GoogleApiWrapper({
    apiKey: 'xxx'
})(MapContainer)


export default GoogleMap;

edited Jan 6, 2021 at 19:11

answered Jul 10, 2020 at 18:37

Sabrina Reyes

1394 silver badges13 bronze badges

3 Comments

CherryDT Over a year ago

Great to hear you solved it! To make this answer most useful for future readers, could you maybe describe what the exact change was that was needed? Thank you

Sabrina Reyes Over a year ago

@CherryDT Will do!

Harkirat singh Over a year ago

I get error for zoom and typescript gives red swiggly

Collectives™ on Stack Overflow

Google-Maps-React with TypeScript. Error with parameters

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related