How to disable the satellite and street view options in the google map

Question

I am working on an ionic app in which i need to show google map to display location. I need to disable the satellite and street view options in the map, but didnt get any suitable method. Also the map is creating issues, sometimes it shows on the screen and sometime it didnt.

This is the code i am trying in controller

  $scope.addLoc = function(){ 
   $cordovaGeolocation.getCurrentPosition(options).then(function(position){
       $scope.lat  = position.coords.latitude;
       $scope.long = position.coords.longitude;
       var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng="+$scope.lat+","+$scope.long+"&sensor=true";
       $http.get(url)
         .then(function(res) {

           $rootScope.address = res.data.results[0].formatted_address; 
           console.log($rootScope.address);
          }, function(error) {
             console.log( error);
         });
     console.log(position);
     var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

     var mapOptions = {
       center: latLng,
       zoom: 4,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     };

     $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
     $scope.marker = new google.maps.Marker({
       position: new google.maps.LatLng($scope.lat, $scope.long),
       map: $scope.map,
       title: 'Drag me!'
   }, function(err) {
       console.err(err);
   });
   }, function(error){
     console.log("Could not get location");
   });


 }

Answer 1

You can try this

var mapOptions = {
    center: latLng,
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false,
    disableDefaultUI: true
};

Doc: https://developers.google.com/maps/documentation/javascript/controls#DefaultUI

Answer 2

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.

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

You can hide them via css

But this not a proper way..This may not work in the future..

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