The styles array from Snazzy Maps goes in the 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"
}
]
}
]
};
code snippet:
// 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>
CLICK HERE to find out more related problems solutions.