18

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

3 Answers 3

63
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
};
3
  • Thanks for such a quick reply.. How do i remove this? [IMG]i.imgur.com/VKmkm.png[/IMG]
    – KD.
    Mar 1, 2012 at 8:01
  • 1
    gmap.removeControl(); try this. Mar 1, 2012 at 8:14
  • 5
    Got a solution for my question.. need to add the two.. navigationControl: false, streetViewControl:false
    – KD.
    Mar 1, 2012 at 8:31
24

Use the "disable default UI" example:

var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);`
2
  • 1
    This is the best answer to remove the requested items without having to list each individual option. Apr 28, 2015 at 0:24
  • This removes the UI, but doesn't prevent users from scrolling/zooming using a mouse or touch controls. Jun 13, 2016 at 20:19
19

For remove + and - use this

zoomControl: false

https://developers.google.com/maps/documentation/javascript/controls

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.