谷歌 map 小控件

Question

I got a very small map (180x120) but I still want people to be able to zoom in and out. How to display only the + and - on the map?

I'm on Gmap v3.

I searched and don't find anything on google map help, maybe I didn't search correctly.

Thanks

Answer 1

You can disable the default user interface and enable just the zoom buttons -

function initialize() {
    var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),
    panControl: false,
    scaleControl: true,
    zoomControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
       myOptions);
}

See - http://code.google.com/apis/maps/documentation/javascript/controls.html#DefaultUI for more information.

Answer 2

The controls shown on the map by default depend on the size of map. However, you can turn off (or re-position or change style of) most controls through map options .

In your case, it seems like google maps show three controls for a 180x120px map. You can turn off map type and street view controls which leaves the compact zoom control behind:

var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    streetViewControl: false
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

Demo here .

Answer 3

Bit late to the party, but for anyone trying to do the same, this can be done:

mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng( 53.737531, -5.240479 ),
    disableDefaultUI: true,
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL,
        position: google.maps.ControlPosition.LEFT_CENTER
};

See: https://developers.google.com/maps/documentation/javascript/examples/control-positioning

Answer 4

According to Google Maps API documentation :

mapOptions = {
  controlSize = 20
};

Where 20 is the size of the controls in pixels.

Default = 40