How to disable Google Map's Satellite view?

Google MapsGoogle Maps-Api-3

Google Maps Problem Overview


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?

Google Maps Solutions


Solution 1 - Google Maps

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

Solution 2 - Google Maps

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.

Solution 3 - Google Maps

Disable Satellite option:

mapTypeControl: false

Disable street view.

streetViewControl: false

Solution 4 - Google Maps

You can hide them via css

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

Solution 5 - Google Maps

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
        });  

Solution 6 - Google Maps

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

Solution 7 - Google Maps

You can achieve this in two ways:

  1. JS

    streetViewControl: false,
    
  2. CSS

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJatin DhootView Question on Stackoverflow
Solution 1 - Google Mapsblomman9View Answer on Stackoverflow
Solution 2 - Google MapsKasper VesthView Answer on Stackoverflow
Solution 3 - Google MapsPodTech.ioView Answer on Stackoverflow
Solution 4 - Google MapswebchunView Answer on Stackoverflow
Solution 5 - Google MapsSurendra Kumar AhirView Answer on Stackoverflow
Solution 6 - Google MapsKhrystyna SkvarokView Answer on Stackoverflow
Solution 7 - Google MapsAhmed AliView Answer on Stackoverflow