Google Maps API Tutorial Google Maps API Tutorial
Back to Home Page

Customized Control Panel Example for Google Maps API

View Example


Notes

The key is to set mapTypeControlOptions and navigationControlOptions as below:
          mapTypeControl: true,
          mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            position: google.maps.ControlPosition.BOTTOM_CENTER},
          navigationControl: true,
          navigationControlOptions: {
          	style: google.maps.NavigationControlStyle.SMALL,
            position: google.maps.ControlPosition.TOP_RIGHT
          },
Values for google.maps.MapTypeControlStyle can be DEFAULT, HORIZONTAL_BAR, DROPDOWN_MENU
Values for google.maps.NavigationControlStyle can be DEFAULT, SMALL, ANDROID, ZOOM_PAN

Source Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Map API V3: Customized Control Panel</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
body { margin: 20; padding: 20 }
#map_canvas{
	width: 740px;
	height: 400px;
}
</style>
<script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(37.286172, -121.80929),
          zoom: 8,
          mapTypeControl: true,
          mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            position: google.maps.ControlPosition.BOTTOM_CENTER},
          navigationControl: true,
          navigationControlOptions: {
          	style: google.maps.NavigationControlStyle.SMALL,
            position: google.maps.ControlPosition.TOP_RIGHT
          },
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>