Modifying Controls of Google Map

Google Maps – Modifying Controls

Several of the map controls are configurable.

The controls can be modified by specifying control options fields.

For example, options for modifying a Zoom control are specified in the zoomControlOptions field. The zoomControlOptions field may contain:

  • google.maps.ZoomControlStyle.SMALL – displays a mini-zoom control (only + and – buttons)
  • google.maps.ZoomControlStyle.LARGE – displays the standard zoom slider control
  • google.maps.ZoomControlStyle.DEFAULT – picks the best zoom control based on device and map size

Here the code is :

<!DOCTYPE html>
<script src="">

function initialize()
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoomControlOptions: {
mapTypeId: google.maps.MapTypeId.ROADMAP
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
google.maps.event.addDomListener(window, 'load', initialize);


<div id="googleMap" style="width:500px;height:380px;"></div>


Output :



Note: If you modify a control, always enable the control first (set it to true).

Another 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)
Pankaj Singh Sugara

Author Pankaj Singh Sugara

Experienced Software Engineer with a demonstrated history of working in the marketing and advertising industry. Skilled in SQL, Web Applications, PHP, WordPress, and Joomla. Strong engineering professional with a B-TECH focused in Information Technology from JCDM College of Engineering Sirsa, Haryana.

More posts by Pankaj Singh Sugara