Search code examples
javascriptgoogle-mapsgoogle-maps-api-3

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


Solution

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