how Google Maps works

If you haven't seen Google Maps yet, check it out: it's pretty impressive! If, like me, you're too lazy to read the source to figure out how they accomplished it, that's fine, because this guy has posted an analysis. Short version: lots of transparent PNG overlays, and communication with the server by treating a hidden IFRAME as a socket.
Tags:
Current Music: Recoil -- Stalker ♬

41 Responses:

  1. parkrrrr says:

    I don't know if it's interesting to anyone but me, but the encoded string in the <points> element for a route contains actual latitudes and longitudes for the entire route, suitable for munging and uploading to a GPS receiver. I posted some Perl to decode it over on Slashdot (same username.)

  2. zenmonkeykstop says:

    And if you pan all the way out you get to see the world map as displayed in US highschool textbooks!

    • michaeljgrasso says:

      Some clown wrote:


      And if you pan all the way out you get to see the
      world map as displayed in US highschool textbooks!

      As far out as I can zoom I can only see North America - is the limits of the known world for you?

  3. synaptikchaos says:

    thanks for the heads up.

  4. bitwise says:

    It's pretty clear the map chunks are all prerendered and use easily-understood URLs, so who's going to be first to write an app that will stitch together a map of any size?

    Failing that, I seem to recall somebody here wrote a script that used VNC+mozilla to take long, tall "screenshots" of an entire web page. Any chance of redoing that to capture a massively huge Google Map? I wonder if their code is smart enough to stop loading tiles if your screen appears to be 20,000 pixels square...

    • bitwise says:

      Oh well, guess it'll have to be me.(crappy jpeg because photobucket doesn't allow bigger than 250k images)

  5. corneliusagain says:

    Very cool, but I do like the way that the rest of the world is just kind of missing...

    • duskwuff says:

      Google's new US-centric view of the world.

    • panda_boner says:

      Shut up.

    • corneliusagain says:

      For the record, I really meant I did like the style of it - the way you pan off the US expecting to find other countries, but you just get ocean... endless blueness... it doesn't stop you, and it knows where you are because you can go back the same distance or even circumnavigate the US without seeing it, but it's just blue.

      Cool.

  6. imperator_mei says:

    Doesnt' support Safari. Grumble, mutter.

    • mackys says:

      That one still has me scratching my head. Are these browsers so different (or is Google maps doing things that are so browser dependant) that they can't support anything except IE and Moz derivatives?

      I guess I should be happy they bothered to make it work in anything else besides IE. Most websites these days don't seem to even bother with that much.

      -Ben

      • jwz says:

        This question is, of course, answered in the link you didn't click...

        • mackys says:

          The reason why Google Maps doesn't work in alternative browsers is because XSLTProcessor is an invention of Microsoft which was picked up by the Mozilla team at some point, just like XmlHttpRequest.

          • wilecoyote says:

            So let me get this straight: all these incredibly cool things that Google is doing with the browser (not just maps, but also Google Suggest) are possible thanks to non-standard technologies first introduced by Microsoft?

            Great. That's some cognitive dissonance for you. Let's see how the Google fanboys (who usually tend to be open source/anti-M$/W3C standard zealots too) react.

            • fgmr says:

              Netscape had some pretty fancy stuff (e.g. javascript "style sheets," which could change the html document), but it got stomped as "nonstandard" in favor of things like CSS. I remember an intern at netscape wrote a FPS in browser-side javascript. (I don't know if that was with a released version of the client, or an ill-fated version.) So I wouldn't say microsoft is "first" introducing such technology; if anything, they set things back half a decade.

  7. flipzagging says:

    To do driving directions, they let your browser request a line drawing with coordinates. This means Google will draw you any line drawing, (well, in that semi-transparent blue) as long as you know how to encode the URL.

    Here's a little Perl program to make your own.

    For instance, here's Google drawing a circle.

    • jwz says:

      I am experiencing a strange kind of cognitive dissonance here. One the one hand, that's really cool, and on the other, I can't think of a single thing to do with it. I mean, it's less useful than ringing the bell on a teletype. It's pulling my brain apart.

      • flipzagging says:

        Yeah. I guess they did it this way because their cluster is way too big to do something secure-ish like generating the image server-side, and handing the user an opaque ID.

        Perhaps some dumbass could make a genuine Google URL that displayed some crude graffiti? Well, I've given them the tools now.

  8. thaths says:

    So, jamie, when can we expect a xscreensaver module that grabs pre-rendered blocks of map images and does a flyby? I will start my coding today. There are faster coders than I that will likely get this done quicker.

    • jwz says:

      If you can find a way to incorporate porn, you may have something.

      (All screensavers that involve taking images off the web must eventually show you porn. It's a rule.)

      • benfrantzdale says:

        That solves your cognitive dissonance. Use google to draw porn to create map-based screensavers.

        • taffer says:

          Display random map co-ordinates/zoom level, then draw bewbie-styled "driving directions" on top. Voila.

          SMOP.

      • grayscalewolf says:

        it's the Obscene Driving Directions game. find two addresses give you a route that has two round bulges, shaped like breasts. bonus points if they include nipples. triple-x bonus if you can make the shape of an erect cock

      • treptoplax says:

        ``Every program attempts to expand until it can display porn. Those programs which cannot so expand are replaced by ones which can.''

        • jwz says:

          The detail that guy left out is that webcollage is disabled by default, so he had to explicitly (heh heh, heh heh) turn it on (heh heh, heh heh.)

          But a much better whine is this one.

  9. srcosmo says:

    Finally I can reenact the satellite zoom-in scene from every thriller movie!

  10. srmanek says:

    The map looks a lot like simcity. Now we know what game the google developers like to play.

  11. d1663m says:

    About a two years ago, I gave Mapquest the idea in a suggestion, even went into some detail how it could be pulled off. My idea involved a java thin-client, not sure how much more elegant that would be. This one seems to be (mostly) AnyBrowser(tm) friendly anyway.

    Nice to see somebody put "my" ideas into action! :) Maybe google hired up the dude at Mapquest who read my note? It could happen!