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)

CC BY 4.0 Zoom and Pan large images with Google map interface by Clint Lalonde is licensed under a Creative Commons Attribution 4.0 International License.

Profile Picture for Clint Lalonde
Wrangler of learning technologies by day, Dad, cyclist, soccer fan and, lately, home roaster of coffee by night. INFJ. I am the Manager of Educational Technologies at BCcampus, working primarily on open education projects. This blog is a personal blog and do not necessarily reflect the opinions of BCcampus.


    1. We have played around with overlays in Google maps. They are quite easy to do, and take any kind of HTML code, so you can easily embed content into the overlay, augmenting the map with extra info (like YouTube videos). One of my staff created a mock crime scene for a Justice Studies course where he plotted crimes scenes around Vancouver and augmented the plotted point with faked victim impact reports and videos. Seeing how the crimes were laid out on a map was powerful for the students because they could see patterns in the map and see the range of where the criminal activity was occurring, plus with streetview they could zoom in and get a look at the types of terrain the criminal preferred – trees and high shrubs, tall buildings, alleyways. made for a very realistic scenario.

  1. 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?

  2. 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

Comments are closed.