google-maps-api-3 Google Maps JavaScript API v3 - Advanced Custom Styled Map
Example
<!DOCTYPE html>
<html>
<head>
<title>Styled Maps</title>
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
function initialize() {
// Create an array of styles.
var styles = [{
stylers: [{
hue: "#4679BD"
}, {
saturation: 100
}]
}, {
featureType: "poi",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}, {
featureType: "administrative",
elementType: "labels",
stylers: [{
color: "#"
}]
}, {
featureType: "road.local",
elementType: "geometry",
stylers: [{
visibility: "off"
}]
}, {
featureType: "road",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}, {
featureType: "land",
elementType: "geometry",
stylers: [{
hue: "#e4cc55",
saturation: 100
}]
}, {
featureType: "water",
elementType: "geometry",
stylers: [{
color: "#C5E7FF"
}]
}, {
featureType: "transit.station.airport",
elementType: "geometry",
stylers: [{
hue: "#FF00CA"
}]
}];
// Create a new StyledMapType object, passing it the array of styles, as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(styles, {
name: "Styled Map"
});
// Create a map object, and include the MapTypeId(s) to add to the map type control.
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(46.13, 6.14),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'custom_map_style']
}
};
// Create the map.
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('custom_map_style', styledMap);
map.setMapTypeId('custom_map_style');
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize"
async defer></script>
</body>
</html>To create your own map style, please refer to the Style Reference documentation and/or use the great Styled Maps Wizard tool.
