Add control and set control location on Google Map

Google maps contain UI elements that allow users to interact with maps. These elements are called "controls ". You can combine these controls in Google Maps to set map styles.

The map API has a large number of built-in controls that can be used in the MAP:

• Glargemapcontrol-a large pan/zoom control used on Google Maps. It is displayed in the upper left corner of the map by default.
• Gsmallmapcontrol-a smaller PAN/zoom control used on Google Maps. It is displayed in the upper left corner of the map by default.
• Gsmallzoomcontrol-small zoom control (no translation control), used to display a small map pop-up window for a route on a Google Map.
• Gscalecontrol-map scale
• Gmaptypecontrol-allows the user to switch the map type (for example, "map" and "satellite") buttons
• Ghierarchicalmaptypecontrol-a set of featured nested buttons and menu items used to place multiple map type selectors (place names and street names can be displayed in satellite map mode ).
• Goverviewmapcontrol-A Foldable Overview map (a bird's picture in the lower right of the screen) located in the corner of the screen ).

All these controls are based on gcontrol objects.

 

1 // Add a scaling Control
2 map. addcontrol (new Google. Maps. largemapcontrol ());
3 // Add a map scale
4 map. addcontrol (new Google. Maps. scalecontrol ());
5 // a bird's eye view map at the bottom right of the screen
6 map. addcontrol (new Google. Maps. overviewmapcontrol ());
7 // place a set of featured nested buttons and menu items for multiple map type selectors
8 map. addcontrol (new Google. Maps. hierarchicalmaptypecontrol ());

Set map type

 

The list of currently supported map types is as follows:

• G_NORMAL_MAPDisplay the default two-dimensional map of Google Maps
• G_SATELLITE_MAPShow the captured image blocks
• G_HYBRID_MAPDisplays both the captured image blocks and common (highlight obvious map features such as roads and city names ).
• G_PHYSICAL_MAPDisplay the actual map Block Based on the terrain information

By default, Google map API provides three map types:G_NORMAL_MAP,G_SATELLITE_MAPAndG_HYBRID_MAP. You can change the available map types on the map in either of the following ways:GMap2.removeMapType()Delete the map type. UseGMap2.addMapType()Add a map type. Whenever you create a map type control, it uses the existing map types on the current map, and allows users to switch between these map types.

 

1 // switch the map type
2 map. setmaptype (g_normal_map );
3 // remove
4 map. removemaptype (g_normal_map );
5 // Add
6 map. addmaptype (g_normal_map );

 

 

Place controls on a map

 

addControlThe method has the second optional parameter.GControlPositionTo specify the position of the control on the map. It can be one of the following values that specify an angle of the map where the control is to be placed:

• G_ANCHOR_TOP_RIGHT
• G_ANCHOR_TOP_LEFT
• G_ANCHOR_BOTTOM_RIGHT
• G_ANCHOR_BOTTOM_LEFT

If this parameter is not included, the map API uses the default location specified by the control.

GControlPositionYou can also specify an offset to indicate the number of pixels between the place of the control and the map boundary. Use these offsetsGSizeObject.

SetGMapTypeControlAdd to the upper-right corner of the map and fill it with 10 pixels.

1 var map = new gmap2 (document. getelementbyid "map_canvas "));
2 var maptypecontrol = new gmaptypecontrol ();
3 var topright = new gcontrolposition (g_anchor_top_right, new gsize (10, 10 ));
4 map. addcontrol (maptypecontrol, topright );