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 inpatible.
The types of 'props' are inpatible 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..
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 inpatible.
The types of 'props' are inpatible 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..
If anybody wants a functional ponent way to achieve this and also for it to recognize the props, just refer to the wrapper.
import { useState } from 'react';
import PlacesAutoplete from 'react-places-autoplete';
import { GoogleApiWrapper, IProvidedProps } from 'google-maps-react';
interface PlacesAutopleteProps {
value: string;
disabled?: boolean;
onChange: () => void;
counrtyResctrictions?: string[];
}
const PlacesAutoComplete = ({
onChange,
value,
disabled,
counrtyResctrictions = [],
}: PlacesAutopleteProps & IProvidedProps) => {
return (
<PlacesAutoplete>
</PlacesAutoplete>
);
};
export default GoogleApiWrapper({
apiKey: process.env.REACT_APP_FB_API_KEY!,
language: 'en',
})<PlacesAutopleteProps & IProvidedProps>(PlacesAutoComplete);
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)
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;