Map cloud style issue

map style doesn't match our cloud styles

by wintlu

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Vector Initial Static Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!--   key=AIzaSyBFgs-GdCIXUatJG7A2A_hrbSbHzLGgbkU -->  
    <script
      src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=beta&map_ids=75861f4ba7cd2eef"  
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
  <div>
  </div>
    <div class="container">
      <div id="map" class="map"></div>
    </div>
    <br/>
    <pre>
    Issue: map is not reflecting the correct style defined in Google Cloud console
    
    To reproduce:
    in JS API (any version), load vector map with mapId=75861f4ba7cd2eef
    
    expected: renders the same map style as we defined in the Google Cloud console, which has lighter colors
    actual: renders the default map style, which has deeper colors    
    </pre>
    <div>
    
      Note: <br/>
      1. We noticed this issue in JS API (tested in v3.54, v3.56, v3.57), android and iOS SDK begining around 7/24/2024<br/>
      2. We noticed the static map is working correctly, check this <a target="_blank" href="https://maps.googleapis.com/maps/api/staticmap?center=37.78%2C-122.45&key=AIzaSyBFgs-GdCIXUatJG7A2A_hrbSbHzLGgbkU&scale=2&size=600x600&zoom=12&map_id=75861f4ba7cd2eef">static map link using the same mapId</a> <br/>
      3. We noticed that the old mapId seems to be loaded correctly: try mapId="f070129df0f6b488" (which hides all POIs) <br/>
      4. Check <a target="_blank" href="https://drive.google.com/file/d/1AslCIusCAULEOquzd0XsdA2dfA7kEYxz/view?usp=drive_link">this screenshot</a>  for our cloud style in Google Cloud Console <br/>
      5. support case ----
    </div>



  </body>
</html>

CSS

html,
body,
.container {
  height: 500px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.map {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  height: 100%;
}

JavaScript

(function(exports) {
  "use strict";

  // Initialize and add the side by side maps
  function initMap() {

    const map = new google.maps.Map(document.getElementById("map"), {
      center: {
        lat: 37.78,
        lng: -122.45
      },
      zoom: 12,
      mapId: "75861f4ba7cd2eef", // this is our new mapId, it's reflecting the correct style
     //mapId:      'f070129df0f6b488', // this is our old mapId, it's reflecting the correct style defined in GoogleCloudConsole
      gestureHandling: 'greedy'
    });
      }
    
    
      exports.initMap = initMap;
    })((this.window = this.window || {}));