Pman's Lab

Adding GMouseWheelControl to map

Adding GMouseWheelControl to your map is no different than adding any other controls to the map. You would use addControl() method of GMap2 class to add GMouseWheelControl to your map. So, the following example will add the control to your map allowing the user to take full advantage of GMouseWheelControl.

var map = new GMap2(document.getElementById("myMap"));
map.setCenter(new GLatLng(43.65872874896846, -79.37926769256592), 3);
var gmwControl = new GMouseWheelControl() ;
map.addControl(gmwControl) ;

The above will add the control to the default location. To control the location where it is added, you can refer to the control positioning documentation. For the rest of the documentation in this page, it will be assumed that the control was added like it was shown above. Click on the link below to see an example on how to add GMouseWheelControl to Googl Map.

View example (addingGmwControl.html)

Control Appearance

Once GMouseWheelControl is added to your map, there are a number of actions that you can perform in terms of how you would like the control to appear on your map. You can choose to display the control buttons on the map or hide it. If the control buttons are not displayed on the map, the user will be able to perform only the currently selected operation since the buttons to choose different options are not available. Likewise, you can also show or hide the button texts or icons from the control buttons. Below is an example of how to disable text labels from buttons.

var map = new GMap2(document.getElementById("myMap"));
map.setCenter(new GLatLng(43.65872874896846, -79.37926769256592), 3);
var gmwControl = new GMouseWheelControl() ;
map.addControl(gmwControl) ;
gmwControl.disableButtonText() ;

The above example will add the contol to the map and then disable text labels for the buttons. The result is, user will see the buttons with icons only. You can see a demonstration of the above from the example link below. The demonstration will also show that you can choose to display any specific button on the map instead of both buttons that appears by default. In this example, we can show or hide the "Scroll Wheel" button from the control. For a complete list of available methods for Control Appearance, see the Reference.

View example (gmwControl-buttonStyle.html)

Map Positions

Middle Click Feature is an important part of GMouseWheelControl. It shows the options for Scroll Wheel mouse or starts Click & Pan at the location on the map where you clicked. In order to get the exact location of this click event, it is necessary to know the location of the map as well. getMapPosition() method will return the position of the map relative to the document that was last calculated.

GMouseWheelControl will automatically calculate the position of the map when the control is added and also when user's browser is resized. However, if the position of the map is changed dynamically, for example some contents were added/removed from the document on which the map was added to, you will need to use calculateMapPosition() method. Otherwise, scroll wheel option menu or the click & pan icon will not appear at the correct location, when middle clicked on the map or used Shift + Click.

The example below demonstrates how GMouseWheelControl behaves if location of the map is changed dynamically and the usage of calculateMapPosition() method to fix this issue. Please note that, only Firefox 2 and Opera 9 has been tested to be affected by this position issue and requires the fix.
View example (gmwControl_mapPosition.html)