Google Maps - simple data layer
Hover behavior
by katalin_2003
HTML
<!DOCTYPE html>
<html>
<head>
<title>Data Layer: Styling</title>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=&v=weekly&channel=2"></script>
</body>
</html>
CSS
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
JavaScript
var customStyles_silver = [{
elementType: "geometry",
stylers: [{
color: "#f5f5f5"
}],
},
{
elementType: "labels.icon",
stylers: [{
visibility: "off"
}],
},
{
elementType: "labels.text.fill",
stylers: [{
color: "#616161"
}],
},
{
elementType: "labels.text.stroke",
stylers: [{
color: "#f5f5f5"
}],
},
{
featureType: "administrative.land_parcel",
elementType: "labels.text.fill",
stylers: [{
// color: "#bdbdbd"
color: "#F00"
}],
},
{
featureType: "poi",
elementType: "geometry",
stylers: [{
color: "#eeeeee"
}],
},
{
featureType: "poi",
elementType: "labels.text.fill",
stylers: [{
color: "#757575"
}],
},
{
featureType: "poi.park",
elementType: "geometry",
stylers: [{
color: "#e5e5e5"
}],
},
{
featureType: "poi.park",
elementType: "labels.text.fill",
stylers: [{
color: "#9e9e9e"
}],
},
{
featureType: "road",
elementType: "geometry",
stylers: [{
// color: "#ffffff"
visibility: "off"
}],
},
{
featureType: "road.arterial",
elementType: "labels.text.fill",
stylers: [{
color: "#757575"
}],
},
{
featureType: "road.highway",
elementType: "geometry",
stylers: [{
color: "#dadada"
}],
},
{
featureType: "road.highway",
elementType: "labels.text.fill",
stylers: [{
color: "#616161"
}],
},
{
featureType: "road.local",
elementType: "labels.text.fill",
stylers: [{
color: "#9e9e9e"
}],
},
{
featureType: "transit.line",
elementType: "geometry",
stylers: [{
color: "#e5e5e5"
}],
},
{
featureType:...