New Controls Style for the Google Maps JavaScript API

Controls are UI elements that allow your users to interact with a map. Whether they are moving Pegman to see Street View or switching between map and satellite modes, people use the controls to explore and get the information they need from a map.

The Google Maps JavaScript API has a range of options that let developers customize controls by changing their visibility, positioning, styling and behavior. Control options give developers a lot of flexibility to change the way controls work on their maps.

Today, we are rolling out an update to the Google Maps JavaScript API default controls. The updated controls have a more modern look and feel and are more consistent with other Google Maps products, including the Google Maps Embed API and the Google Maps website. Most features of the new control style have already been available to signed-in maps, but today we are excited to make the new control style available by default to all maps, not just those with signed-in mode enabled.

This API update changes the position, color and size of many of the controls, as well as the functionality of a few controls. For example, the zoom control feature is now on the bottom right instead of the top left, with only “+” and “-” buttons instead of a slider. In addition, some controls and control options are no longer available in v3.22 of the API (the current experimental version). The Google logo has also been updated to the new version.

Old
New
Screen Shot 2015-08-25 at 7.33.31 AM.png

You can temporarily switch back to the old control style in API versions 3.22 (current experimental version) and 3.23 (experimental version from November 2015). In versions 3.22 and 3.23, the old control style can be obtained setting a single parameter, google.maps.controlsStyle = 'azteca', before you initialize the map. This parameter will be available until August 2016, giving you ample time to make any required updates to your application. In version 3.24 (experimental version from February 2016), this parameter will be removed. If you are using custom controls or UI elements that overlap the map, we recommend that you test your application with the new controls style and make any updates well before August 2016. The new logo is the only change that affects all API versions and cannot be removed.

For full details of how individual controls will be affected, as well as how to revert to the old controls style, please refer to our developer documentation. You can also visit the Maps API versioning guide for details of how Maps API versions work, how to check which API version you are using, and other best practices for developers.

Posted by Elena Kelareva, Product Manager, Google Maps APIs