努力将时髦的地图自定义样式数组添加到 Webflow 上的自定义代码功能

Question

我被卡住了，我在一个 webflow 网站上设置了这个 Google 地图 API，它与 CMS 和标记等一起工作得很好，但是在尝试添加样式时我就是无法让它工作！如果有人能告诉我时髦地图中的以下样式数组适合我现有代码的位置，那就太棒了！

现有代码：

<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>

时尚地图中的样式：

[
{
    "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"
        }
    ]
}
]

Answer 1

Snazzy Maps 中的样式数组位于 MapOptions.styles property

styles optional
Type: Array optional
Styles to apply to each of the default map types. Note that for satellite/hybrid and terrain modes, these styles will only apply to labels and geometry.

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"
        }
    ]
}
]
  
};

proof of concept fiddle

代码片段：

// 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>

努力将时髦的地图自定义样式数组添加到 Webflow 上的自定义代码功能

Struggling to add snazzy map custom style array to custom code feature on Webflow

javascript

google-maps-api-3