Disable bubbles on embedded google maps

Question

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

Because it doesn't show any effort/research? Set the `clickableIcons` map option to `false`. — MrUpsidown, May 01 '21 at 21:48
Thank you MrUpsidown - I evidentially fixed this, but not with `clickableIcons` - Once I get a chance to narrow down the change that fixed it, I'll make sure to post it here. — Dlongnecker, May 03 '21 at 20:33
I can't think of how you would have fixed this otherwise... or with CSS, which is undocumented? — MrUpsidown, May 04 '21 at 06:36
I think you are right - Not everything is clickable (naturally), and I was thrown because I was not fastidious about clicking on the same POI every time. I only thought it went away because I happened to pick a non-clickable POI. If you post an answer MrUpisdown I'm happy to accept it — Dlongnecker, May 04 '21 at 14:51

score 1 · Accepted Answer · answered May 04 '21 at 14:57

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

score 0 · Answer 2 · answered Oct 12 '22 at 07:47

 <GoogleMapReact
        bootstrapURLKeys={{
          key: ''
        }}
        defaultCenter={centerPosition}
        defaultZoom={14}
        onChange={onMapChange}
        yesIWantToUseGoogleMapApiInternals
         onGoogleApiLoaded={({ map }) => {
           mapRef.current = map;
           map.setClickableIcons(false)
        }}
      >

Disable bubbles on embedded google maps

2 Answers2