Since the introduction of the Google Maps service in 2005, online maps have taken off in a way not really possible before the invention of slippy map interaction. Although quickly followed by a plethora of similar services from both commercial and non-commercial parties, Google’s first-mover advantage, and easy-to-use developer API saw Google Maps become pretty much the de facto mapping service.
It’s now so easy to add a map to a web page, there’s no reason not to. Dropping an iframe map into your page is as simple as embedding a YouTube video.
But there’s one crucial drawback to both the solution Google provides for you to drop into your page and the code developers typically implement themselves – they don’t work without JavaScript.
A bit about JavaScript
Back in October of this year, The Yahoo! Developer Network blog ran some tests to measure how many visitors to the Yahoo! home page didn’t have JavaScript available or enabled in their browser. It’s an interesting test when you consider that the audience for the Yahoo! home page (one of the most visited pages on the web) represents about as mainstream a sample as you’ll find. If there’s any such thing as an ‘average Web user’ then this is them.
The results surprised me. It varied from region to region, but at most just two per cent of visitors didn’t have JavaScript running. To be honest, I was expecting it to be higher, but this quote from the article caught my attention:
While the percentage of visitors with JavaScript disabled seems like a low number, keep in mind that small percentages of big numbers are also big numbers.
That’s right, of course, and it got me thinking about what that two per cent means. For many sites, two per cent is the number of visitors using the Opera web browser, using IE6, or using Mobile Safari.
So, although a small percentage of the total, users without JavaScript can’t just be forgotten about, and catering for them is at the very heart of how the web is supposed to work.
Starting with content in HTML, we layer on presentation with CSS and then enhance interactivity with JavaScript. If anything fails along the way or the network craps out, or a browser just doesn’t support one of the technologies, the user still gets something they can work with.
It’s progressive enhancement – also known as doing our jobs properly.
Sorry, wasn’t this about maps?
As I was saying, the default code Google provides, and the example code it gives to developers (which typically just gets followed ‘as is’) doesn’t account for users without JavaScript. No JavaScript, no content.
When adding the ability to publish maps to our small content management system Perch, I didn’t want to provide a solution that only worked with JavaScript. I had to go looking for a way to provide maps without JavaScript, too.
There’s a simple solution, fortunately, in the form of static map tiles. All the various slippy map services use a JavaScript interface on top of what are basically rendered map image tiles. Dragging the map loads in more image tiles in the direction you want to view. If you’ve used a slippy map on a slow connection, you’ll be familiar with seeing these tiles load in one by one.
The Static Map API
The good news is that these tiles (or tiles just like them) can be used as regular images on your site. Google has a Static Map API which not only gives you a handy interface to retrieve a tile for the exact area you need, but also allows you to place pins, and zoom and centre the tile so that the image looks just so.
This means that you can create a static, non-JavaScript version of your slippy map’s initial (or ideal) state to load into your page as a regular image, and then have the JavaScript map hijack the image and make it slippy.
Clearly, that’s not going to be a perfect solution for every map’s requirements. It doesn’t allow for panning, zooming or interrogation without JavaScript. However, for the majority of straightforward map uses online, a static map makes a great alternative for those visitors without JavaScript.
Here’s the how
Retrieving a static map tile is staggeringly easy – it’s just a case of forming a URL with the correct arguments and then using that as the src of an image tag.
<img src="http://maps.google.com/maps/api/staticmap
?center=Bethlehem+Israel
&zoom=5
&size=540x280
&maptype=satellite
&markers=color:red|31.4211,35.1144
&sensor=false"
width="540" height="280" alt="Map of Bethlehem, Israel" />
As you can see, there are a few key options that we pass along to the base URL. All of these should be familiar to anyone who’s worked with the JavaScript API.
- center determines the point on which the map is centred. This can be latitude and longitude values, or simply an address which is then geocoded.
- zoom sets the zoom level.
- size is the pixel dimensions of the image you require.
- maptype can be
roadmap,satellite,terrainorhybrid. - markers sets one or more pin locations. Markers can be labelled, have different colours, and so on – there’s quite a lot of control available.
- sensor states whether you are using a sensor to determine the user’s location. When just embedding a map in a web page, set this to
false.
There are many options, including plotting paths and setting the image format, which can all be found in the straightforward documentation.
Adding to your page
If you’ve worked with the JavaScript API, you’ll know that it needs a container element which you inject the map into:
<div id="map"></div>
All you need to do is put your static image inside that container:
<div id="map">
<img src="http://maps.google.com/maps/api/staticmap[...]" />
</div>
And then, in your JavaScript, find the image and remove it. For example, with jQuery you’d simply use:
$('#map img').remove();
Why not use a <noscript> element around the image? You could, and that would certainly work fine for browsers that do not support JavaScript. 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, or even just a bug in your code. So for that reason, we put the image in for all browsers that show images, and then remove it when the JavaScript is successfully running.
About rate limits
The Google Static Map API limits the requests per site viewer – currently at one thousand distinct maps per day per viewer. So, for most sites you really don’t need to worry about the rate limit. Requests for the same tile aren’t normally counted, as the tile has already been generated and is cached. You can embed the images direct from Google and let it worry about the distribution and caching.
In conclusion
As you can see, adding a static map alongside your dynamic map for those users without JavaScript is very easy indeed. There may not be a huge percentage of web visitors browsing without JavaScript but, as we’ve seen, a small percentage of a big number is still a big number. When it’s so easy to add a static map, can you really justify not doing it?
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.
01/12/2010
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!
Vote Helpful or Unhelpful
01/12/2010
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!
Vote Helpful or Unhelpful
01/12/2010
Here we go! It’s that time of the year again. I look forward to the next 23 instalments..
Vote Helpful or Unhelpful
01/12/2010
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.
Vote Helpful or Unhelpful
01/12/2010
Loving 24 Ways this year. Off to a great start with such a practical article. Keep it up :)
Vote Helpful or Unhelpful
01/12/2010
Already richer thanks to 24 Ways. Had no idea about the Static Map API
Vote Helpful or Unhelpful
01/12/2010
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.
Vote Helpful or Unhelpful
01/12/2010
24Ways is back baby! Off to a great start. So simple and elegant of an idea.
Vote Helpful or Unhelpful
01/12/2010
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!
Vote Helpful or Unhelpful
01/12/2010
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!
Vote Helpful or Unhelpful
01/12/2010
Good to see a new batch of helpfulness. Thanks peeps!
Vote Helpful or Unhelpful
01/12/2010
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 :-)
Vote Helpful or Unhelpful
01/12/2010
should ‘&’ be ‘&’ ?
Vote Helpful or Unhelpful
01/12/2010
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!
Vote Helpful or Unhelpful
01/12/2010
Thanks for the tips on using progressive enhancement with Javascript-based maps. I didn’t realize there was a static map API for Google Maps. Love it!
Vote Helpful or Unhelpful
01/12/2010
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 !
Vote Helpful or Unhelpful
01/12/2010
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?
Vote Helpful or Unhelpful
01/12/2010
A great article, Drew. Stumbled upon this website today and bookmarked it.
Can’t wait to read the other 23 articles. Thanks!
Vote Helpful or Unhelpful
01/12/2010
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!
Vote Helpful or Unhelpful
01/12/2010
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.
Vote Helpful or Unhelpful
01/12/2010
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.
Vote Helpful or Unhelpful
01/12/2010
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.
Vote Helpful or Unhelpful
01/12/2010
Wow! Is it that time of year again! Great article and looking forward to the next 23 :D
Vote Helpful or Unhelpful
01/12/2010
Great way to kick off this years 24 Ways, Drew.
I know I often overlook this when placing maps on clients pages.
Not anymore.
Vote Helpful or Unhelpful
01/12/2010
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.
Vote Helpful or Unhelpful
01/12/2010
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.
Vote Helpful or Unhelpful
01/12/2010
Quick, simple, easy, Bam!
Love it, why can’t 24ways be year round?
Vote Helpful or Unhelpful
01/12/2010
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).
Vote Helpful or Unhelpful
01/12/2010
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
Vote Helpful or Unhelpful
01/12/2010
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.
Vote Helpful or Unhelpful
01/12/2010
Interesting idea, I hadn’t considered a fallback for Google Maps before – smart thinking!
Vote Helpful or Unhelpful
01/12/2010
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).
Vote Helpful or Unhelpful
01/12/2010
Really nice idea, I’d never thought about doing that before. Nicely explained too. Will definitely give this ago next time I’m implementing a map.
Vote Helpful or Unhelpful
01/12/2010
@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.
Vote Helpful or Unhelpful
01/12/2010
Great post! Will definitely implement this technique into some of our sites with google maps.
I look forward to the rest of them.
Vote Helpful or Unhelpful
01/12/2010
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.
Vote Helpful or Unhelpful
01/12/2010
Bit old hat as its been around for over 4 years, and used and abused to death; but its good to see 24ways is off.
This is quite a cool usage of the staticmap api
Vote Helpful or Unhelpful
01/12/2010
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).
Vote Helpful or Unhelpful
01/12/2010
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.
Vote Helpful or Unhelpful
01/12/2010
Nice start to December thanks guys :)
I’m thinking I’m going to be replacing a lot of maps I use with these and linking into google maps if they need more
Vote Helpful or Unhelpful
01/12/2010
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
Vote Helpful or Unhelpful
01/12/2010
Drew, I don’t believe you actually need to remove the static map image with script as Google’s code replaces any contents in the map div with the slippy map.
Vote Helpful or Unhelpful
01/12/2010
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
Vote Helpful or Unhelpful
01/12/2010
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.
Vote Helpful or Unhelpful
01/12/2010
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
Vote Helpful or Unhelpful
01/12/2010
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
Vote Helpful or Unhelpful
01/12/2010
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.
Vote Helpful or Unhelpful
01/12/2010
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…
Vote Helpful or Unhelpful
01/12/2010
Gerard – here’s something you can buy, The 24 ways Annual 2010. It’s in aid of UNICEF.
Vote Helpful or Unhelpful
01/12/2010
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.
Vote Helpful or Unhelpful
01/12/2010
Ha! :)
Done – preordered – great cause – looking forward to the annual Drew!
Cheers!
Vote Helpful or Unhelpful
01/12/2010
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.
Vote Helpful or Unhelpful
01/12/2010
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!
Vote Helpful or Unhelpful
01/12/2010
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.
Vote Helpful or Unhelpful
01/12/2010
Should the rate limits be concerning for large, map-focused sites that want to utilize only the slippy maps?
Vote Helpful or Unhelpful
01/12/2010
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.
Vote Helpful or Unhelpful
01/12/2010
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!
Vote Helpful or Unhelpful
01/12/2010
24 Ways 2010 is off to a great start. Awesome article. Will def be sharing this with my coworkers and implementing on client sites going forward.
Vote Helpful or Unhelpful
01/12/2010
Great breakdown on this. What a perfect start to 24 Ways 2010 !!!
Great technique, simple and very effective. I’m so happy it’s December again!
Vote Helpful or Unhelpful
01/12/2010
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.
Vote Helpful or Unhelpful
01/12/2010
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.
Vote Helpful or Unhelpful
01/12/2010
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)?
Vote Helpful or Unhelpful
01/12/2010
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.
Vote Helpful or Unhelpful
01/12/2010
“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!
Vote Helpful or Unhelpful
01/12/2010
Thanks Drew, didn’t know this was an option. As an evangelist of progressive enhancement i will be sure to add this to my repertoire
Vote Helpful or Unhelpful
01/12/2010
@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).
Vote Helpful or Unhelpful
01/12/2010
So it has began. Thank you for the fantastic write-up. Very useful. Hope to integrate it to me website.
Vote Helpful or Unhelpful
01/12/2010
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
Vote Helpful or Unhelpful
01/12/2010
Simple ideas are the best, thanks for pointing this out.Static google maps… great article!
Vote Helpful or Unhelpful
01/12/2010
Chris:
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.
Vote Helpful or Unhelpful
01/12/2010
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.
Vote Helpful or Unhelpful
02/12/2010
Great stuff!
Implemented this in about five minutes. The sometimes-slow load of Google Maps has always bugged me – this way it draws much less attention.
Vote Helpful or Unhelpful
02/12/2010
Wow, great tip, and an excellent start for my web design “advent calendar”. I can use this one right away.
Vote Helpful or Unhelpful
02/12/2010
Sean Delaney:
I think your technique violates the Permission Guidelines for Google Maps (Screenshots/use in your site).
Vote Helpful or Unhelpful
02/12/2010
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?
Vote Helpful or Unhelpful
02/12/2010
Great article to kick off another year of 24Ways!
Static GoogleMaps can be a nice addition to websites. Beats creating thumbnails from the full-size maps with overlays.
Vote Helpful or Unhelpful
02/12/2010
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.
Vote Helpful or Unhelpful
02/12/2010
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…
Vote Helpful or Unhelpful
03/12/2010
Interesting article, Drew. Although every web professional ensures that their websites respect the principle of progressive enhancement, it was a nice reminder.
Vote Helpful or Unhelpful
04/12/2010
Hi,
I wrote a tool to auto-magically get the long URL (I think nobody likes writing things like &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/
Vote Helpful or Unhelpful
06/12/2010
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.
Vote Helpful or Unhelpful
08/12/2010
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…
Vote Helpful or Unhelpful
09/12/2010
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.
Vote Helpful or Unhelpful
13/12/2010
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.
Vote Helpful or Unhelpful
21/12/2010
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….!
Vote Helpful or Unhelpful
15/07/2011
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
Vote Helpful or Unhelpful
17/12/2012
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?
Vote Helpful or Unhelpful
01/12/2010
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…
Vote Helpful or Unhelpful
Impress us