Embed Large Pictures with Google Maps Viewer
Learn how to embed high resolution photographs into your website (with pan and zoom) using the Google Maps Image Viewer that cuts the large image into small tiles.
This tutorial explains how you can use Google Maps to embed high-resolution photographs and other large images into your website in few easy steps.
Since it uses Google Maps, users can pan or zoom the image with the mouse just the way they navigate Google Maps. Let’s see how:
GMap Image Cutter will cut large images into tiles for displaying on a Google Map.
Use Google Maps to Embed Large Images
Download the free Google Maps Image Cutter application – it is a zip file and you can just extract it to any folder on the desktop.
The app will cut any large photograph into tiles that are later displayed inside a Google Maps. Double-click the GMapImageCutter.jar file to launch the application (you need to Java installed on your computer).
Choose File->Open and select any large photograph on your hard drive. Leave the Tile Count as default and click the Create button.
You will now see an HTML file and numerous small images (tiles) in a sub-folder that has the same name as your original image. Upload the entire folder to your website (or even Dropbox) and embed the HTML file in your web page using the IFRAME tag.
<iframe width="800" height="600" frameborder="0"
scrolling="no" marginheight="0" marginwidth="0"
src="panorama.html">
</iframe>
Live Demo – Google Maps Tiles
You can either use the on-screen controls or your mouse to zoom and pan the image. Alternatively, use the two-finger pinch if you are on a touch screen like the iPad.
You can use Google Maps Image Cutter to embed JPG, PNG, GIF, BMP, TIFF and even RAW images from DSLR camera. It uses Java and works on Windows, Mac and Linux systems.
