Any idea how to disable these bubbles on my embedded google map?
I'm embedding this into a react/typescript app with react-google-map
Here is my code :
import React, { FC, useState, useEffect } from 'react'
import GoogleMapReact from 'google-map-react'
import Marker from './Marker'
...
export const SimpleMap : FC<any> = ({}) => {
...
return (
<div style={{ height: '80vh', width: '100%', marginTop: '32px' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: 'redacted' }}
defaultCenter={center}
defaultZoom={zoom}
onChildClick={_onChildClick}
//yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map, maps }) => apiIsLoaded(map, maps, places)}
>
</GoogleMapReact>
</div>
)
}
Thank you MrUpisdown: Disable bubbles on embedded google maps
The issue was fixed with setting clickableIcons to false
Also see this answer: disable clickable landmark on google map
const apiIsLoaded = (map: any, maps: any, places: any) => {
map.setClickableIcons(false) // Need to call this to disable POIs
...
}
import React, { FC, useState, useEffect } from 'react'
import GoogleMapReact from 'google-map-react'
import Marker from './Marker'
...
export const SimpleMap : FC<any> = ({}) => {
...
return (
<div style={{ height: '80vh', width: '100%', marginTop: '32px' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: 'redacted' }}
defaultCenter={center}
defaultZoom={zoom}
onChildClick={_onChildClick}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map, maps }) => apiIsLoaded(map, maps, places)}
>
</GoogleMapReact>
</div>
)
}