Grow your CSS skills. Land your dream job.

Google Maps Slider

Published by Chris Coyier

Google Maps has a JavaScript API now in it's third version. I remember playing with some version of the API back in v2 and thought it was kinda cool but a bit obtuse. For one thing, v3 no longer requires applying for an API key which is nice.

I'm sure it's partly me getting better at JavaScript, but I found the API quite well done and easy to work with. For one thing, it's fully evented. That means you can attach event listeners to different thing, like the map itself or things inside the map. A simple example would be if a marker is clicked, you can change the zoom level of the map, change information shown elsewhere on the page, or really anything else you might want to do with JavaScript.

Not only is it evented for dealing with things inside the map, but the objects you used to create the map and stuff inside it are full of methods for controlling them. This makes it easy to control the map with events that happen elsewhere on your page.

I decided to play with it a little and try to build something.

View Demo Download Files

I used jQuery to help out, but that's definitely not required.

I created a list of locations in an unordered list. Each list item had HTML5 data attributes containing the latitude and longitude of it. It also contained a title and long and short descriptions.

<li data-geo-lat="41.9786" data-geo-long="-87.9047">
  <h3>O'Hare Airport</h3>
  <p>Flights n' stuff</p>
  <p class="longdesc"><strong>About:</strong> O'Hare International Airport has been voted the "Best Airport in North America" for 10 years by two separate sources: Readers of the U.S. Edition of Business Traveler Magazine (1998-2003) and Global Traveler Magazine (2004-2007). Travel and Leisure magazine's 2009 "America's Favorite Cities" ranked Chicago's Airport System (O'Hare and Midway) the second-worst for delays, New York City's airport system (JFK, Newark Liberty, and LaGuardia) being the first.</p>
</li>

When one of these list items is hovered over, I apply a "hover" class to deal with styling, "pan" the map to the new coordinates, and fill out the right area with more information.

It's all fairly straight forward and further commented to clarify. Adding/editing points is as simple as changing coordinates and text right in the HTML part.

Idea

The idea came from this website which I found in a tweet by ilovetypography.

Comments

  1. That is a great way to display different points in a geographic area, have never seen that type of map implementation before. Two thumbs up!

    • Al
      Permalink to comment#

      Chris,

      I am using Zoho Creator to gather info and direct users to different locations around the world. Is there a way to get this to work with Zoho Creator or another webpage like it?

  2. Permalink to comment#

    I love it, thanks for sharing!

  3. Perfect timing, yet again! I am just now diving into the Maps API after reading the NetTuts tutorial. Only problem, the NetTuts tutorial is based on V2 of the api.

    Thanks!

  4. Greg
    Permalink to comment#

    Love the tut…and Pequod’s!

  5. Permalink to comment#

    Dude that’s sick! You get the gnarly award of the day.

  6. jez
    Permalink to comment#

    What a shame that in this tutorial there is no option if JavaScript is not enabled. maybe a static goggle map -design for all…

    • They do offer a “static map” API which requires no JavaScript, so if you are interested in this and interesting in building fallbacks, check that out.

  7. What happens if you panned it to an entry in Oregon?

    • It just instantly zooms instead of panning. You can see the effect by zooming in close on one of these points and hoving over others. The limit is the current width of the map.

  8. jamie
    Permalink to comment#

    I have worked with a google map and the way that I got the geo code was to just type in the place I wanted on google maps. Like if you type portland oregon, it will put a bubble on the map. Then if you right click on that bubble and choose, “What’s here” it will change the text of portland oregon to the geo code. try that out

  9. Yep, another great example Chris. I watched a video hosted at Google the other day about v3. Discussing how tiles were rendered within the api, which could be painfully slow if you have multiple points over large distances. Your example is about 6 tiles maybe I don’t know and if you placed pins x 6 over every 6 tiles on the grid it would be slow. What the spokesperson was saying though to improve speed you could draw a layer of divs and integrate them onto that, making it much more static in concept.

    Alot of nice theory, but implementation is another.

    Nice nice example. Thanks!

  10. That’s a really cool solution to implement Google-Maps. Thx for sharing the idea Chris!

  11. Hey Chirs, Nice Blog. I currently use Google maps in all of my sites and there’s a pretty sweet procedure for getting a lot of important information on there. I’ve not yet looked into what we can do with API but it looks great if you can change the look of the pins etc.

  12. Hello Chris,
    this api really is sweet! Very useful. Can one also use the api on maps not ‘coming from Google’? Say, you need something like this on a map of a shopping hall or a theme park? Just a thought. Googled after something similar, yet always ended up with a Google Map instead of a custom map.

    Cheers,
    Pioter

  13. Awesome………………….

    thanks..

  14. Very cool, nice work. Do you have control over the speed of the panning? To my eyes it’s a bit fast.

    • I don’t think it’s controllable. The .panTo method only takes one parameter and it’s LatLong

    • I wonder if it would be feasible to make a countdown timer function that would sequentially pass a stepped LatLong variable based on the difference between the current point and a destination point and the desired time of the animation.

      Of course thats just assuming a linear transition. Easing could get too funky for my comprehension. Also this may not be a good solution if you constantly have to make calls to Google’s server whereas if it’s cached … just maybe. Perhaps I ‘ll try it someday.

  15. Chris,
    Awesome information with Demo and Download.

    this HTML will help me.

    thanks a ton.

  16. Ray
    Permalink to comment#

    Very nice, we are actually going to develop a web app using Google map API. This definitely sherd some light. Thanks.

  17. Now that is really tasty! Excellent work Chris and thanks for sharing!

  18. Edaward
    Permalink to comment#

    Now that’s some useful stuff. Very well done !

  19. Very awesome!

    Completely not Web design but… Nothing like good ol Chicago :)

    One of those locations is real close to my internship…

    And now I might have to try that Pequod’s Pizza out…

  20. Hi Chris,
    This is great, and the map is really responsive!
    I was recently looking at the maps API too, and threw together a page placing tweets with geolocation information onto a map. The V3 API made it pretty easy.
    http://www.pabloestrada.us/worldcup/

    I’ll look at your code to see how I can improve mine ;)

  21. Thanks, Chris! Perfect solution for a site that I’m wireframing right now.

    Just one question…have you tried Eduoardo’s Pizza on Howard? Deep dish spinach pie was our fav. :)

  22. TeMc
    Permalink to comment#

    Just a quick note, when zooming in a few times, and then hovering over the items the panning around still works, however the first one does not.

    When zoomed it a bit more than the default zoomlevel, going from or to O’Hare Airport is insantly without animation.

    Question: Is it possible to set the zoomlevel ? Ie. let it go from close-up point A to zoomed out point B ?

  23. Just when you think Google can’t get any better, they just keep coming up with more great ideas. This is really cool! I can’t wait to see what they come up with next.

  24. Thank you.Can you provide more details????

  25. In the code there is a reference to a example.js file,
    [ ]
    but it is not included int the download.

  26. This would be a great app.

  27. I’d like to start knowing how to use the API. Hope its simple to understand.

    Thanks!

  28. Permalink to comment#

    This is very cool. Thanks Chris!

  29. Henri
    Permalink to comment#

    Excellent work Chris, I tried it with my own coordinates and works perfectly just with a little problem: the panning works only if the points are nearby. As soon as it gets more than a full frame of distance it just jumps. Would you know how to arrange this? That would make it just perfect… I realize also that when you zoom it happens the same thing, as the distance between points gets bigger so it can’t pan any more. In any case excellent work. Thank you!!!

  30. I like a lot! but I have one question, with this I can well-positioned my pages on Google?

    I want to do a web page that is well-positionend in google and I don’t know if with this I can do it.

    Thanks

    Esther

  31. tj
    Permalink to comment#

    I have an example google map to get directions using v3 but can’t figure out how to return the map to its original starting point if you clear the text box.

    anyone have any idea?

    Its a rough layout but try putting in your address. All works except getting it back to the starting point.

    http://dev-steele.designvsdevelop.com/index.php?option=com_vehicles&view=vehicles&id=26&Itemid=6

  32. Ray
    Permalink to comment#

    looks good! I was looking for sommthing like that. I have only one problem. The locations that i wil use are dynamic from a database. In that database are no coordinates. I ask myself is whether it also can be done with a address.

    don’t mind my spelling, my english writing is not that good

    I like if you know something about it

  33. Sddharth
    Permalink to comment#

    Great one, i am gone use it in my site. I needed this. Thanks Criss, U Rock

  34. Permalink to comment#

    I think it is very useful to us. I like it. This article will help me.

  35. Useful information us… So when people know about that google maps released api for it’s product for mobiles, sure they will start buying mobile phones with java script enalbed mobile phones…

    Venkatesh – Gulfwebstudio.com

  36. Hello friend,
    I found your site through that without meaning to, and will not surprise the context of this letter because I am Brazilian and I are using google translator, rs. I know it’s weird that I ask you, but do you have out there, an example of a table all done in CSS. I am looking for a few days makes.
    I designed the routine in tow trying to access and leave it running in the CSS:

    Selecione o funcionário desejado para criar a escala…

    <option value="cadastro_escaladofuncionario.php?id_funcionario=”>
    0) {
    mysql_data_seek($rsEscalaDoFuncionario, 0);
    $row_rsEscalaDoFuncionario = mysql_fetch_assoc($rsEscalaDoFuncionario);
    $funcionariocorrente = $row_rsEscalaDoFuncionario[‘id_funcionario’];
    $nomedofuncionariocorrente = $row_rsEscalaDoFuncionario[‘nomecompleto’];
    }
    ?>

    Wish you looked at the routine and help me find a way out. The best I got was to put this in PHP, but this form qria CSS.

    A big hug!

  37. Permalink to comment#

    Very nice implementation! Great work. I use a lot of snippets from css-tricks on my pages, maybe I’ll also use this snippet somewhere, just have not yet found the right place for it ^^

  38. Avkash
    Permalink to comment#

    Great Effort….. Never seen Before…..
    Best way to show multiple location with details…
    Two Thumbs UP for you MAN….

  39. Giuseppe Moglia
    Permalink to comment#

    how can i do to insert a kml too?
    thank’s

  40. Fernando
    Permalink to comment#

    Hi Chris! Nice tut! It’s perfect for what I need but I need to add infowindows. I’d managed to add them but when the map pans to the next location, the infowindow stays open. How would you implement said infowindows? Thanks!

  41. RodgerFox
    Permalink to comment#

    I really like! but I do have one question, how to connect the code to WP?
    Thanks
    RodgerFox

    • RodgerFox
      Permalink to comment#

      Connect all the files to the page. Displays the name and description of sites. But the map is not showing, help me please.

    • Romek
      Permalink to comment#

      Works for me on WordPress. But… description text is duplicated. Weird problem. :(

  42. wetwetwafu
    Permalink to comment#

    Can anyone confirm that this is working in IE? thanks.

  43. endrit
    Permalink to comment#

    nice tutorial how to make it in wordpres

  44. Emily
    Permalink to comment#

    Hello. First of all, thank you for this, love it. I have a question. What if I have muliple locations, but I want to maintain the dimensions of the canvas with the map and the details. I mean, can I do something like to make the locations list to scroll down inside the dimensions of the canvas with this dimensions. How can I do this? Thanks a lot.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".