How to Add Controls to Google Maps API

You can embed a custom Google Maps object on your website.

When you embed the Google Maps object into your Web page using the Google Maps JavaScript API, it comes with a default set of controls. The default controls adapt to the user’s platform, so Google Maps uses different controls on large screens, small screens, iPhones and Android devices. You can also add custom controls to the map on your Web page. The Google Maps API provides zoom, pan, scale, rotate, map type, street view and map overview controls.

Instructions

1. Open your Web page’s HTML code in a text editor.

2. Locate the line that begins with “var myOptions =” under the “function initialize()” line in the file. This line begins the section that contains your Google Maps API options.

3. Examine the section for a line containing “disableDefaultUI: true,” -- delete this line or change the “true” to a “false” to enable the default controls.

4. Add one or more of the following lines between the “{“ and “}” in the section. Each line enables a different control:

   panControl: true,
   zoomControl: true,
   mapTypeControl: true,
   scaleControl: true,
   streetViewControl: true,
   overviewMapControl: true

5. Save your Web page’s HTML code and upload it to your Web server.

References

• Google: Google Maps JavaScript API V3 Controls