← 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

  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

A Map ID connects your published style to the Maps JavaScript API. Each map in Omnium Maps has its own Map ID field, so you can use different styles on different pages. Create one Map ID per style you want to use.

  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, open the map editor, and go to the "Map settings" tab.
  2. Paste the Map ID value into the Google Maps 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 each Map ID after the page it powers so it's easy to find later. The Map ID field is optional. If you leave it empty, the map renders with the default Google Maps appearance. To remove custom styling, clear the field and save again.