Google Maps Controls

1. Lecture 11

Senior-Lecturer: Sarsenova Zh.N.

2. Google Maps Controls

Default control sets:
• Zoom - displays a slider or "+/-" buttons to control
the zoom level of the map
• Pan - displays a pan control for panning the map
• MapType - lets the user toggle between map types
(roadmap and satellite)
• Street View - displays a Pegman icon which can be
dragged to the map to enable Street View

3. Google Maps Controls more controls

• Scale - displays a map scale element
• Rotate - displays a small circular icon which allows
you to rotate maps
• Overview Map - displays a thumbnail overview map
reflecting the current map viewport within a wider
area

4. Google maps by default

5.

6. Disabling The Default Controls

• To do so, set the Map's disableDefaultUI property
(within the Map options object) to true:

7. Turn On All Controls

• Some controls appear on the map by default;
while others will not appear unless you set
them.
• Adding or removing controls from the map is
specified in the Map options object.
• Set the control to true to make it visible - Set
the control to false to hide it.

8. Turning On All Controls

9. Configurable control is the MapType control.

• Options for modifying a control are specified in
the mapTypeControlOptions field. The
mapTypeControlOptions field may contain:
• google.maps.MapTypeControlStyle.HORIZONTAL_
BAR - display one button for each map type
• google.maps.MapTypeControlStyle.DROPDOWN_
MENU - select map type via a dropdown menu
• google.maps.MapTypeControlStyle.DEFAULT displays the "default" behavior (depends on
screen size)

10. Configurable control

11.  Position a control

Position a control
• You can also position a control, with the
ControlPosition property:

12. User-editable and draggable shapes

• Making a shape editable adds handles to the shape,
which people can use to reposition, reshape, and
resize the shape directly on the map. You can also
make a shape draggable, so people can move it to a
different place on the map.
• User-made changes to the object do not persist
between sessions. If you want to save the user's
edits, you must capture and store the information
yourself.

13. Make a shape editable

• Any shape(polylines, polygons, circles, and rectangles)
can be set as user-editable, by
setting editable to true in the shape's options.

14. Example

• var bounds = {
north: 44.599,
south: 44.490,
east: -78.443,
west: -78.649
};
// Define a rectangle and
set its editable property to
true.
var rectangle = new
google.maps.Rectangle({
bounds: bounds,
editable: true
});

15. Make a marker draggable

• To allow users to drag a marker to a different
location on the map, set draggable to true in the
marker options.

16. Make a marker draggable Example

• var myLatlng = new google.maps.LatLng(25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new
google.maps.Map(document.getElementById("map"),
mapOptions);
// Place a draggable marker on the map
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable:true,
title:"Drag me!"
});

17. Home Task

• Project 4