Adding and removing controls

The Google Maps default UI has several controls that are displayed by default or if certain conditions are met. These include:

• Zoom control

• Pan control

• MapType control

• Scale control

• Street View control

• Rotate control

• Overview Map control

The Google Maps JavaScript API presents the opportunity for developers to opt in or out of these controls or customize them in terms of functionality or look.

In this recipe, we will cover ways to alter the UI by adding or removing built-in controls and how to change their properties through presented options.

Getting ready

The first recipe of Chapter 1, Google Maps JavaScript API Basics, will do our work. We will alter it for this recipe.

How to do it…

You will opt for the appearance of the built-in controls if you perform the following step:

1. Alter the mapOptions object as follows:

   var mapOptions = {
     center: new google.maps.LatLng(43.771094,11.25033),
     zoom: 13,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     panControl: true,
     scaleControl...