Android
Run the ApiDemos sample app
To run the ApiDemos sample app, see the GitHub sample
(Java
| Kotlin)
and view the CloudBasedMapStylingDemoActivity
demo
(Java
| Kotlin).
You can find a Java and Kotlin sample application that demonstrates how to style your Android map from the cloud.
Known Issues
Once your app is delivered to customers, custom styles for maps with map IDs can be updated from Google Cloud Console. The new styles will be reflected in your app in a few hours.
To make sure new custom styles show up immediately for testing purposes, clear app data from your test device. For more information on clearing data from your device, see Android Help - Free Up Space.
Note that settings can vary by phone. For more information, contact your device manufacturer.
iOS
Run the ApiDemos sample app
To run the ApiDemos sample app, see the GitHub sample
Google Map sample app
and view the CloudBasedMapStylingViewController
project (GitHub sample for
Swift
| Objective-C).
Optional Cloud styling CocoaPod or GitHub demo
Instead of starting from scratch, you can try out our Objective-C sample application that demonstrates how to style your iOS map from the cloud. For details, see Objective-C sample.
Build the Beta demo app
In Xcode, press the compile button to build and then run the current scheme.
The build produces an error, prompting you to enter your API key in the
SDKDemoAPIKey.h
file.
If you don't yet have an API key, set up a project on the
Cloud Console and get an API key by following the instructions in
Get an API key. When
configuring the key on the Cloud Console, you can specify your
app's bundle identifier to ensure that only your app can use the key. The
default bundle identifier of the SDK samples app is
com.example.GoogleMapsDemos
.
Edit the SDKDemoAPIKey.h
file and paste your API key into the definition
of the kAPIKey constant:
static NSString *const kAPIKey = @"YOUR_API_KEY";
If Xcode prompts you to unlock the SDKDemoAPIKey.h
file for editing,
choose Unlock.
Remove the following line:
```
#error Register for API Key and insert here.
```
Build and run the project.
Cloud styling map demo
The CloudStyling
demo shows how to style the map by using a style set on
Google Cloud Console.
When the demo application launches, click the Map Customization demo in the Beta Samples section at the top of the list.
Click Style Map to see the effect of loading different map IDs.
You can try adding your own style as well ("Style Map" > "Add a new map ID"), and see the map update with your custom styled map.
JavaScript
This is a basic example of loading a custom styled map using a
map ID. In this case, the Maps JavaScript references
map ID 8e0a97af9386fef
when the map is loaded, and automatically
applies the map style associated with that map ID.
TypeScript
function initMap(): void { new google.maps.Map( document.getElementById("map") as HTMLElement, { mapId: "8e0a97af9386fef", center: { lat: 48.85, lng: 2.35 }, zoom: 12, } as google.maps.MapOptions ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { new google.maps.Map(document.getElementById("map"), { mapId: "8e0a97af9386fef", center: { lat: 48.85, lng: 2.35 }, zoom: 12, }); } window.initMap = initMap;
Try Sample
Maps Static API
A map ID is an identifier that's associated with a specific map style or feature. Configure a map style and associate it with a map ID in the Google Cloud Console. Then, when you reference a map ID in your code, its associated map style is displayed in your app. Any subsequent style updates you make appear in your app automatically, without the need for any updates by your customers.
If you are using cloud-based maps styling with an existing map that is customized with the
style
parameter, make sure to remove them to avoid potential conflict with future features.To add a map ID to a new or existing map that uses one of our web APIs, append the
map_id
URL parameter and set it to your map ID. This example shows adding a map ID to a map using Maps Static API.<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />