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>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js">
</script>

<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>

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

</body>
</html>

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