Skip to content

24 ways to impress your friends

Finding Your Way with Static Maps

Drew McLellan Drew McLellan

89 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

Neil Crosby

Nice job that man – the static maps google provides are sorely overlooked a lot of the time.

That said, after seeing you tweet earlier in the week I’d really been hoping this article was going to talk about openstreetmap (but having looked at their documentation I’m really not surprised it didn’t).

Again, good job, and I’m looking forward to the rest of the month.

Kemal Delali?

Nice technique from accessability/usability point of view, altough it is nothing ‘revolutionary’ as I kind of expected the first post to be :)

Good to know 11 months have passed, plugged in and waiting for new posts.

Chris Radford

A brilliant article to start 24 ways 2010, I’d always taken Google’s Map implementation for granted – interesting to see a better way.

Looking forward to the next 23 you’ve got lined up!

Waw ! 24Ways is back, thanks you all the team. The first post is really great and I didn’t know that there was a static API for Google Maps. This seems to be as easy as Google Charts API. Thanks !

Jonathan Schofield

Great opener to this season’s Advent. Great insights from Yahoo! too — good to get a firm update on what has always seemed like a nebulous no JS figure.

Can’t believe I’d missed that Google Static Maps existed.

My heating’s stopped working but already 24ways is warming me up.

Matt Gibson

@chencheng Nope; strictly, the ampersands should be encoded just like that. It’ll work without the encoding in most browsers, because they’re quite forgiving, but if you leave the ampersands unencoded you’ll fail validation.

TheFella

Nice article indeed Drew! I’ll have to implement this on my latest site that uses gmaps quite heavily!

My current solution is to rearrange the page layout and hide the ‘map box’ when I see no javascript is available.

Not really sure which option to go with now, but I want to try your solution out.

Gerard Keohane

All I gotta say is – I’m impressed by how quickly 24ways has become an established Christmas tradition in my head – I totally connect it with cold office, dark evening, snow – and the promise of fire, wine, and home.

All you have to do now is slap a jolly, red-cheeked fat man on the front of it and offer me something to buy…

Henk

I never thought of this. Not everyone enabled javascript. But I want everybody to see it. This is a good tip Drew.

This is a good starting article for beginning.

Dave

I do dislike the “a small percentage of a big number is still a lot of people” quote. Its used as a “cup-half-full” message by some, and a “cup-half-empty” by others.

Yahoo’s usage was in the context of saying that you want all your users to have the same minimum features, but there are a thousand situations where this quote seems to be used where its inappropriate.

1% of 100,000,000 people is still a lot of people, but its also STILL 1%!!

If you’re going to throw money after catering for a tiny minority, when you could be using it to increase conversions with the remaining 99%, you really have no business sense whatsoever.

Whilst it is ideologically awesome to cater for the 1.6%, and incredibly rewarding, digital technology is constantly changing. To dwell on providing A-grade experiences for C-grade users/browsers is a fruitless and expensive task which is not guaranteed to yield any more benefits than focusing attention on improvements for the majority.

Pavvo Vitunnan

We are currently using the Static Maps on a mobile site. I really like your idea, but one issue with mobile is that people often download multiple images in their CSS and just apply the desired one for mobile. I see a similar problem here. Essentially the user is downloading and waiting for both images to load and then you are ripping out the one not required. Why not try and do this server-side and only send the appropriate image.

Matt Andrews

Re the <2% figure for non-JS use, that’s in line with a whole lot of other data, including private testing I’ve done on a million+ member European site.

However, there’s a large blip in one particular user group: vision impaired people who use screenreaders. Repeated surveys have shown that somewhere between 10% and 25% of screenreader users have JS off. See the latest WebAIM survey, for instance.

I realise in this particular case (maps), there are a whole lot more hurdles in presenting useful info to the vision impaired than just JSlessness, but just sayin…

Baumr

Thank you! Great guide.

It motivated a question & answer of mine on StackOverflow (linked to in my name), but perhaps you have something to add since publishing this article?

Drew McLellan

Chris:

In this case, for 98% of users are forced to make a http request and load an image that they will never see.

You should take a look at the HTTP requests involved when the dynamic map actually loads. That one static tile is the tiniest drop in the ocean.

Martin Bavio

I like the idea, Drew, I wonder if any of the Google Maps plugins for the different systems (WP, Drupal, etc) have this in their features. Maybe it’s time to create a plugin with Static Maps in mind!

I’m looking foward to read the next 23 articles, great start!

Kyle Dreger

Great article and I love the idea of covering all the visitors. You guys inspire me and my friends as we continue to learn and become the next generation of web designers. Thanks!

Sean

I had no idea Google offered this service!

You could use this in HTML emails, blog comments that don’t allow JS, or simply for a lighter page when you don’t want all that fancy interactivity.

This must be what Google uses when they show a map preview in the search results page.

Great start to the Advent!

Even the nicest words that I possess in my relatively small vocabulary (in English) wouldn’t be able to translate my happiness to see December bring new articles on this site.

That’s it :-)

Mike McNeive

Just discovered static maps recently. I just used the static map API with a custom meta box for a WP site. The result is managed maps! Boom, No plugin necessary.

Good start!

Jeroen Hulscher

Thank you for this inspiring article, Drew.

Unfortunately I’m as geeky as you are, and therefore I just have to make a small point.

Although you’ve made it accessible for non-Javascript users I’m continuously looking for a good method to make the use of Google Maps completely accessible to the point of blind people being able to interpret a google maps inclusion. Any thoughts on that perhaps?

Si Jobling

Nice introduction to 24 Ways 2010, Drew.

I find it interesting that we’re still having to talk about progressive enhancement on the Web and “fixing” proprietary code from one of the leading innovators of the Web (Google). However, it’s still worth reminding developers of the techniques now and again just to ensure they’re approaching their techniques in the right way.

Good work!

John Macpherson

Can’t believe its this time of year again already!

Great article to start us off. I will definitely implement this on next site with a map.

Talking of IE6 i hear some target users are at 40% :-( its still very much alive.

Thanks.

Mark Perkins

Just a note on something that caught me out when using the static maps – the maximum size that Google will return is 540px x 540px. So you won’t be able to use it as an ‘exact’ fallback for maps any larger than that…. had me scratching my head for a while recently until I realised.

Pete Eveleigh

Nice technique. I just gave it a go on a site I’m working on. Very easy to implement and always a good idea. This had been bugging me for a while but I’m guilty of sweeping it under the carpet a little bit.

One note. I haven’t tested properly yet but it seems that the img element is automatically removed (or perhaps it’s just hidden) from within the map container should the javascript execute. There may be no need to manually remove it.

lewis

one thing that really REEEEEEEEEALLY bugs me with mobile browsing is getting to a contact page, only to be presented with an embedded gmap that plays havoc with the trying to find location/actually scrolling round page equation.

static image > click through to open maps = win.

Luis Oubel

Very good article.
We use this technique for some time. But I think the part where you remove manually is not necessary because Google removes everything inside the container element (checked with Firebug).

Stuart Robson

Great Start This Year!

I was slightly underwhelmed when I read the blog title but really enjoyed reading it all once I got going.

I guess ‘supposition is (still) the mother of all fuck-ups’ as I never thought about this and whilst reading would have thought Googles API does this as standard.

23 to go and it’s nearly 10am :D

Tom Hare

Nice start to 24 Ways 2010, Drew. I had no idea Google even offered this feature but it’s certainly an interesting and usable snippet.

@Jeroen I think it’s very difficult (nay impossible) for a graphical map to be fully accessible to screen readers. I think using the tools available to screen readers (namely alt tags on images) to their best is the most complete way to ensure accessiblility for visually-impaired users.

A detailed address on the alt tag with a pointer to detailed directions somewhere else on the page would be a good solution I feel.

Ed Everett

Another thing worth pointing out is that you can style Google’s static maps (and the dynamic maps): http://code.google.com/apis/maps/documentation/staticmaps/#StyledMapRules

Customising the map’s look and content can, in the right circumstances, make them feel much more a part of your site. Use with care though (and check your changes in other countries/areas that may use different colours).

Dylan

A great start to this year’s 24ways.

We’ve been making use of Google’s static maps for filler images. The app I’m developing is related to surf trips. Users can add photos, but if they don’t we fall back on static maps for trip and surf spot images instead. In some cases the static maps are preferable! The next step is styling them.

Mathias Bynens

FWIW, I’m getting “Uncaught SyntaxError: Unexpected token ILLEGAL” on the demo page.

I have been using a simple text link, genre ‘View [ADDRESS] on Google Maps’. I then use JavaScript to dynamically add an interactive Google Maps embed above it. If JavaScript is not available, people will still see the text link. Showing the actual image is a nice approach, but for now I’ll stick with my habit.

One thing that wasn’t mentioned in the article is how this technique affects performance. You advise against using the `<noscript>` approach, but I would recommend it to avoid the needless image request in the case where JavaScript is available (and the image will be replaced by an interactive map anyway).

Neil Sweeney

When I started looking more carefully at coding front-end and making sure a site works flawlessly with or without Javascript, this was my first change. It makes a site a lot friendlier across the board and more professional as you can offer a different visual alternative other than a blank space or “map does not compute” error.

I’m surprised more people haven’t thought about this?

Though one thing I didn’t think about that Drew pointed out was to use the static map outside a <noscript>. Thanks for pointing that one out.

Ross

Hi Drew great article!

We found a drawback with static maps and mobile devices. We seemed to hit the quota, which according to the docs would be nearly impossible for a user to do! It seems the mobile service provider proxies your internet.

Also no https support – but then the only paid for google maps have dynamic https support, so no huge surprise there!

Cheers,

Ross

Clinton Montague

What a great way to start 24 ways 2010. I’m sure that like myself, many of the readers will have known every single technique and been aware of all of the drawbacks and annoyances, but rarely put 2-and-2 together and think about using JavaScript to remove the image and replace it with the sliding map.

Even though most of use claim to use progressive enhancement every day, this goes to show that maybe we don’t consider all of the nuances every time.

A thought provoking and useful article—thanks,

Clinton – @iblamefish

Pablo Poveda

I know a similar technique for flash & static images but not for Google maps. That’s a great technique.

And I like the phrase “keep in mind that small percentages of big numbers are also big numbers”. So good.

Lots of thanks from Spain

@povedica

Brad Touesnard

I’d love if Yahoo! dug into that study further and revealed why 2% of users have Javascript disabled. Are they paranoid about privacy/worms? Is their tech savvy friend playing a joke on them? If they’ve knowingly turned off Javascript, I doubt they expect to get the full experience anyhow.

Even if you don’t pity the users, you can do it for the semantics. Adding a static map seems like a great semantic improvement over an iframe. Thanks for the tip Drew.

Chris Ward

Great first post, an easy and simple technique that helps usability, it should be used when adding any google map.

Looking forward to the next posts and also the book.

Scott

Great article, Drew. Truly something I’ve never even thought about. I really liked the detail of your reasoning as well. Look forward to 24ways every year now.

David Rodriguez

Great Article!

While slippy maps are cool I think this static map will be my new preferred method for small ‘location maps’. Faster loading and less complicated.

Then just link to googles version for the more complicated map + directions. Just because you can use javascript doesn’t you should in every circumstance. Thanks for making me think!

Juarez P. A. Filho

Progressive Enhancement is always good to know more and I think you won’t impressed your friends with JS enabled, but your friends without JS you’ll for sure.
Nice start… Very excited for next ideas.

Gustavo Cardoso

A really great article, as usual, and you show us a simple and helpful technique. We often think about big and revolutionary ideas and always forget the simple and small ones.
Thanx!

Billee D.

Excellent first article, Drew. This is quite timely for me as well as I’m working on a project that uses Google Maps where a large percentage of the audience will be using older screen readers without JavaScript support.

I could see expanding on your example a bit by adding the lat/long values to the alt attribute of the image. That would also provide another layer of accessibility coverage for the even smaller percentage of folks that use the web with images turned off. Thanks for sharing your solution with us.

Ralph

That’s indeed a nice start for this year’s 24ways. i’m still wondering if a 365ways would work too, but on the other hand only 24 top-notch articles the last month of the year is what makes this site so special.

On topic:
Me too never noticed the Static Maps alternative and from now on I will definitely implement it as a no js fallback. Thanks for this great tip.

Looking forward to tomorrow.

Patrick H. Lauke

Nice one. Off to Bethlehem then…

Wondering if there’d be any value in the script extracting the info from the static map’s url when generating the dynamic one (so that you don’t need an additional Geo call etc, if you already had to work out the lat/lon anyway)?

Greg

“What that won’t cover, however, is the situation where the browser has JavaScript support but, for whatever reason, the JavaScript doesn’t run. This could be due to network issues, an aggressive corporate firewall…

aggressive corporate firewall – that’s me. Glad you covered that base!

trovster

@patrick that is exactly what I was in the middle of writing about. I was meaning to write up the technique of using a static map then enhancing with JavaScript, but Drew beat me to the first step. I already had some base code which I’d turned in to a basic plugin. This article spurred me on to finish it (to a releasable standard at least). Check it out at my jQuery Google Map plugin which hopefully does what you need.

I want to take this further, to include directions (a relatively small task) and to add functionality where you associate it with an peice of HTML and it adds that to the marker and creates the popup.

Another script I want to write is one that takes ADR microformats and generates the map and directions for it. I have already done this, but it just needs wrapping up in to a plugin (see iweb.co.uk for example).

Chris Ellerby

That’s a brilliant solution, but something about it does not sit well with me.

A big part of my job involves optimization, and that means looking at every asset, every http request, and figuring out both its cost and what users it serves.

In this case, for 98% of users are forced to make a http request and load an image that they will never see. Which basically punishes the majority for the benefit of the minority.

While providing valid and useful content to non-javascript users is important, so is the weight of the page.

Again, it’s a great solution, I just wish there was a way to implement it without passing the cost along.

/Chris

Ryan

The Static Maps API is also a great way to keep the page load snappy especially when showing maps on a mobile device.

If a user wants to interact with the map I put an overlay on the static map saying “click/tap to interact” and inject the maps script with the callback parameter specified so we can asynchronously load the map titles and interaction abilities only if the user requires it.

Michiel Bijl

Nice article. Just one comment on your code: Why do you remove the image with JavaScript and don’t simply put the static map as background of the <div>? That way you just need to fill the <div> with the JavaScript map.

Cuts out a step see?

dira

Hi,

I wrote a tool to auto-magically get the long URL (I think nobody likes writing things like &amp;markers=color:red|31.4211,35.1144 by hand :D).

If you have a Google Map with a lot of markers or paths, install this bookmark and you’ll get the static map URL with one click:

http://dira.ro/code/GMap-to-static/

Nicolas Chevallier

I already use static map API and it’s perfect to speed up loading times. For simple operation, this API is MUCH faster than the javascript API, and it is generally sufficient to add a link towards more “interactive” version to satisfy most users.

Rob Sutherland

I’ve used static maps and slippy maps, but had never thought to combine them. Nice and thanks.

It would be nice if there were a way to smooth the transition. I just viewed the example on a lowend high speed connection. The static map dissappeared a few seconds before the slippy map loaded. If I hadn’t been looking knowing what was going on I may have thought something went wrong.

So now, I have something to work on…

Richard Cairns

This is somthing new to me but great idea, in some cases you just want to have a static map I guess.

I am sure heaps of users never use the actuall map functions and just need a basic idea of locations.

Good idea for those rare users, but you will have to load additional data on every request. The displayed data is very limited too, you will probably have to add a legend to the static map to give the user enough info.

One hard thing to know is the right zoom for the user to have a good idea of the location when you display a map for a user.

Andy Wickes

Hi Drew,

Just wanted to say thanks again for committing to 24 ways for another year. I always fine it really useful, and am acutely aware of the amount of time and effort it must take to produce this.

I don’t think I’ve found another industry where the spirit of the community is so alive and well as with the web, so this applies equally to all the other authors as well.

Good work fella!

Oh, and Happy Christmas as well….!

Ronald Williams

Wow, I have just spent a whole day trying to lever a Google map into a Joomla install (custom template – sucks :)) for one of our clients – wish I’d read this before I started, reckon I could have done it in 10 mins – thanks for the advice I’ll be using this in all my projects from now on – cracking blog m8

Andy Pearson

Well, 24 ways 2010 is off to a fine start sir!

I am currently building a CMS which includes a Google Map feature – I’ll be sure to upgrade it to use the technique you’ve explained here. Thanks!

Looking forward to what else you have planned…

Sean Delaney

I guess I’m another reader who didn’t know Google maps offered this service.

I use Google maps quiet heavily and my fallback solution for non-Javascript users was a screen grab of the interactive map with the markers shown.

It works well. However, I have decided to keep using my method over this suggested method. My two reasons:

1) Loading a local image is quicker than requesting it from Google.

2) If the static Google maps service is down (chances of this are probably very little) the user doesn’t get the Google response error and left confused.

A great way to start this years 24 Ways – thanks Drew!

@seandelaney

Impress us

Be friendly / use Textile