Lecture 11
Google Maps Controls
Google Maps Controls more controls
Google maps by default
Disabling The Default Controls
Turn On All Controls
Turning On All Controls
Configurable control is the MapType control.
Configurable control
 Position a control
User-editable and draggable shapes
Make a shape editable
Make a marker draggable
Make a marker draggable Example
Home Task
Category: softwaresoftware

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

4. Google maps by default


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

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
var rectangle = new
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
// Place a draggable marker on the map
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Drag me!"

17. Home Task

• Project 4
English     Русский Rules