Map colors missing from your Promap

Error in the Web Console:

Google Maps JavaScript API: A Map's styles property cannot be set when a mapId is present. When a mapId is present, map styles are controlled via the cloud console. Please see documentation at https://developers.google.com/maps/documentation/javascript/styling#cloud_tooling

Plugin notes: Google Maps Api updates required the code to include a unique maps ID. However when you use that you cannot use the older styles, which were in use in our existing maps. As a temporary workaround until you or we can setup the google maps stylings on your site.

Here is a script you can add as a custom code or custom liquid option to your Promap Page ..

Works with any site using the jQuery Store Locator Google Maps plugin.
Applies Google’s “Silver” map style (the modern light grayscale aesthetic).
Is branded cleanly and safe to drop into Shopify or any theme. (note for other color schemes contact support and we can update or add for you.

🧩 `applysilver-map-styles.js`

Here’s the full code for your new script file:

<script>
/*!
 * map-style-emulator.js (Enhanced)
 * Purpose: Emulate Silver theme client-side even when mapId is active.
 * Works with both classic and vector Google Maps renderers.
 * Author: Rose Perl Technology
 * © 2025 Rose Perl Technology. All rights reserved.
 */

(function() {
  window.addEventListener("load", function() {
    console.log("🎨 Initializing client-side Silver look emulation...");

    const silverFilter = `
      grayscale(80%)
      brightness(1.05)
      contrast(85%)
      saturate(70%)
    `;

    const overlayCSS = `
      position: absolute;
      top: 0; left: 0;
      right: 0; bottom: 0;
      background: rgba(240,240,240,0.25);
      pointer-events: none;
      z-index: 100;
      mix-blend-mode: lighten;
    `;

    function applySilverFilter(target) {
      if (!target || target.dataset.silverApplied === "true") return;
      target.style.filter = silverFilter;
      target.style.transition = "filter 0.4s ease";

      // Overlay tint
      const overlay = document.createElement("div");
      overlay.setAttribute("id", "silver-style-overlay");
      overlay.setAttribute("style", overlayCSS);
      target.appendChild(overlay);

      target.dataset.silverApplied = "true";
      console.log("✅ Silver look emulation applied (client-side).");
    }

    function findMapContainer() {
      // Try common map containers in both renderers
      return (
        document.querySelector(".gm-style") ||
        document.querySelector(".widget-scene") || // vector map renderer
        document.querySelector("[class*='gm'] canvas")?.parentElement ||
        null
      );
    }

    // Observe DOM mutations in case the map redraws or reinitializes
    const observer = new MutationObserver(() => {
      const mapContainer = findMapContainer();
      if (mapContainer && !mapContainer.dataset.silverApplied) {
        applySilverFilter(mapContainer);
      }
    });

    // Start observing document for Google Maps injection
    observer.observe(document.body, { childList: true, subtree: true });

    // Also try initial scan
    const checkInitial = setInterval(() => {
      const mapContainer = findMapContainer();
      if (mapContainer) {
        clearInterval(checkInitial);
        applySilverFilter(mapContainer);
      }
    }, 500);
  });
})();

</script>

⚙️ Usage Instructions

That’s it — no plugin edits required.
Once your map loads, it’ll automatically:

Reapply the elegant Silver Google map style.

Google Maps API Test Page

🧩 applysilver-map-styles.js

⚙️ Usage Instructions

🧩 `applysilver-map-styles.js`