How to disable Google Map's Satellite view?

Question

I am working on Google Maps Javascript API V 3.

Everything is working fine but I want to disable the MAP button which appears in the top right area with SATELLITE button.

How can I do this?

score 143 · Answer 1 · edited May 19 '16 at 11:16

var myOptions = {
    zoom: 2,
    center: **Your LatLng object**,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID]
    }, // here´s the array of controls
    disableDefaultUI: true, // a way to quickly hide all controls
    mapTypeControl: true,
    scaleControl: true,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.LARGE 
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // displays in <article id="map_canvas"></article>
//map.mapTypeControl = false; // OPTIONAL: hides the map control

score 69 · Accepted Answer · answered May 12 '11 at 11:00

69

When you enable the map and passes the options to it, you have the chance to specify a mapTypeControlOptions. These have an Array that specifies what kind of maptype's you will allow the user to be able to see. It can be seen here http://code.google.com/apis/maps/documentation/javascript/reference.html#MapTypeControlOptions.

If you don't want the user to have any options as to the maptypes, you can also specify that by setting the maps mapTypeControl to false.

answered May 12 '11 at 11:00

Kasper Vesth

4,103
1
37
31

2

Setting mapTypeControl to false definitely vanishes the control but how can I customize it so that mapTypeControl only contains SATELLITE and TERRAIN buttons? – Jatin Dhoot May 12 '11 at 11:20
That is what the mapTypeControlOptions should do.. It holds an array where you can specify that SATELLITE and TERRAIN are the options the user should see. – Kasper Vesth May 12 '11 at 11:33
27

I don't know if it's a v3 thing, but if someone wishes to completly hide this control, setting `mapTypeControl` to `false` doesn't work. Instead what worked for me (in v3) was setting: `mapTypeControlOptions: { mapTypeIds: [] }` – OrPo Mar 06 '14 at 11:54

score 64 · Answer 3 · answered Feb 12 '17 at 19:24

64

Disable Satellite option:

mapTypeControl: false

Disable street view.

streetViewControl: false

answered Feb 12 '17 at 19:24

PodTech.io

4,874
41
24

score 21 · Answer 4 · answered Jul 28 '17 at 06:42

mapTypeControl and streetViewControl option to false

 var map = new google.maps.Map(document.getElementById('map_canvas'), {
             center: new google.maps.LatLng(latitudeFirst, longitudeFirst),
             zoom: 12,
             streetViewControl: false,
             mapTypeControl: false
        });

score 20 · Answer 5 · answered Nov 11 '14 at 11:13

20

You can hide them via css

.gm-style-mtc {
  display: none;
}

answered Nov 11 '14 at 11:13

webchun

1,204
2
13
30

1

This is not future proof. Better to use `mapTypeControlOptions` – qarthandso Jul 20 '17 at 22:42
that is not a solution – Emiliano Jun 28 '18 at 14:40

score 3 · Answer 6 · answered Oct 05 '16 at 10:59

3

I had the same issue. Setting mapTypeControl: false and passing with other options worked for me. You may check spec here.

answered Oct 05 '16 at 10:59

Khrystyna Skvarok

1,198
13
15

score 1 · Answer 7 · edited Oct 27 '21 at 13:16

1

You can achieve this in two ways:

JS
```
streetViewControl: false,
```
CSS
```
.gm-style-mtc {
  display: none;
}
```

edited Oct 27 '21 at 13:16

m4n0

29,823
27
76
89

answered Oct 27 '21 at 08:42

Ahmed Ali

11
1

How to disable Google Map's Satellite view?

7 Answers7

Linked

Related