Google Maps API Gets A Visual Refresh, Available For Opt-In Today, Coming To Most Sites In August
![](data:image/svg+xml;charset=utf-8,<svg height="682" width="1024" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
At its I/O developer conference, Google today announced a new Maps API for mobile developers, updates to Maps for Android and iOS and a completely refreshed Google Maps experience on the desktop. After the main keynote, however, Google also announced a major visual refresh for sites that use its Google Maps API.
The refreshed look, with new base map tiles, default markers and window style, will become the default in the Google Maps API experimental branch (which, despite its name, is actually the most-often used branch) on August 15. Developers can also opt in to use it today by just changing a single line of code.
It will roll out to the release branch, which is used by most Maps for Business customers, in November. The company said that more than 1 million sites use the Maps API, and all of them will get this visual refresh over the next few months. These sites reach about a billion users every week.
This is what it’ll look like:
Google says it “carefully designed the change to work seamlessly with all existing sites,” so developers don’t have to make any major changes to their existing sites.
Here is a full list of all the major changes:
- Newly designed base map tiles.
- Markers, info windows, and map controls have been redesigned.
- The Scale control now appears on the bottom right, instead of the bottom left.
- The default fonts used in labels and UI elements has changed.
- The marker property
raiseOnDraghas been replaced bycrossOnDrag. - All shadows have been removed in the visual refresh. Any shadows specified programmatically will be ignored.
![](data:image/svg+xml;charset=utf-8,<svg height="111" width="187" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
![](data:image/svg+xml;charset=utf-8,<svg height="110" width="187" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
![](data:image/svg+xml;charset=utf-8,<svg height="122" width="187" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
![](data:image/svg+xml;charset=utf-8,<svg height="129" width="187" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
![](data:image/svg+xml;charset=utf-8,<svg height="105" width="187" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
![](data:image/svg+xml;charset=utf-8,<svg height="121" width="187" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
