If you want to integrate real world maps in your web application, Google Maps API are for sure the best resource for this task, powered by JavaScript and simply to use. An example of use maps in the web could be my post about Geolocation API, a nice feature that we see very often today.

With new design trends exploding every day, our designer have to find the best way to fit maps in their layout with simplicity and consistency and the most common problem is that a standard map is not the most "super-cool" element you could have on your web page. Fortunately, Google Maps API give us the power to customize the colors and the appearance of our maps.

Style on Google Maps

As you can read here, we can create a style object to pass to our map object: this will change the appearance of roads, highway, lands, water, etc etc visible on our custom map. Take a look at the code right here, taken from the link up here:

var mapStyle = [  
            {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
            {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
            {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
            {
              featureType: 'administrative.locality',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}]
            },
            {
              featureType: 'poi',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}]
            },
            {
              featureType: 'poi.park',
              elementType: 'geometry',
              stylers: [{color: '#263c3f'}]
            },
            {
              featureType: 'poi.park',
              elementType: 'labels.text.fill',
              stylers: [{color: '#6b9a76'}]
            },
            {
              featureType: 'road',
              elementType: 'geometry',
              stylers: [{color: '#38414e'}]
            },
            {
              featureType: 'road',
              elementType: 'geometry.stroke',
              stylers: [{color: '#212a37'}]
            },
            {
              featureType: 'road',
              elementType: 'labels.text.fill',
              stylers: [{color: '#9ca5b3'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'geometry',
              stylers: [{color: '#746855'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'geometry.stroke',
              stylers: [{color: '#1f2835'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'labels.text.fill',
              stylers: [{color: '#f3d19c'}]
            },
            {
              featureType: 'transit',
              elementType: 'geometry',
              stylers: [{color: '#2f3948'}]
            },
            {
              featureType: 'transit.station',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}]
            },
            {
              featureType: 'water',
              elementType: 'geometry',
              stylers: [{color: '#17263c'}]
            },
            {
              featureType: 'water',
              elementType: 'labels.text.fill',
              stylers: [{color: '#515c6d'}]
            },
            {
              featureType: 'water',
              elementType: 'labels.text.stroke',
              stylers: [{color: '#17263c'}]
            }
          ];

This is so long and very complicated to work on: you have so much things to manage, the object is really big and the whole data structure is not very readable. Of course, I don't think there are better ways to manage the styles of every element on a Google Maps but work with this monster is not really fun.
Hopefully, we have a friend...

Make it easy with Snazzy Map

...and its name is Snazzy Map. Looking at the front page of the website you can understand the role of this amazing tool: it's a gallery of stylized Google Maps where a developer can choose the map style he prefer, copy the style object from the editor and paste it in him project. This is simply beautiful.

The work flow is fast: copy the style from Snazzy Map, give it to a variable, pass it to your Google Maps instance:

// Google Maps style
var mapStyle = // paste here the code from Snazzy Map

// Google Map instance
var map = new google.maps.Map(document.getElementById('map'), {  
    center: {lat: 38.674, lng: -23.945},
    zoom: 8,
    styles: mapStyle
});

Super easy!

That's all for today. Snazzy Map is a very powerful tool, useful and simply to use: in small words, a master-piece friend to work with Google Maps.

Hope you enjoy it. Cheers!