The Google Maps UI has many built-in controls introduced in previous recipes. These controls serve numerous needs, such as panning, zooming, and changing the map type. However, the user needs are infinite, and the user might be very creative. It is impossible to present a built-in control for every need.
Instead, the Google Maps JavaScript API has presented a path for creating custom controls for every specific need. Custom controls are basically simple HTML elements wrapped in a single element, mostly the <div>
element.
In this recipe, we will go over the basics of creating a custom control, placing it on the Google Maps UI, and using it through event-handling routines.
This recipe will be based on the Moving from Web to mobile devices recipe introduced in Chapter 1, Google Maps JavaScript API Basics. Our recipe will utilize the geolocation code extract from this recipe; therefore, it will be helpful to revisit this recipe.