Do you want to let your users zoom your map in or out, or to pan it? Would you like to let them change the type of map to a satellite view, or hybrid (map & satellite combined)? Here we'll show you how to do just that. Make yourself a coffee and sit back and enjoy. This is really easy to do, not to mention fun to use.
So let's get started (do you have your coffee?).
Adding a Map Control
Google offers different types and sizes of map controls. If you want to show more of the map then you should use a smaller control. Just be aware that you'll lose some features. In this case, the "Zoom Scale" and the "Revert to last View" control will be missing. The "Zoom Scale" graphically shows at which level the map is currently zoomed. The "Revert" control acts like an 'undo' button, that is, if you change the position or zoom level of the map, you can click on the "Revert" control to take you back the previous setting.
You should try the different styles to see which works best for you.
JavaScript Code for the Small Control
Just add the following line (shown in red) to your map JavaScript, that's all there is to it!
var latlng = new google.maps.LatLng(37.775196, -122.419204);
var myOptions = {
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map'), myOptions);
}";
The Resulting Map
Do you see the control in the upper left of the map? The arrow controls let you move the map's center, and the "+" and "-" controls let you zoom. Give it a try.
The map on this page uses the "GSmallMapControl", as we specified in the code above. On the next page you'll see what all the possibilities for this control are. There are five to choose from.