Làm thế nào để loại bỏ thu phóng, địa hình và điều hướng người dùng từ bản đồ google?

Question

Tôi đang sử dụng API JS để hiển thị bản đồ của mình. Đây là mã:

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

Bây giờ tôi muốn xóa một vài thứ khỏi bản đồ.

1. Tháo zoom điều khiển + dùng không nên có thể phóng to bằng chuột hoặc bất cứ điều gì
2. Người dùng không nên có thể di chuyển xung quanh bản đồ bằng chuột. Nó nên giữ nguyên như hình ảnh tĩnh
3. Xóa tùy chọn MAP | SATELLITE khỏi bản đồ.

Làm cách nào để đạt được điều này.

Answer 1

scrollwheel: false, 

Tùy chọn này được sử dụng để vô hiệu hóa zoom trên chuột.

scaleControl: false, 

Tùy chọn này được sử dụng để vô hiệu hóa thu phóng theo tỷ lệ.

draggable: false, 

Tùy chọn này được sử dụng để tắt kéo.

mapTypeControl: false, 

Tùy chọn này sẽ ẩn loại bản đồ.

Đặt chúng như sau:

var myOptions = { 
    center: myLatlng, 
    zoom: 15, 
    mapTypeControl: false, 
    draggable: false, 
    scaleControl: false, 
    scrollwheel: false, 
    navigationControl: false, 
    streetViewControl: false, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

Answer 2

Đối remove + và - sử dụng này

zoomControl: false

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

Answer 3

Sử dụng "vô hiệu hóa giao diện người dùng mặc định" dụ:

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);`