Hide full screen control of google map charts

Question

Hello I am using google map charts available in google visualization chartsGoogle Map Chart. But there is no way we can hide the full screen control symbol appears in top-right position. Available options can be seen here. I have also tried to use fullscreenControl: false option given on official google map api documentation fullscreenControl but that did not work for me. Please suggest how to disable this options on mobile/ionic apps.

this.element = this.el.nativeElement;

let mapOptions = {
    showTooltip: true,
    tooltip: { isHtml: true },
    mapType: 'satellite',
    useMapTypeControl: true,
    fullscreenControl: false
};

let data = [
    ['Lat', 'Long', 'Name'],
    [37.4232, -122.0853, 'Work'],
    [37.4289, -122.1697, 'University'],
    [37.6153, -122.3900, 'Airport'],
    [37.4422, -122.1731, 'Shopping']
    ];

dataTable = google.visualization.arrayToDataTable( data );

this.map = new google.visualization.Map(this.element);

this.map.draw( dataTable, mapOptions );

Thanks in advance

This may help: https://stackoverflow.com/questions/32654034/streetview-api-hiding-fullscreen-control — admcfajn, Oct 18 '17 at 06:52
How are you calling the map? Are you using a package for it? If you can show some code that'd help people figure it out. — admcfajn, Oct 18 '17 at 06:55
@admcfajn, I have added a sample code in question it self. please have a look at it. Thanks — Akash Jain, Oct 18 '17 at 07:20
fullscreenControl set to false hides the full screen button from the main map but I cannot figure out how to hide the full screen button from the street view. Anyone managed this? — Luke Galea, Oct 28 '21 at 08:41

Darshana · Answer 1 · 2019-11-26T14:24:26.247

Below code working for me in Ionic app, You can try this:

declare var google; // declare this var above @Component({}) with your other imports

directionsDisplay = new google.maps.DirectionsRenderer;
@ViewChild('map') mapElement: ElementRef;
map: any;

this.map = new google.maps.Map(this.mapElement.nativeElement, {
  zoom: 15,
  center: this.maplocation, // this.maplocation={lat:'',long:''} is my Lat,Long values
  fullscreenControl: false
});

this.directionsDisplay.setMap(this.map);
new google.maps.Marker({
  position: this.maplocation,
  map: this.map
});

In HTML :

<ion-content>  
  <div #map id="map"></div>
</ion-content>

Hide full screen control of google map charts

1 Answers1