GCP – Cloud-based maps styling now available for the Maps Static API

On June 15, we announced new cloud-based maps styling features that allow you to customize, style, manage, and deploy changes to your maps from the Google Maps Platform tab in the Google Cloud console. These new features open up new workflows that give you the ability to make changes to your map without deploying code, while also giving you greater control over the behavior and styling of the map.

Today, we’re happy to announce that cloud-based maps styling can also be used with the Maps Static API. For those of you who haven’t used the Maps Static API, it allows you to embed a map as a static image on a webpage using only HTML, offering an easier-to-use alternative to the more interactive and feature-rich dynamic maps provided by the Maps JavaScript API. This makes static maps a great solution for simple use cases where you only need to display a minimal number of points spread over a limited area, such as the location of a single store.

Previously, it was possible to style static maps, but it required verbose, difficult-to-manage syntax embedded in URL parameters. For example, take this retro-styled map:

The request to render this as a static map without cloud-based maps styling looks like this:

“`
https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&center=47.65,-122.35&zoom=12&format=png&maptype=roadmap&style=element:geometry%7Ccolor:0xebe3cd&style=element:labels.text.fill%7Ccolor:0x523735&style=element:labels.text.stroke%7Ccolor:0xf5f1e6&style=feature:administrative%7Celement:geometry.stroke%7Ccolor:0xc9b2a6&style=feature:administrative.land_parcel%7Celement:geometry.stroke%7Ccolor:0xdcd2be&style=feature:administrative.land_parcel%7Celement:labels.text.fill%7Ccolor:0xae9e90&style=feature:landscape.natural%7Celement:geometry%7Ccolor:0xdfd2ae&style=feature:poi%7Celement:geometry%7Ccolor:0xdfd2ae&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0x93817c&style=feature:poi.park%7Celement:geometry.fill%7Ccolor:0xa5b076&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x447530&style=feature:road%7Celement:geometry%7Ccolor:0xf5f1e6&style=feature:road.arterial%7Celement:geometry%7Ccolor:0xfdfcf8&style=feature:road.highway%7Celement:geometry%7Ccolor:0xf8c967&style=feature:road.highway%7Celement:geometry.stroke%7Ccolor:0xe9bc62&style=feature:road.highway.controlled_access%7Celement:geometry%7Ccolor:0xe98d58&style=feature:road.highway.controlled_access%7Celement:geometry.stroke%7Ccolor:0xdb8555&style=feature:road.local%7Celement:labels.text.fill%7Ccolor:0x806b63&style=feature:transit.line%7Celement:geometry%7Ccolor:0xdfd2ae&style=feature:transit.line%7Celement:labels.text.fill%7Ccolor:0x8f7d77&style=feature:transit.line%7Celement:labels.text.stroke%7Ccolor:0xebe3cd&style=feature:transit.station%7Celement:geometry%7Ccolor:0xdfd2ae&style=feature:water%7Celement:geometry.fill%7Ccolor:0xb9d3c2&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x92998d&size=480×360
“`

Now, all you need to do is create a new map style with the in-console style editor, associate it with a map ID, and provide the ID in the request. What was once a complex set of parameters, now looks like this:

“`
https://maps.googleapis.com/maps/api/staticmap?size=512×512&zoom=15&center=Brooklyn&key=YOUR_API_KEY&map_id=315ffb5542f8372b
“`

Much nicer, right? Plus you now also get access to all of our exciting new Maps customization features for your static map, including customizing POI boosting and filtering, and easily updating and deploying changes from the Google Cloud console. 

To learn more about using maps customization features for the Maps Static API, check out the documentation. We can’t wait to see the beautiful custom maps you’ll build.

For more information on Google Maps Platform, visit our website.