Getting Snazzy with Google Maps

Scroll Down

Written by Garner McGregor

August 17, 2015

Getting Snazzy with Google Maps

@garnermcg

codepen

If you’re like me, then you love color, style, and all fancy things like that. I’m someone who enjoys to look at Photoshop magazines, Awwwards, and other creative outlets that showcase people’s unique tastes and creativity.

On the flip side, I tend to get bored and very uninterested in the plain, same old styles and colors used on everyday applications like Google Maps. I also change my Slack and Sublime Text color schemes about every two weeks, just to keep it fresh.

Google Maps has been around for quite a while and it has become my preferred maps app. I use it everyday, and it’s yellow and blue color scheme have now begun to wear-out it’s welcome with my eyes. Luckily, for me, there is Snazzy Maps. Snazzy Maps is a community built around creating great looking styles for Google Maps… It lets you customize your colors to the exact specs you need.

When it come to Drupal implementation, it is actually quite simiple to add fresh, and exciting new styles to your Google Maps. Before we start, copy the code that I've added below. It will come in handy in a little while :)

Neutral Blue JavaScript Style Array:

[ { "featureType": "water",
"elementType": "geometry","stylers": [ { "color": "#193341" } ] }, { "featureType": "landscape","elementType": "geometry","stylers": [{ "color": "#2c5a71" } ] },   { "featureType": "road", "elementType": "geometry", "stylers": [ { "color":     "#29768a" }, { "lightness": -37 } ] }, { "featureType": "poi", "elementType":   "geometry", "stylers": [ { "color": "#406d80" } ] }, { "featureType":   "transit", "elementType": "geometry", "stylers": [ { "color":   "#406d80" } ] }, { "elementType": "labels.text.stroke", "stylers":  [ { "visibility": "on" }, { "color": "#3e606f" }, { "weight": 2 }, { "gamma":   0.84 } ] }, { "elementType": "labels.text.fill", "stylers": [ { "color":    "#ffffff" } ] }, { "featureType": "administrative", "elementType":  "geometry", "stylers": [ { "weight": 0.6 }, { "color": "#1a3541" } ] },     { "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] },   { "featureType": "poi.park", "elementType": "geometry", "stylers":  [ { "color": "#2c5a71" } ] } ]

Let's get started.

Make sure you've downloaded the Geofield, Styled Google Map, geoPHP, and System Stream Wrapper modules from drupal.org. Then install any of their requirements.

Next enable everything you just downloaded. Especially Geofield Map, as this will give you a visual representation of your map.

Once you've downloaded all the requirements and have enabled everything, it's time to create a content type.

Create a content type called "Map" or whatever you prefer. Then click on "Manage Fields" and add a new field and title it "Location", or anything else.

Under "Field Type" select "Geofield". Next, under "Widget", select "Latitude/Longitude."

Save that, then click on "Manage Display", and under "Format" select "Styled Google Map". Once you've done that click on the cogwheel to the right. This is where you'll add the dimensions of the map (height, width), as well as your custom code from Snazzymaps.

After you click on the cogwheel, open up the "Map Style" tab. Under the "JSON style" paste in your code you copied from snazzymaps. There are many more options here to mess around with, but you're all set once you've added in your code.

Once you've completed all of that, you're ready to add some content!

Add new content from your new "Map" content type. When you're in here, it will give you two fields to enter in your location's lattitude and longitude. Google provides this info for you as well.

After you complete that, save it, then take a look! You should see a beautiful new map, with fresh and vibrant colors.

It's important to note that you can adjust the size of the map in the "Manage Display" of the content type "Map". You cna use pixel sizes, or percentages. Whichever works best for your needs.

Snazzymaps makes it easy to customize your maps by giving you everything you need in a simple to use format. It's a great way to show off your own personal style, or impress a client with your styling wizardry!

Enjoy,

Garner

codekoalas adobe awwwards slack sublimetext snazzymaps google maps