3

I am trying to follow the example from https://github.com/fullstackreact/google-maps-react#readme and I got this error

Property 'google' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<IGoogleMapProps>'.

The imports

import * as React from "react";
import styles from "./GoogleMap.module.scss";
import { IGoogleMapProps } from "./IGoogleMapProps";
import { escape } from "@microsoft/sp-lodash-subset";
import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";
import PropTypes from 'prop-types';

export class GoogleMap extends React.Component<
  IGoogleMapProps,
  {}
  > {

The render method

 <Map
style={{ width: '100%', height: '100%' }}
google={this.props.google}
centerAroundCurrentLocation={true}
zoom={20}
/>

Webpart.ts


  public render(): void {
    this.properties.list = this.properties.dropdownProperty;
    const element: React.ReactElement<IGoogleMapProps> = React.createElement(
      GoogleMap,
      {
        description: this.properties.description,
        context: this.context,
        spHttpClient: this.context.spHttpClient,
        API_KEY: this.properties.API_KEY,
        lat: this.properties.lat,
        lng: this.properties.lng,
        list: this.properties.list,
        dropdownProperty: this.properties.dropdownProperty,
        google: any //  'any' only refers to a type, but is being used as a value here.
      }
    );

May I know what is the parameter google takes? Where is it defined? is there a workaround to make this data?

evan
  • 5,443
  • 2
  • 11
  • 20
Random I.T
  • 121
  • 1
  • 10
  • 1
    What have you defined in IGoogleMapProps interface of props. The error clearly says "google" is not there as a prop. Please check that interface. – Shilpa Mar 24 '20 at 04:36
  • nothing, because I don;t know what to define and the document didn't defined it. – Random I.T Mar 24 '20 at 04:59
  • Then don't pass prop interface and then try. – Shilpa Mar 24 '20 at 05:09
  • unfortunately, I cannot I have other API calls via the SharePoint network – Random I.T Mar 24 '20 at 05:12
  • try adding prop "google" with type in any in interface. – Shilpa Mar 24 '20 at 05:16
  • 'any' only refers to a type, but is being used as a value here. in Webpart.ts i need to assign a value to google – Random I.T Mar 24 '20 at 05:19
  • public render(): void { this.properties.list = this.properties.dropdownProperty; const element: React.ReactElement = React.createElement( GoogleMap, { description: this.properties.description, context: this.context, spHttpClient: this.context.spHttpClient, API_KEY: this.properties.API_KEY, lat: this.properties.lat, lng: this.properties.lng, list: this.properties.list, dropdownProperty: this.properties.dropdownProperty, google: any } ); – Random I.T Mar 24 '20 at 05:19
  • Can you please provide a codesandbox or stackblitz so that we can reproduce this issue from our side? – evan Mar 27 '20 at 14:53

0 Answers0