How to add remove zoomControl on google map base on size-CodePudding

I saw an the website of google that we could add/remove the zoomControl base on the map size. But the page doesn't explain how to do this.

My objective would be to remove the zoom control on smartphone, so under 576px I would like the zoom control to be hidden.

I'm working with angular but do not wish to subscribe to the screen size, but would like to let google do that on his self.

CodePudding user response：

Google map doesn't accept such variable, but it's mentioned that the control will be hidden at 200px width, and to disable this you should explicitly mention it.

So if you wish to do that, you'll have to go with a little bit of javascript.

First check the screen width of device then set zoomControl property based on that. For example:-

function initMap(): void {
  let zoomControl = true;
  if(window.innerWidth < 576) zoomControl = false;
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      zoomControl: zoomControl,
      scaleControl: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;