[解決済み] Webflowのカスタムコード機能におしゃれなマップカスタムスタイル配列を追加するのに苦労している [duplicate］

質問

Google Maps API を webflow サイトにセットアップして、CMS やマーカーなどとはうまく動作しているのですが、スタイリングを追加しようとすると、どうしてもうまくいかないんです。もしどなたか、snazzy mapsの下記のスタイル配列が私の既存のコードのどこに当てはまるかアドバイスしていただけると助かります!

既存のコード

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize&key=******" async defer></script><script>
// Variables for Google maps
var map, mapElem, markerImg, infoWindow, marker;
var markers = [], infoWindows = [];
var mapOptions = {
  mapTypeId: 'roadmap',
  //zoom: 13,
  //scrollwheel: false,
  
};

function initialize() {
  markerImg = {
    url:'https://uploads-ssl.webflow.com/5f58a4616a9e71d63ca059c8/5fa18680b95c219254ad0c9c_place-marker.png',
    size: new google.maps.Size(46, 57),
    anchor: new google.maps.Point(23, 54),
  }
                  
  // Display a map on the page
  mapElem = document.getElementById('map_canvas');
  map = new google.maps.Map(mapElem, mapOptions);
  map.setTilt(45);
  
  

  // Loop through our array of races
  for(i = 0; i < races.length; i++) {
    var race = races[i];
  
    // Generate an infowindow content for the marker
    var infoWindow = new google.maps.InfoWindow();
    infoWindow.setContent(
      '<div class="bg-race"</div>' +
      '<p>'+race.name+'<br>Next race: '+race.date+'</p>' +
      '<a href="'+race.url+'" target="_new"> Race wesbsite </a>'
    );
    infoWindows.push(infoWindow);
  
    // Place a marker on the map
    createMarker(race.lat, race.lng, i);
  }
  
  // Center the map fitting all markers on the screen
  fitToMarkers();
}

function createMarker(x, y, i) {
  marker = new google.maps.Marker({
    map: map,
    icon: markerImg,
    position: new google.maps.LatLng(x,y),
    title: races[i].name
  });
  marker._index = i;
  markers.push(marker);
  
  // Click event on marker
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      // Close last opened infowindow if any
      if(infoWindow) infoWindow.close();
      // Open clicked infowindow
      infoWindow = infoWindows[i];
      infoWindow.open(map, marker);
    }
  })(marker, i));
}

function fitToMarkers() {
  map.setZoom(13);
  var bounds = new google.maps.LatLngBounds();
  for(var i = 0; i < markers.length; i++) {
   bounds.extend(markers[i].getPosition());
  }
  map.fitBounds(bounds);
  map.setZoom(13); // zoom out when done so markers on the top can be seen
}


// When Webflow has loaded,
Webflow.push(function() {

    // Resize event
  $(window).resize(function() {
  
    // Do nothing if mobile
    if($(window).width() < 768) return;

    // Resize map if function is defined
    if(typeof mapResize === 'function') mapResize();
  });
  
  
  
});
</script>

Snazzy mapsからのスタイル。

[
{
    "featureType": "administrative",
    "elementType": "labels.text.fill",
    "stylers": [
        {
            "color": "#444444"
        }
    ]
},
{
    "featureType": "landscape",
    "elementType": "all",
    "stylers": [
        {
            "color": "#f2f2f2"
        }
    ]
},
{
    "featureType": "poi",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "road",
    "elementType": "all",
    "stylers": [
        {
            "saturation": -100
        },
        {
            "lightness": 45
        }
    ]
},
{
    "featureType": "road.highway",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "simplified"
        }
    ]
},
{
    "featureType": "road.arterial",
    "elementType": "labels.icon",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "transit",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "water",
    "elementType": "all",
    "stylers": [
        {
            "color": "#2bb0e6"
        },
        {
            "visibility": "on"
        }
    ]
}
]

解決方法は？

Snazzy Maps のスタイル配列が MapOptions.stylesプロパティ

スタイル オプション
タイプです。 配列 任意
デフォルトの地図タイプに適用されるスタイル。衛星/ハイブリッドと地形モードでは、これらのスタイルはラベルとジオメトリにのみ適用されることに注意してください。

var mapOptions = {
  mapTypeId: 'roadmap',
  //zoom: 13,
  //scrollwheel: false,
  styles: [
{
    "featureType": "administrative",
    "elementType": "labels.text.fill",
    "stylers": [
        {
            "color": "#444444"
        }
    ]
},
{
    "featureType": "landscape",
    "elementType": "all",
    "stylers": [
        {
            "color": "#f2f2f2"
        }
    ]
},
{
    "featureType": "poi",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "road",
    "elementType": "all",
    "stylers": [
        {
            "saturation": -100
        },
        {
            "lightness": 45
        }
    ]
},
{
    "featureType": "road.highway",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "simplified"
        }
    ]
},
{
    "featureType": "road.arterial",
    "elementType": "labels.icon",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "transit",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "water",
    "elementType": "all",
    "stylers": [
        {
            "color": "#2bb0e6"
        },
        {
            "visibility": "on"
        }
    ]
}
]
  
};

プルーフオブコンセプトフィドル

のコード・スニペットです。

// Variables for Google maps
var map, mapElem, markerImg, infoWindow, marker;
var markers = [],
  infoWindows = [],
  races = [{
      lat: 40.7127753,
      lng: -74.0059728,
      url: ""
    },
    {
      lat: 40.735657,
      lng: -74.1723667,
      url: ""
    }
  ];
var mapOptions = {
  mapTypeId: 'roadmap',
  styles: [{
      "featureType": "administrative",
      "elementType": "labels.text.fill",
      "stylers": [{
        "color": "#444444"
      }]
    },
    {
      "featureType": "landscape",
      "elementType": "all",
      "stylers": [{
        "color": "#f2f2f2"
      }]
    },
    {
      "featureType": "poi",
      "elementType": "all",
      "stylers": [{
        "visibility": "off"
      }]
    },
    {
      "featureType": "road",
      "elementType": "all",
      "stylers": [{
          "saturation": -100
        },
        {
          "lightness": 45
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "all",
      "stylers": [{
        "visibility": "simplified"
      }]
    },
    {
      "featureType": "road.arterial",
      "elementType": "labels.icon",
      "stylers": [{
        "visibility": "off"
      }]
    },
    {
      "featureType": "transit",
      "elementType": "all",
      "stylers": [{
        "visibility": "off"
      }]
    },
    {
      "featureType": "water",
      "elementType": "all",
      "stylers": [{
          "color": "#2bb0e6"
        },
        {
          "visibility": "on"
        }
      ]
    }
  ]
};

function initialize() {
  markerImg = {
    url: 'https://uploads-ssl.webflow.com/5f58a4616a9e71d63ca059c8/5fa18680b95c219254ad0c9c_place-marker.png',
    size: new google.maps.Size(46, 57),
    anchor: new google.maps.Point(23, 54),
  }

  // Display a map on the page
  mapElem = document.getElementById('map_canvas');
  map = new google.maps.Map(mapElem, mapOptions);
  map.setTilt(45);



  // Loop through our array of races
  for (i = 0; i < races.length; i++) {
    var race = races[i];

    // Generate an infowindow content for the marker
    var infoWindow = new google.maps.InfoWindow();
    infoWindow.setContent(
      '<div class="bg-race"</div>' +
      '<p>' + race.name + '<br>Next race: ' + race.date + '</p>' +
      '<a href="' + race.url + '" target="_new"> Race wesbsite </a>'
    );
    infoWindows.push(infoWindow);

    // Place a marker on the map
    createMarker(race.lat, race.lng, i);
  }

  // Center the map fitting all markers on the screen
  fitToMarkers();
}

function createMarker(x, y, i) {
  marker = new google.maps.Marker({
    map: map,
    icon: markerImg,
    position: new google.maps.LatLng(x, y),
    title: races[i].name
  });
  marker._index = i;
  markers.push(marker);

  // Click event on marker
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      // Close last opened infowindow if any
      if (infoWindow) infoWindow.close();
      // Open clicked infowindow
      infoWindow = infoWindows[i];
      infoWindow.open(map, marker);
    }
  })(marker, i));
}

function fitToMarkers() {
  map.setZoom(13);
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    bounds.extend(markers[i].getPosition());
  }
  map.fitBounds(bounds);
  map.setZoom(13); // zoom out when done so markers on the top can be seen
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map_canvas {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map_canvas"></div>
</body>

</html>