ClintLalonde.net

Trying to balance the ed with the tech

Zoom and Pan large images with Google map interface

Been playing this morning with Google Maps Image Cutter, an application created by the Centre for Advanced Spatial Analysis at the University College London. I followed the instructions from this blog post on Digital Inspiration (via a tweet from Scott Leslie) and had the app working in a few minutes.

This little java app will allow you to take a very large photo, slice it up into a number of smaller images and, (with a Google Maps API code) overlay a Google maps interface. This gives you the ability to zoom in and out and pan around your image. Very handy if you have large images (like a widescreen panorama for example) that you want to display on a webpage.

Here is an example of what you can do with the tool. The full image size of the collage below is 2500×1658 pixels.

Photo by Yann!s (License: Creative Commons Attribution-Noncommercial-Share Alike 2.0)

3 Comments

  1. Ah, perfection. simple, light, known controls.
    How can I get this to work on my WordPress blogs? Is there a pluging for WordPress? That would be a huge hit!

    – Arthur

  2. No WP plugin that I know of. To get this to work in a WP blog post, I had to use the html iFrame tag in the body of my post and pull the image from a standalone html page I created outside the structure of the blog. The original page is located http://clintlalonde.net/collage.html.

  3. Thanks for the great article. This used to work perfectly until this afternoon.

    Any clue why?

    The default zoom levels are now so many even though I am explicitly setting them to 5 in my code.

    Did Google change something with V2?