Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove zoom, terrain and user navigation from google map?

I am using the JS API to display my map. Here is the code:

<script type="text/javascript">
  function initialize() {
        var _lat = 10;
        var _long = 200;
        var myLatlng = new google.maps.LatLng(_lat, _long);
    var myOptions = {
      center: myLatlng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

        var image = 'target.png';
        var beachMarker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            icon: image
        });

        beachMarker.setMap(map);
  }
</script>

Now i want to remove few things from the map.

  1. Remove the zoom controls + user should not be able to zoom using mouse or anything
  2. User should not be able to move around the map using mouse. It should stay like a static image
  3. Remove the MAP|SATELLITE option from map.

How do i achieve this.

enter image description here

like image 357
KD. Avatar asked Mar 01 '12 07:03

KD.


People also ask

How do I turn off zoom on Google Maps?

You can use the setOptions() method on the map object: map. setOptions({draggable: false, zoomControl: false, scrollwheel: false, disableDoubleClickZoom: true});

How do I hide the GUI in Google Maps?

Disabling the UI Default Controls We can disable the default UI controls provided by Google Maps simply by making the disableDefaultUI value true in the map options.


1 Answers

scrollwheel: false,

This option is used for disable zoom on mouse.

scaleControl: false,

This option is used for disable zoom by scale.

draggable: false,

This option is used for disabling drag.

mapTypeControl: false,

This option will hide map type.

Put them as following:

var myOptions = {
   center: myLatlng,
   zoom: 15,
   mapTypeControl: false,
   draggable: false,
   scaleControl: false,
   scrollwheel: false,
   navigationControl: false,
   streetViewControl: false,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};
like image 124
Code Lღver Avatar answered Nov 15 '22 15:11

Code Lღver