Responsive google maps

Remember the days we used to put a static image of a roadmap on a website, usually accompanied by silly directions in case you came from the North, South or Mars? It was only some time later, when the web matured and google stopped being just a search engine, that a new corporate ‘how to get here / where are we located’ toy was born. Google invented google maps, pretty soon yahoo followed and Microsoft, well… they tend to do everything the rest does, it only takes them a little longer.

Forget yahoo and bing! maps, only if your a fanboy you’ll use them and even then you’re not sure how long they will be around (- cf. yahoo & geocities). Google maps was and is the way to go. Every post-iPhone smartphone has google maps (except the windows phones who use a mediocre version called bing maps).

Anyway, let’s focus on what this is all about!

Nowadays static maps (drawn by the guy who works at the ‘art department’) aren’t really used anymore. Using google maps is fancy and allows you to zoom in/out, get directions,  have a satellite view or even streetview. The sky is the limit and, let’s face it, we all jumped the maps boat.

fast forward to… now!

When we’re developing websites we mostly use google maps somewhere. Inform where an event is held, a company is located or to find the nearest dealer in town. There are many ways to include google maps and the most easy way is to use an iframe with the map embedded. Real men tend to use the maps API to embed the map in the website. It’s al sunshine and lollipops! Until you use a mobile device to surf to the website. Sure the maps work just fine unless the map is too big and you end up in the Maps scrollbar of death™.

So what is the Maps scrollbar of death™ exactly?

When scrolling on your mobile phone or tablet it all works fine, but as soon as your finger hits a google maps you start repositioning the map inside its container. Not a big issue if you have some space around it so you can keep scrolling. Worst case you can usually tap the menu bar on top to regain access to the top of the website, if not: You’re screwed!

So do we need to use the iframe or flash solution? Sure not! You could use the google maps static image API to include the map but then again, we could be using the static image from the guy of the art department, no? So the goldilocks solution is to show the full blown map api on non-mobile / tablet websites and use the static image api on mobile / tablet websites.

Simple solution

The easiest way to achieve this is… to embed both the iframe and the static image and show / hide the appropriate one using some CSS and media query magic.

Plugin solution

Why you should use this plugin? No reason, whatsoever! I just hate it to use the iframe, specially if I have markers and balloons and other stuff to display. That and the fact I hate using the google maps API to geocode addresses and place markers. Therefore I was thinking of a plugin that I could easily pass the address and possible markers to and it would magically show the map or the static image. If I link the static image to maps.google.com with the appropriate address most mobile devices will open their maps application instead! How cool is that!

So without further ado: the jquery responsive google maps plugin (still in progress). The technical mumbo jumbo is on the github readme page, so feel free to comment, add feature requests, fork me or even help me finish this.

A demo can be found here: http://joggink.com/wp-content/uploads/jquerymobilegmaps

 

 

About joggink

I'm a freelance frontend developer and a proud member of the dutch fronteers.

27. January 2012 by joggink
Categories: frontend development, jquery, usability | Tags: , , , | 42 comments

Comments (42)

  1. Pingback: responsive webdesign | Pearltrees

  2. Hi Jochen,
    Excellent plugin, and very easy to add to a site.
    I haven’t had much chance to play with it in a fully responsive site yet, but using your example – is there any way to keep the “pin” in the centre of the map as the screen resizes? Probably impossible without using event listeners which would probably be very overhead heavy.

    Thanks for the plugin and see you at Mobilism :)

  3. Pingback: 柯激情的个人主页 » 2月份热门的 24 个 jQuery 插件

  4. Pingback: 2月份热门的 24 个 jQuery 插件

  5. Hi. I tried to put this to work, but the map doesn´t show up. Than I copy your example with the same code, the same css files, the same javascripts in the same folders, but it doesn´t work.
    What can I do to make this works?

    Thank you.

  6. Hello Jochen!

    Thank you for the nice solution with responsible google maps!

    How to resolve the problem of disappearing the google maps’ magnifing control?

    As David mentioned, I would also like the map to stay responsible on keep the “pin” in the centre of the map and to change one magnify depending on the screen size. Have you any experiments in this?

    Thank you once more for the sharing your experience!

    Kind regards,
    Ruslan

  7. @David / @Ruslan

    I haven’t got time to continue the development. I don’t know if it is possible to keep the pin centered without calling the google API.

    On the other hand, it’s a nice to see when manually resizing but that’s not what this plugin is for ;-) I wanted to make sure mobile users don’t get stuck in the inline google map.

    @Luciano
    I’ll mail you my demo files. If these still don’t work then something is rotten in the state of Denmark

  8. Pingback: 2012年2月份热门的24个jQuery插件 | 曹志士

  9. Pingback: 2月份热门的 24 个 jQuery 插件 | 引领人生

  10. Hi there,

    I’m getting “jquery.mobilegmap.js:66 Uncaught ReferenceError: google is not defined”, thats in Mac/Chrome.

    And in your demo I can’t see the magnifying controls (zoom in or out) but i can see a few distorted pixels of what looks like where it should be.

    Any ideas?

    Thanks,

  11. If you’re viewing this file local it could be that my relative link to the google maps API isn’t working.

    Or is it the online demo that isn’t working?

  12. Pingback: 24 Most Popular jQuery Plugins of February 2012 « Invisible fire…

  13. Pingback: Responsive google maps | Bloggink » Web Design

  14. I’m having the same problem as Luciano. Could you mail me the files as well please?
    Thanks

  15. Same issue as Luciano & Lisa – no map showing…

  16. That’s because if you run the file local you have to change the google maps relative path. So replacing //maps.googleapis.com/maps/api/js?sensor=false by http://maps.googleapis.com/maps/api/js?sensor=false should do the trick ;-)

  17. Hi Joggink

    Thanks for sharing!

    It’s basic, but you should proberly mention that people need to call the Google Maps API like so, just before your script:

    <script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=false”></script>

    Otherwise you get the “Uncaught error”…

  18. Thank you very much for posting this! I created a different solution for the Google Maps on small screen problem: responsive Google maps embeds. I modified the brilliant jQuery FitVids plugin and wrote the FitMaps plugin (that is a great name isnt’ it). You can copy-paste the embed code of your Google map, the plugin wraps a div around the embed’s iframe. The iframe always fills 100% of the wrapping div. Now you can set the wrapping div to e.g. 80% of the screen’s width, so no more scrollbar of death!
    See http://www.waywayway.nl/bin/handig-en-leuk/tutorials/responsive-google-maps-embeds/

  19. Hi

    Good script, very useful.

    One problem I’m having and I’ve noticed it’s the same on your demo, the ‘Street View’ icon doesn’t appear to be showing correctly?

  20. Thanks Joggink for your awesome plugin :)

  21. You’re welcome. Sorry it’s incomplete :(

  22. Pingback: 8 Useful jQuery Google Maps Plugins | Web Design Core

  23. Pingback: A1JavaScripts.com » Responsive google maps – Makes scrolling Google maps on a mobile device easier

  24. Wouldn’t it be easier to put a 100% width on your googlemap?

  25. Just installed the plugin and works a treat with my responsive themes. I had to make a couple of tweaks in the code but really pleased to have found a quick and free solution – Great work Joggink!

    Can be seen on this page: http://www.breathtakingholidayhomes.co.uk/popularwebsite-demo/sample-page-2/

  26. Not really. You should check the scroll bar of death ;-)

  27. I’m a novice, so take this comment within that context. The solution that I used for my site (under development) required no js and was resolved through the css, as follows:

    1) remove the set width attribute from the iframe element html code generated by google.

    2) add a class attribute to the google iframe which matches the class attribute of its containing element.

    How this solution works: Your responsive stylesheet has already assigned width property values to the class of the map’s containing element. As you know, this value adjusts automatically with the user’s screen size via @media queries. Removing the absolute width definition from google’s html, and replacing it with width rules already in your style sheet, automatically makes the map responsive.

    Other than having to set margins, this solution made my google map responsive without a hitch. I don’t see a need for js in this case. What am I missing?

  28. Nice work.

    Curious to hear how your plugin stacks up to this StackOverflow question and answer? (Click my name.)

    Definitely more recent that the stuff mentioned in my answer.

  29. The plugin uses screen.width to determine the device and shows either a JavaScript interactive map OR a static image linking to the google maps web version using the address to show the correct location. It used to open the default maps app on iOS but since apple integrated their own maps it opens up safari.

  30. This plugin isn’t meant to make the map scale, it’s to fix the annoying issue that when you scroll a page and you hit a map, you start moving the map around instead of scrolling the page. If you have large map it would mean your visitors are stuck within the map element. That very annoying. You could tap the top of the screen to scroll back to the top of the page but that’s something not everybody knows.

    So making the map resize using CSS is a piece of cake, keeping your page usable isn’t. Except if you put the image and the interactive map on your page and show/hide the right one using media queries, but then you have duplicate content…

  31. Pingback: Les plugins jQuery les plus populaires | Tn High-tech

  32. How do i add Pin points with images using your script? thanks for the reply.

  33. Thanks so much for this plugin, it has been very helpful.

    But I’m having some weird trouble with it. I have gotten it working just fine on a site. But it only works from my local wifi (the website is remote not local), if I try from a smart phone not connected to that network it just has a white blank space there.

    Here’s the site: http://www.familyorthodontics.com/locations/johns-creek/

  34. Demo link is broken.

  35. Download link is not working

  36. Thanks for letting me know! I’m on a new webserver and some things seem to be broken… Should be fixed.

  37. That hasn’t been implemented but it could be done easily. There’s a markers array in the options which you could populate. The function to populate it hasn’t been written yet, so feel free ;-)

  38. Pingback: 24 scripts jquery para levar seu site a um nível superior

  39. Pingback: mobileGmap, mappe di Google responsive in jQuery - sastgroup.com

  40. Pingback: 50 JavaScript Libraries and Plugins for Maps | TechSlides

  41. Is it possible to configure the map in other language than English? Where can I change it?

  42. great work.. can we use latitude and longitude for address??
    thanks..

Leave a Reply

Required fields are marked *