Omnium Maps logoOmnium Maps
Get App
← Articles

How to create a Map ID with custom map styling

Follow these steps to design a cloud-based Google Maps style, create a Map ID, and plug it into Omnium Maps.

Why Map Styling & Map IDs

Google Maps now expects you to manage styling through cloud-based styles and Map IDs. Rather than pasting JSON arrays into your theme, you design the look in the Google Cloud Console and let your storefront load the right Map ID when the map renders.

  • Refresh your map styling any time without redeploying code.
  • Point multiple pages or storefronts at the same Map ID.
  • Keep every style version organized inside your Google Cloud project.

Step 1: Create a Cloud Map Style

Quick reference: Google’s map styles guide walks through every element you can customize.

  1. Open the Google Maps Platform Styling Studio inside Google Cloud.
  2. Select Create style, choose the base map you want to fine-tune, and name the style so you remember where it’s used. Running light and dark storefront themes? Craft one style for each so you can switch between them later.
  3. Adjust colors, toggle feature visibility, and preview changes until the live map matches your brand.
  4. Click Save. After a brief publish cycle, the style appears in your styles list ready to use.
Styling Studio dashboard header with the Create style control highlighted
Create style dialog showing map type options and name fields
Styling Studio editor showing color controls with a live map preview
Save style panel confirming the cloud map style
Published styles list showing the newly saved map style

Step 2: Create a Map ID

Need the docs? Google’s Map ID overview and creation guide cover every setting.

A Map ID connects your published style to the Maps JavaScript API. You only need one Map ID for Omnium Maps - choose which style it should serve.

  1. Open the Google Maps Platform map list.
  2. Select Create Map ID, give it a descriptive name, and choose JavaScript as the platform.
  3. In the Map style dropdown, assign the style you finished in Step 1 and confirm the feature settings.
  4. After the Map ID is created, open it from the list and copy the alphanumeric value (for example, df4a1b2c123abc45).
Map management toolbar with the Create Map ID button
Create Map ID form with JavaScript selected as the platform
Map style selector attaching the custom style to the new Map ID
Map ID details page showing the generated ID value
Map ID details screen with the copy button highlighted
Map ID style assignment panel showing the linked cloud style
Map preview confirming the custom styling applied via the Map ID

Step 3: Use the Map ID in Omnium Maps

  1. Open the Omnium Maps app in your Shopify admin and head to the map settings.
  2. Paste the Map ID value into the Map ID field, making sure there are no extra spaces.
  3. Save your settings, then refresh your storefront to confirm the custom styling is active.
Omnium Maps settings in Shopify with the Map ID field populated

Name the Map ID after the store or page it powers so it’s easy to find later. If you ever want to return to the default Google look, clear the field and save again.