Add a Touch of Realism to Your Google Maps

Using the Google Maps API is one of the most popular (if not the most popular) way to show geo-locations on today's websites. In this tutorial I'll demonstrate how I give my google maps a more realistic look and I'll give you some tips on how to make your own maps really shine!

Step 1: Warming Up

Our aim is to give the map a realistic look, while still allowing the user to zoom and pan it.

We're going to obtain this effect by creating a semi-transparent .png image that will mask the map, then we'll use some CSS to position it on top of the map.

Before opening Photoshop I suggest you take a real map, or a sheet of paper, and fold it like the map you're trying to render. This will really help you understand how the surface reacts to the light source. Take that as a general suggestion, since I think it's always nice to play with a piece of paper before grabbing the mouse!

While doing this you should also grab a screenshot of a google map of your choice - we're going to use this screenshot in Photoshop as a reference.

Tip: if you're on a Mac and want to grab a screenshot of a specific region of you screen, you can just press "command + shift + 4", then click and drag to draw a rectangular selection of what you want to be captured.

Step 2: Map and Background

Once you've grabbed the screenshot you can open it in Photoshop and we'll start working!

The first thing to do is to make the file transparent. Double-click on the background layer that contains the map and hit enter, by doing this we transform the background to a normal layer. Now we want to give ourselves some extra-space to play with, so go to Image > Canvas Size (alt + shift + C) and scale your canvas up a little bit. I added 90 pixels on each side but the dimensions are up to you and depend on the final look you want to obtain; anyway don't worry, this size can be changed again at any time.

Now it's time to add a background image. Just choose something that looks nice underneath a map, I chose a timber texture I found on CGtextures.com, but you can use whatever you want, be it a picture or maybe just a nice gradient.

Once you've chosen your background put it on a new layer at the bottom of the hierarchy.

Step 3: The Edge

At this point it's time to give the map some shape, since this rectangle doesn't really look like a folded piece of paper.

To do this we just use the polygonal lasso and draw the edges. At this point it really helps to place some guides where you want to create the folds, so I created a rough 3x2 grid. It doesn't have to be accurate, but we're going to need it often in the next steps.

Once the selection is closed you can hit the layer mask button, this will automatically create a mask that only shows the selected area.

Step 4: Folds

Having cut the edges, the following steps will deal with giving the map some depth. The first thing we want to do is making the map look like it's folded.

First things first, create a new transparent layer, then grab the rectangular selection tool and, following the grid you set-up earlier, select 3 opposite rectangles (larger than the map) and fill them with plain black.

We're now going to apply a mask to this layer - it has to be the same as the one we applied to the map. The easiest way to do this is to alt-click and drag the mask of the map layer and drop it on the layer we're currently working on.

One remaining task is to turn the opacity of the layer way down to around 6-10%.

Step 5: White Border (it's the New Black)

At this point I like to add a white border around the map. To do so create a new layer, fill it with any color you like, turn its fill to 0% and apply the same layer mask you applied to the map layer.

At the moment there's not much to see, but that will change in a second: double-click the layer and apply a white inner stroke of 8-10 pixels. It's very important that you apply and inner stroke because the outer stroke would have round corners which don't look great in our case.

Step 6: Dodge and Burn

Let's improve the lighting. We'll do so with something similar to the dodge/burn effect. What we can do here is create 2 different layers and once again apply the usual layer mask, one layer will lighten up some folds and one will darken the others.

Select the light layer, grab a large soft white brush with low opacity and flow, then start painting close to the folds on the light rectangles of paper (the ones that don't have the black transparent rectangles on top).

This part is hard to explain with words, but the pictures will do much better.

I set my brush to 20% opacity and 20% flow, then I draw some strokes following the grid. This doesn't have to be accurate because we're going to use layer masks once again.

At first it's difficult to see these light strokes on top of the map, so, for the sake of clarity, I applied a 50% gray background underneath the layer. Obviously you don't need to do so.

Once I'm happy with the white strokes I select the layer mask on this layer, grab the rectangular selection tool, and with the help of the grid I select the squares where I want to hide this effect. Once I have the correct selection I fill it with black.

Now you can turn the opacity of this layer down depending on how opaque your strokes are.

Tip: remember we're creating a .png overlay for the map, so "normal" is the only blending mode we can use. This also means that if you exaggerate these white or black strokes and make them too opaque the final result may look awkward.

Step 7: Dodge and Burn Reloaded

It's now time to do the same for the darker sides, so select the empty layer you created earlier and repeat Step 6. This time you'll use a black or dark grey brush and you'll select the squares you didn't select previously.

Step 8: Drop Some Shadow

Time to draw the shadow.

To make it nice and realistic, create a new layer and use the polygonal lasso tool to draw a shape that will roughly resemble the shadow, then fill it with black.

It's quite tricky to make the shadow look realistic, but remember this: the farther the map is from the table, the softer the edge of the shadow will be.

The smudge tool can help you a lot, I use to grab it and apply a lot to the corners, the intensity of the red represents where I concentrated more with the smudge.

The final result should look something like this:

Step 9: Cut a Hole

At this point you should have something similar to this. We're almost done with Photoshop.

All that's left to do is apply the usual layer mask to the shadow and background layers, so once again alt click and drag the layer mask from the map layer to the background layer, same goes for the shadow layer. Once you've done that, invert these two masks so select the layer mask and hit command + I (control + I on a PC).

The very last thing to do is turn off the visibility of the map layer. This way we cut a hole through all the layers and a good portion of the image is transparent.

Now the bottom of your layer stack should look like this:

Step 10: Png

Export for Web in a transparent png-24, name the file "mask.png" and close Photoshop!

Step 11: HTML and JS

The hardest part is done, now relax and open your favorite text editor.

Now you just need to create a new HTML file that uses the google maps API and a CSS file to style the thing a bit.

A lot of documentation about this API is present on Google anyway you will see in the next steps you don't need to be an expert coder, you just need to write a few lines:

<!DOCTYPE html>
<html>
	<head>
		<title>Webdesign.tutsplus - Google Maps realistic look</title>
		<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
		
		<!-- src and initialize the google maps api -->
		
		<script type="text/javascript"
		    src="http://maps.googleapis.com/maps/api/js?sensor=false">
		</script>
		
		<script type="text/javascript">
			function initialize() {
				var latlng = new google.maps.LatLng(45.466, 9.186); /* latitude and longitude for the center of the map*/
				var myOptions = {
					zoom: 14, /* zoom level of the map */
					center: latlng,
					mapTypeId: google.maps.MapTypeId.ROADMAP,
					mapTypeControl: false, 		/* disable the Satelite-Roadmap switch */
					panControl: false, 			/* disable the pan controller */
					streetViewControl: false, 	/* disable the streetView option */
					zoomControl: false, 		/* disable the zoom level buttons, the user will still be able to control the zoom by scrolling  */

					scaleControl: true, 		/* optional: shows the scale of the map */
					scaleControlOptions: {
						/* since we decided to show the scale, we tell the script to show it in the corner we like, in this case Bottom Left */
					    position: google.maps.ControlPosition.BOTTOM_LEFT
					}
				};
			    var map = new google.maps.Map(document.getElementById("map_canvas"),
			        myOptions); /* show the map in the element with the id: map_canvas */
			}
		</script>
	</head>
	<body onload="initialize()">
		<div id="map_container">
			<div id="map_canvas"></div>
			<div id="mask"></div>
		</div>
	</body>
</html>

As you see, the code is pretty straightforward, I just decided to change some options:

	mapTypeControl: false, 		/* disable the Satelite-Roadmap switch */
	panControl: false, 			/* disable the pan controller */
	streetViewControl: false, 	/* disable the streetView option */
	zoomControl: false, 		/* disable the zoom level buttons, the user will still be able to control the zoom by scrolling  */

	scaleControl: true, 		/* optional: shows the scale of the map */
	scaleControlOptions: {
		/* since we decided to show the scale, we tell the script to show it in the corner we like, in this case Bottom Left */
	    position: google.maps.ControlPosition.BOTTOM_LEFT
	}

I disable the ability to switch to Satellite view as I don't think it matches with this realistic feeling. I disabled the pan controller, streetView and zoom level for the same reason, but you're free to do whatever you want here.

Step 12: CSS

What follows is the bare minimum to be written in the linked CSS file, and as you will see there's nothing too complicated.

#map_container {
	width: 1000px;
	position: relative;
	
	margin-left: auto;
	margin-right: auto;
}

#map_canvas {
	position: absolute;
	top: 70px;
	left: 85px;
	height: 445px;
	width: 845px;
}

#mask {
	position: absolute;
	top: 0;
	left: 0;
	
	height: 586px;
	width: 1000px;
	
	background: url('mask.png') no-repeat;
	background-size: 100%;

	pointer-events:none;
}

27 lines of this code are just to make the thing look right and you can change them any way you like, the only line you need to care about is the last one pointer-events: none;.

pointer-events: none; prevents the mouse from interacting with the #mask div, so the cursor will be able to interact with whatever's below it. In this way the map continues to work, even if it's obscured by a mask or something else.

If you look for pointer-events amongst your favorite documentation you will see it's mainly used with SVG files. I think its use with the "none" value is underrated and as yet unexplored!

The rest of the CSS isn't particularly exciting; it just places the map and mask in the right position. The map_canvas is set to be 1202px wide and 622px tall because that happens to be the size of the grid where the map is contained (red rectangle in the picture), top: 97px and left: 97px are the offset of that grid from the top left corner (blue rectangle in the picture).

Possible Applications

Now that you understand the basics you can apply this technique in many different ways.

When I designed this map it was a proof of concept and I wasn't thinking of a particular application, but after I started writing the tutorial I figured it would be interesting to show you guys a practical way to use it. So I laid out a simple contact page and I thought it would be nice to give the map some perspective.

To do this I just selected all the layers and used Edit > transform > perspective to give the map the right distortion.

In the same way I distorted a wood texture to create the board and added a bit of shadow underneath it.

It's an effective result and is usable at a generous size, but the png-24 file of the mask can become heavy very quickly, so this was a good size/weight compromise.

Download the source files and check out the additional .psd for yourself.

Conclusion

I hope I've been clear enough and you've succeeded making a cool map for your websites.

If you can suggest alternative ways to do this, or improvements to the workflow, please note down your thoughts in the comments section. Thanks for reading!