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:
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.