google-mapsgoogle-map-react

Disable bubbles on embedded google maps


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

enter image description here

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>
    )
}

Solution

  • 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>
        )
    }