Your Environment

(other details unlikely to be relevant)

@react-google-maps/api version = 1.1.0

How is it behave?

How does it behave :)

In the exported Typescript definitions we have an old-fashioned reference comment, such as:

/// <reference types="googlemaps" />

(from @react-google-maps/api/lib/components/drawing/Marker.d.ts)

and further down the same file we have references to the Google Maps types:

interface MarkerProps {
    options?: google.maps.MapOptions;
    animation?: google.maps.Animation;
...

The reference is to @types/googlemaps but as this is in devDependencies it is necessary to track this down and manually install, so that you can refer to the types within the IDE.

How should it behave correctly?

If @types/googlemaps is in dependencies it will be installed for consumers of the package as well. There could be arguments against this, such as package bloat, but would give a better experience for users IMO.

I want to traverse a car on the map. I am receiving data from API in 10 seconds interval. The data format is:

var pathCoords = [
{
"lat": 8.893260000000001,
"lng": 76.61427
},
{
"lat": 8.894430000000002,
"lng": 76.61418
},
{
"lat": 8.89484,
"lng": 76.61416000000001
}
]

I want to create a path from source to destination and traverse a car on the created route by these data. Could you please provide me some example of code for it or some guidance and resources? It would be great for me thanks in advance.

I want to create like this: http://www.geocodezip.com/v3_animate_marker_directions.html

After migrating to typescript there is an eslint warning of unresolved dependencies for all imports

'See the docs folder' from this page https://yarnpkg.com/en/package/@react-google-maps/api is linking to https://github.com/JustFly1984/react-google-maps-api/tree/master/src/docs which returns 404.

Thanks for the quick response to my last issue.

I'm able to control the map object from within the onLoad function, but I wanted to have an airbnb like effect of hovering over a place card which would trigger a panTo that marker on the map and perhaps a toggle of an infowindow.

would you know the best way of doing that?

thanks

Hello! When I try to use the functions binded to the map reference, I get an internal error that "google map is not defined".

<GoogleMap
    ref={map => {
            const bounds = new window.google.maps.LatLngBounds();
            map.fitBounds(bounds);

However, if I skip to the next loop in the event loop using a setTimeout, it works:

<GoogleMap
    ref={map => {
        setTimeout(() => {
            const bounds = new window.google.maps.LatLngBounds();
            map.fitBounds(bounds);
        }, 0);

codesandbox demo: https://codesandbox.io/embed/1y7xqo7453

Should this be the default behaviour? Let me know if there's anything I can help :)

I am trying to use the StandaloneSearchBox as below.

import { LoadScript, GoogleMap, InfoWindow, Marker, StandaloneSearchBox } from '@react-google-maps/api'

<LoadScript
    id="script-loader"
    googleMapsApiKey="..............."
    language={"en"}
    region={"EN"}
    version={"weekly"}
    libraries={[]}
    onLoad={() => console.log("script loaded")}
    loadingElement={<div>Loading...</div>}
  >
    <GoogleMap
      id="basic-map-example"
      mapContainerStyle={{
        height: "800px",
        width: "100%"
      }}
      zoom={9}
      options={{gestureHandling:'greedy'}}
      center={cbdCoordinates}
    >
      <StandaloneSearchBox>
          <input
            type='text'
            placeholder='Customized your placeholder'
          />
        </StandaloneSearchBox>  
    </GoogleMap>
  </LoadScript>

I am getting this error.

Environment

{
"name": "react-map-sample",
"version": "0.1.0",
"private": true,
"dependencies": {
"@react-google-maps/api": "^1.1.0",
"@types/googlemaps": "^3.30.19",
"bootstrap": "^4.3.1",
"json-typescript-mapper": "^1.1.3",
"react": "^16.8.4",
"react-bootstrap": "^1.0.0-beta.5",
"react-dom": "^16.8.4",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-scripts-ts": "3.1.0",
"whatwg-fetch": "^3.0.0"
},
"scripts": {
"start": "react-scripts-ts start",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject"
},
"devDependencies": {
"@types/bootstrap": "^4.3.0",
"@types/jest": "^24.0.11",
"@types/node": "^11.11.3",
"@types/react": "^16.8.8",
"@types/react-dom": "^16.8.2",
"@types/react-router-dom": "^4.3.1",
"typescript": "^3.3.3333"
}
}

Your Environment

@react-google-maps/api version: 1.2.0-alpha6

How is it behave?

I defined onCenterChanged, onZoomChanged and onMapTypeIdChanged on my GoogleMap component, and the 3 callbacks are called once when the map is loaded.

Simple repro:

<GoogleMap … onCenterChanged={() => console.log("centerChanged")} />

This breaks my app as I need to query the google map object in those callbacks (set using onLoad), and it is not yet set when they are called.

How should it behave correctly?

Those callbacks should only be called when the corresponding events are fired from Google Maps SDK, not on load.

I'm using old version 9.4.5 and looking for this one to upgrade

but before upgrade to this, I'm looking for well tested apis
and no one describe how to test components using this

I've created this component but I don't know row to test it with jest

Could you create a session on documentation about how to test components ?

/* global google */
import React from "react";
import PropTypes from "prop-types";
import { SearchBox } from "react-google-maps/lib/components/places/SearchBox";
import "./index.css";

const Search = ({ onSearchBoxMounted, bounds, onPlacesChanged }) => (
  <SearchBox
    ref={onSearchBoxMounted}
    bounds={bounds}
    controlPosition={google.maps.ControlPosition.TOP_CENTER}
    onPlacesChanged={onPlacesChanged}
  >
    <input
      type="text"
      placeholder="where do you want to go?"
      className="search__box"
    />
  </SearchBox>
);

Search.propTypes = {
  onSearchBoxMounted: PropTypes.func.isRequired,
  bounds: PropTypes.object,
  onPlacesChanged: PropTypes.func.isRequired
};

export default Search;

Hi,
Are there any options to render the Circle Component more rounded? I seems to me not totally a perfect circle. Any borderRadius possible to override the radius option?
Thanks!

Hi, I'm just trying to implement the component.

I tried recreating the example in the demo but I'm unable to get any response.

I thought maybe it had something to do with the application I'm running it in, but I also could not get the example working in a code sandbox.

Uncaught TypeError: _this3.searchBox.getPlaces is not a function

The code:

<StandaloneSearchBox
              ref={ref => (this.searchBox = ref)}
              onPlacesChanged={() => console.log(this.searchBox.getPlaces())}
            >
              <input
                type="text"
                placeholder="Customized your placeholder"
                style={{
                  boxSizing: `border-box`,
                  border: `1px solid transparent`,
                  width: `240px`,
                  height: `32px`,
                  padding: `0 12px`,
                  borderRadius: `3px`,
                  boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                  fontSize: `14px`,
                  outline: `none`,
                  textOverflow: `ellipses`,
                  position: 'absolute',
                  left: '50%',
                  marginLeft: '-120px'
                }}
              />
 </StandaloneSearchBox>

Please provide an explanation

i am trying to load an InfoWindow onMouseOver of a Marker. the <InfoWindow> component is a child of <GoogleMap>. when I hover over the marker, i get an InfoWindow. when i leave the marker, a smaller, empty infowindow still appears (it loaded behind the first one, which dissapeared onMouseExit) They stack up on every hover, and i have to manually "x" them out.

Your Environment

os: mac
node --version v8.11.4
react version ^16.8.4",
(Created with create-react-app)

@react-google-maps/api version "^1.2.0"

How is it behave?

two infowindows appear onMouseOver, one is blank.
one infowindow hides onMouseExit.


(the BIGGER one is working correctly... the smaller one is the relic...)

How should it behave correctly?

one InfoWindow should appear onMouseOver, one should hide onMouseExit

https://github.com/lucasfs7/google-maps-infobox-module

Please provide an explanation

How can we use getBounds() when the map is loaded?
Currently I have tried

      <LoadScript
        id="script-loader"
        googleMapsApiKey="YOUR_API_KEY"
        {...other props}
      >
        <GoogleMap
          id='example-map'
          onLoad={(map) => console.log(map.getBounds())}
          {...other props }
        >
          ...Your map components
        </GoogleMap>
      </LoadScript>

but it prints undefined

Your Environment

os: mac

node --version: v11.14.0

react version: 16.8.6

webpack version: 4.30.0

@babel version: 7.1.6

@react-google-maps/api version: 1.2.3-alpha.1

How is it behave?

It returns undefined for .getBounds() method.

How should it behave correctly?

it should return LatLngBounds of current location

Hi all.
I want to migrate code from react-google-maps to the newest react-google-maps-api (1.0.8) but can't do it because can't replace StandaloneSearchBox usage.
My code is:

import StandaloneSearchBox from 'react-google-maps-api/lib/components/places/StandaloneSearchBox';

...

          <StandaloneSearchBox
            ref={this.onSearchBoxMounted}
            onPlacesChanged={this.onPlacesChanged}
          >
            <input
              name="location"
              placeholder="Enter a location"
              value={locationInput}
              onChange={this.updateLocationInputState}
              className="location-input"
            />
          </StandaloneSearchBox>

With this code I got the exception like this:

StandaloneSearchBox.js:64 Uncaught TypeError: Cannot read property 'querySelector' of undefined
    at StandaloneSearchBox.componentDidMount (StandaloneSearchBox.js:64)
    at commitLifeCycles (react-dom.development.js:16227)
    at commitAllLifeCycles (react-dom.development.js:17592)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at commitRoot (react-dom.development.js:17788)
    at completeRoot (react-dom.development.js:19240)
    at performWorkOnRoot (react-dom.development.js:19169)
    at performWork (react-dom.development.js:19077)

How can I use StandaloneSearchBox? Or there is a real issue for it?

Hi,

Is there any similar feature like map.fitBounds?

I am trying to follow this example to make the StandaloneSearchBox work like this example
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

I managed to get it until the onPlacesChanged event.

Here is what I have so far. but I think I need to set the bound of the Map instead of SearchBox's bound. It would be great if I can get some tips.

  const OnMapSearchBoxPlaceChanged = ()=> {
    if(searchBox != null){
      var placesFromSearchBox = searchBox.getPlaces();   
      if (placesFromSearchBox.length == 0) {
        return;
      }
      
      let bounds = new google.maps.LatLngBounds();
      
      placesFromSearchBox.forEach(function(place) {
        if (!place.geometry) {
          console.log("Returned place contains no geometry");
          return;
        }

      //Code to create the markers list will be here.   

        if (place.geometry.viewport) {          
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
      });


      setsearchBoxBound(bounds);// Wrong. supposed to be Map bound
       // map.fitBounds(bounds); ??
      
    }
  }  

Env:

Windows
"@react-google-maps/api": "^1.2.3-alpha.3",
node --version: v11.14.0
react version: 16.8.6
webpack version: 4.30.0
@babel version: 7.1.6

With the following code the onRectangleComplete callback is fired twice. This also happens on other onComplete callbacks too.

<DrawingManager
	options={{
		drawingControlOptions: {
			drawingModes: [
				google.maps.drawing.OverlayType.RECTANGLE,
			]
		}
	}}
	onRectangleComplete={rect => {
		console.log('onRectangleComplete');
	}}
/>

Environment

os: mac

node --version = v8.15.1

react version = 16.8.6

webpack version = 4.8.3

@babel version = 7.4.3

@react-google-maps/api version = 1.2.0-alpha.11

How is it behave?

onRectangleComplete will be printed twice after drawing a rectangle.

How should it behave correctly?

onRectangleComplete should only be printed once

Version: 1.2.1' or '1.2.0'

I got this error 'Duplicate identifier 'LibraryManagedAttributes'. when I run the application after installing 1.2.1 package or 1.2.0 package.

C:/...web/node_modules/@react-google-maps/api/node_modules/@types/react/index.d.ts
(2777,14): Duplicate identifier 'LibraryManagedAttributes'.

seems like there is an issue with type/react version issue. How do I solve this?

Similiar issue?: DefinitelyTyped/DefinitelyTyped#33822

• OS: Windows
• Node: v10.15.1
• "react": "^16.8.4",
• "react-bootstrap": "^1.0.0-beta.6",
• "react-dom": "^16.8.4",
• "react-router": "^5.0.0",
• "react-router-dom": "^5.0.0",

NPM Page: https://www.npmjs.com/package/@react-google-maps/api
Link: https://github.com/JustFly1984/react-google-maps-api/tree/master/examples/react-google-maps-api-gatsby/src/examples

Missing <Marker>, etc. at

https://react-google-maps-api.netlify.com/

Environment

os: mac

node --version - v10.13.0

react version - 16.7.0

webpack version - 4.23.1

@babel version - 7.1.2

@react-google-maps/api version - ^1.1.0

How does it behave?

I copied exact same example of a map with a circle from docs and map works fine, but circle doesn't even appear.

The package.json module field points to a bundled commonjs format output. The module field in package.json is not an NPM officially supported field but is supported by Webpack so we can consume an ESM format and get the benefits of treeshaking.

I'm more than happy to put in a PR to change your build set up so the output of the dist folder is not bundled and is also in the ESM format. I should have the time in the next day or two to put in the PR 👍

Please provide an explanation

Sometimes the subscriptions are not correctly canceled during the Map component unmount. This is causing occasional crashes in our E2E tests. When Lazy Loading the map with Suspense, the problem is considerably exacerbated, ence I reproduce it that way in this codesandbox: https://codesandbox.io/s/1y7xqo7453

Your Environment

in codesandbox

How does it behave?

If you quickly unmount the map, sometimes it will trigger the following warning:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in LoadScript (created by Map)

This will trigger the following error:

TypeError: Cannot read property 'parentNode' of null
at LoadScript.eval [as cleanup] (webpack-internal:///./node_modules/@react-google-maps/api/lib/LoadScript.js:82:14)
at LoadScript.componentWillUnmount (webpack-internal:///./node_modules/@react-google-maps/api/lib/LoadScript.js:170:12)
at callComponentWillUnmountWithTimer (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16670:12)
at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:147:14)
at HTMLUnknownElement.dispatchEvent (http://10.0.4.6:56409/hammerhead.js:3:13879)
at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:197:16)

How should it behave correctly?

It should correctly clean all the pending subscriptions on unmount.

How to reproduce?

Click on the Refresh icon in the browser view, and then as quickly as possible click on "Map OFF". You should find the error in the console.

Hi, just migrating over here from react-google-maps.

I tried recreating the example in the demo but I'm unable to get past an regeneratorRuntime is not defined error that breaks the application.

I thought maybe it had something to do with the application I'm running it in, but I also could not get the example working in a code sandbox.

Any help or suggestions would be greatly appreciated!

Hi, As of now, the onClick event is google.maps.MouseEvent. onClick?: (e: google.maps.MouseEvent) => void;. How do I get the market object in that click event?

Lets say I have a code as below. I created the list of marker dynamically from the list.

     list.forEach((tx:Cab) => }
        markers.push(
          <Marker
            key={tx.CarNumber}
            position={{ lat: tx.Latitude, lng: tx.Longitude }}
            label={carNumberAndDirection}
            onClick={(e:any) => {              
              console.log((e.target as Marker));
              
            }}
          />
  )

• OS: Windows
• "@react-google-maps/api": "1.2.1",
• Node: v10.15.1
• "react": "^16.8.4",
• "react-bootstrap": "^1.0.0-beta.6",
• "react-dom": "^16.8.4",
• "react-router": "^5.0.0",
• "react-router-dom": "^5.0.0",

Please provide an explanation

onClick (and other mouse event handlers) e argument type is currently MouseEvent but should be google.maps.MouseEvent

Your Environment

@react-google-maps/api version: 1.2.0-alpha.8

How is it behave?

Currently if you define your own onClick handler and check the e argument, it is a MouseEvent from Google Maps SDK, not a browser MouseEvent.

For example with

<GoogleMap … onClick={(e) => { console.log(e) }} />

You get

_.wk {latLng: _.P, va: MouseEvent, pixel: _.M, pa: _.M}
  latLng: _.P {lat: ƒ, lng: ƒ}
  pa: _.M {x: 128.37920009601385, y: 111.05081764442744}
  pixel: _.M {x: 326.203125, y: 316.3125}
  va: MouseEvent {isTrusted: false, screenX: 646, screenY: 636, clientX: 646, clientY: 636, …}
  __proto__: Object

How should it behave correctly?

Mouse handler events argument type should be google.maps.MouseEvent.
This is also true for other components (like Marker).

For those who is concern.

Any plan to provide a UMD build to be used without bundling (e.g. load from CDN)?

Hello, great job on this module.

However I have spent like an hour finding out how can I style these maps.
Maybe you should include a little section that explains how to style these maps.

For anyone searching this :
prepare json file with mapStyles, and attach it to Google Maps like this.

<GoogleMap
id="basic-map-example"
mapContainerStyle={{
height: "400px",
width: "100%"
}}
options={{
styles: mapStyles
}}
zoom={15}
center={{
lat: 52.088368,
lng: 21.030126
}}

Thanks, for your great work on this.

Please provide an explanation

A google map is rendered nested inside an empty div. I'm trying to use a sticky class, but the div is preventing that. Could this be refactored as a fragment or allow for declaring the element with a classname or id? thanks!

Please provide an explanation

Your Environment

os: mac

node --version: v10.15.0

react version: 16.8.3

webpack version: 4.28.3

@babel version: 7.2.2

@react-google-maps/api version: 1.2.3

How is it behave?

When using MarkerClusterer with props style, averageCenter, enableRetinaIcons, gridSize, I get errors saying that most of other props are also required. Checking the source file indeed the interface has almost all members as required, except for options.

How should it behave correctly?

Props such as the ones in the image above (clusterClass, ignoreHidden, etc) should have a default value and not be required to inform, otherwise I would need to pass over 10 props every time I use a clusterer.

onCenterChanged behavior seems odd (to me)

GoogleMap defines onCenterChanged prop which takes a callback in the form of () => void
It seems like maybe this callback should be of the form ({lat, lng}) => void or am I thinking about this the wrong way?

What's the proper way to be able to load the API using LoadScript in different components?
I'm getting the following error when redirecting to different Routes using react-router.
google api is already presented

You can start with any of components which is commented out in index..js file

You need to run npm run watch in root, and npm start in /examples/react-google-map-api-gatsby/ to run example page. Please add new examples only in /examples/react-google-map-api-gatsby/src/pages/index.js file. I'm planning to add documentation in the same gatsby example.

I am unable to get google maps rendering correctly when using the StandaloneSearchBox example code.

My code looks like this:

import React from 'react';
import { GoogleMap, LoadScript, StandaloneSearchBox } from "@react-google-maps/api";

class LocationSearchInput extends React.Component {
        
    render() {
        return (
            <LoadScript
            id="script-loader"
            googleMapsApiKey={"Api-Key"}
            language={"de"}
            region={"DE"}
            version={"weekly"}
            libraries={["places"]}
            onLoad={() => console.log("script loaded")}
            loadingElement={<div>Loading...</div>}
            >
                <GoogleMap
                    id="rectangle-example"
                    mapContainerStyle={{
                        height: "400px",
                        width: "800px"
                      }}
                      zoom={8}
                      center={{
                        lat: -34.397,
                        lng: 150.644
                      }}
                >
                    <StandaloneSearchBox>
                    <input
                        type="text"
                        placeholder="Customized your placeholder"
                        style={{
                        boxSizing: `border-box`,
                        border: `1px solid transparent`,
                        width: `240px`,
                        height: `32px`,
                        padding: `0 12px`,
                        borderRadius: `3px`,
                        boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                        fontSize: `14px`,
                        outline: `none`,
                        textOverflow: `ellipses`,
                        position: "absolute"
                        }}
                    />
                    </StandaloneSearchBox>
                </GoogleMap>
            </LoadScript>
        );
    }
}

export default LocationSearchInput;

And the map is rendering like this:

How can i get rid of these grey areas?

Environment

os: windows
node --version: v8.12.0
react version: 16.8.4
webpack version: 4.28.3
@react-google-maps/api: 1.1.0

Right now supports only position property

Currently when a new container is created, the styles are lost. We need to find a way to apply the styles passed as an object to the component to the created html element

Please provide an explanation

I just upgraded the @react-google-maps/api package (^1.2.2) . The anchor property is the required property for InfoWindow now. My working infowindows code doesn't work after the upgrade. I fixed it by setting anchor={null} but the InfoWindows is not visible anymore.

I am looking for an example. The official example (https://react-google-maps-api-docs.netlify.com/#infowindow) doesn't even use anchor so not sure if those examples are using the latest version. The link for InfoWIndow example is https://github.com/JustFly1984/react-google-maps-api/blob/17949d752e3f8c03a943dbdbf8778c8934a6d986/packages/react-google-maps-api/src/components/drawing/InfoWindow.md. It doesn't use the anchor which is a mandatory field.

Can we make this anchor not mandatory?

Your Environment

os: windows

node --version

v10.15.1
react version

"react": "^16.8.4",
"react-bootstrap": "^1.0.0-beta.6",
"react-dom": "^16.8.4",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",

@react-google-maps/api version
"@react-google-maps/api": "^1.2.2",
"@types/googlemaps": "^3.30.19",

How is it behave?

Need to set the anchor. If I set anchor={null then InfoWindow doesn't even show anymore.

How should it behave correctly?

This code used to work with 1.1.0.

function MapComponent () {  
    const [selectedCar, setSelectedCar] = React.useState<Cab>({} as Cab);
    const [cabs, setCabs] = React.useState<Cab[]>([]);  
  
    React.useEffect(() => {  
        //Call API and set the data to "cabs" state (setCabs)
    );
    
    //Timeer => call API every x seconds and set the data to "cabs" state (setCabs)
    
    const createMarker = ()=> {
       const markers:any = [];
       
       cabs.forEach((tx:Cab) => { 
             markers.push(
         <Marker key={tx.CarNumber}
                    position={{ lat: tx.Latitude, lng: tx.Longitude }}
                    label={carNumberAndDirection}
                    onClick={() => {                     
                                setSelectedCar(tx);            
                    }}
                    />);
          
           return markers;
    }   

    const showInfoWindows = () => {
        var tx:Cab = selectedCar;  
        return (<InfoWindow 
                  position={{ lat: tx.Latitude, lng: tx.Longitude }}
                 >
                  <div className="Popup">
                    <div id="title">{tx.CarNumber}</div> 
                  </div>
                </InfoWindow>);
    }
    
    return (
        <div>
            <GoogleMap ...>
                {createMarker()} 
                {(selectedCar.VehicleID > 0) && showInfoWindows(selectedCar)}
            <GoogleMap>
        <div>
     );
};

I got this example: https://codesandbox.io/s/9oqw8vqnro?fontsize=14

I upgraded the @react-google-maps/api package to 1.2.2. The code doesn't use 'anchor' and no error.

But in my project, I got this error.

Currently each component has an updaterMap which is an object mapping react props to the function that updates that prop on the google maps instance. Here, for example, is the updaterMap object for Circle:

const updaterMap = {
  center (instance, center) {
    instance.setCenter(center)
  },
  draggable (instance, draggable) {
    instance.setDraggable(draggable)
  },
  editable (instance, editable) {
    instance.setEditable(editable)
  },
  map (instance, map) {
    instance.setMap(map)
  },
  options (instance, options) {
    instance.setOptions(options)
  },
  radius (instance, radius) {
    instance.setRadius(radius)
  },
  visible (instance, visible) {
    instance.setVisible(visible)
  }
}

The thing is, each of these functions is superseded by the setOptions function. I.E:
circle.setCenter(center) is the equivalent of circle.setOptions({center})

Removing all these updater function in favour of setOptions will remove a ton of repeating and unnecessary code. The only downside to it is that instead of using the component like:
<Circle center={{ lat: 0, lng: 0 }} radius={10} />

You would have to do:
<Circle options={{center: { lat: 0, lng: 0 }, radius: 10 }} />

This is especially beneficial maintenance-wise when migrating to Typescript, since all these types are already defined by: https://www.npmjs.com/package/@types/googlemaps.
But, they are all under the options property, since that's how google maps defines them.
This means we can get all out typings out of the box, instead of having to create specific types for these "flattened" properties.

I would love to get your thoughts on this.

@JustFly1984 @awwit @gregoryfm @xalisys

Hi,

I am trying to use the SearchBox feature. I am following this example https://github.com/JustFly1984/react-google-maps-api/blob/df89a4b0a48fc085e30ac3c60c8b62bacd84e72b/packages/react-google-maps-api/src/components/places/StandaloneSearchBox.md.

I have the code below. But I am getting this error Property 'getPlaces' does not exist on type 'StandaloneSearchBox'..

const searchBox = React.useRef<StandaloneSearchBox>(null);

 const OnMapSearchBoxPlaceChanged = ()=> {
    if(searchBox.current != null){
      var places = searchBox.current.getPlaces();   
      if (places.length == 0) {
        return;
      }
      
      console.log(places.length);
   }
}

 <StandaloneSearchBox
      ref={searchBox}
      onPlacesChanged={OnMapSearchBoxPlaceChanged}
      >
      <input
        type="text"
        placeholder="Search" 
        className="search-box"
      />
    </StandaloneSearchBox>

Env:

• Windows
• "@react-google-maps/api": "^1.2.3-alpha.3",
• node --version: v11.14.0
• react version: 16.8.6
• webpack version: 4.30.0
• @babel version: 7.1.6

Hi all,
I'm trying to use the module and have installed according the instruction on the docs but am currently getting this error:

./node_modules/@react-google-maps/api/lib/components/addons/MarkerClusterer.js
Module not found: Can't resolve 'markerclustererplus'

It doesn't quite seem to be the same issue as #64 though. Any help would be great thanks

I wanted to try out the new release @1.2.0-alpha.0, but I'm getting an error during compilation : @types/markerclustererplus/index.d.ts is not a module. in lib/components/drawing/Marker.d.ts
How can I fix that ?

Hi everyone,
We'd love to get your code contributions! We have a slack channel that is currently on an invite basis. Leave a note here if you want to join.

There are some components that need to be revised from their old (react-google-maps) implementation, to our new implementation. For an examples of such a conversion, see this commit

Here are the components that still need to be implemented

• StreetViewPanorama
• StreetViewService
• AutoComplete
• StandaloneSearchBox
• InfoBox
• ImageMapType
• Data
• MarkerClusterer

Other open tasks:

• Docs! You can see example mdx files in the docs folder. We want to achieve coverage for all components in the docs
• Examples Gatsby.js
• Examplex Create React App
• Code cleanup (remove unused code leftover from react-google-maps)
• Typescript support
• Jest tests,
• End-to-end tests
• Write a migration guide from react-google-maps to react-google-maps-api
• Publish docs as github pages (published on netlify)

A lot of people like to share code at codesandbox.io.

It could be nice to have some place to keep easy updated list of examples. I propose to keep this issue pinned on top, so everybody could share their examples, and we will update top comment time to time.

That is a first one, provided by @uriklar. Can you please add description?

• https://codesandbox.io/s/x200klrl5w

So in #18 you have a TypeScript mentioned in the roadmap, but what it actually means for you? In my experience, it's just a bad idea to have typings made manually. It always gets desynchronized. What is your opinion on that?

Besides, when I saw there is a Babel Polyfill requirement, I got real goosebumps. Haven't seen that for a while. I certainly don't want to enlarge app bundle with this monstrosity. If the package would be written in TypeScript, I believe this requirement could be removed as TSC is more than capable of production ES5 compatible code without any hiccups.