CODEWITHSUNDEEP
angularjscordovaionic-framework
Akash Saxena
Akash Saxena

Reputation: 157

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

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


 }

Upvotes: 4

Views: 3860

Answers (2)

Ramandeep Kaur
Ramandeep Kaur

Reputation: 157

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

Upvotes: 5

Karthick Nagarajan
Karthick Nagarajan

Reputation: 1345

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

Upvotes: 3

Related Questions