javascriptgoogle-maps

unable to Remove full screen toogle from google maps -new autocomplete


I have implemented google map's new auto complete. I however want to restrict the map to a small div within my page.

The problem is that googles have a fullscreen toggle button on the top right corner that overrides any CSS restrictions I place on the map. Is there a way to remove full screen toggle/override Google's toggle button

this is my script:

html:

<div class="container">
      <div class="map-container">
        <div id="map"></div>
      </div>
</div>

CSS:

#map-container{
    height: 650px;
    width: 650px;
}

#map {
    max-height: 600px;
    max-width: 600px;
}

JS:

async function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {
        center,
        zoom: 13,
        mapId: '4504f8b37365c3d0',
        mapTypeControl: false,
    });

const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    placeAutocomplete.id = 'place-autocomplete-input';
    placeAutocomplete.locationBias = center;
    const card = document.getElementById('place-autocomplete-card');
    //@ts-ignore
    card.appendChild(placeAutocomplete);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
    // Create the marker and infowindow.
    marker = new google.maps.marker.AdvancedMarkerElement({
        map,
    });
    infoWindow = new google.maps.InfoWindow({});


}

This is the toggle button on the far right top corner:

enter image description here


Solution

  • This is just built-in control you can turn off via the API - no CSS needed.

    map = new google.maps.Map(document.getElementById('map'), {
      center,
      zoom: 13,
      mapId: '4504f8b37365c3d0',
      mapTypeControl: false,
      fullscreenControl: false, // to tdisable that button
      streetViewControl: false, // opt: hide StreetView
      zoomControl: true, // opt: keep or remove as you like
    });
    

    If the map built, you can use

    map.setOptions({ fullscreenControl: false });
    

    Last but not least (Last Option)

    #map .gm-fullscreen-control {
      display: none !important;
    }
    

    Point this to your container to avoid unnecessary UI changes.