I visited the Google+ Project website the other day and to my surprise, it was powered by the Google Maps engine! It is somewhat creative to re-use the Maps engine for any purpose other than mapping. It is just beautiful.



It also reminds me of the Art Project I've seen a while back that uses the Street View engine. A must see.



Anyways, I'm pleased to show you two samples today: they both let you navigate into an image using the Google Maps engine. I'm also giving up the necessary tools to do it yourself. Enjoy!



 

Table of Contents

• Introduction
• Sample #1 - Earth
• Sample #2 - Lara Croft
• Possible Applications
• How it works...
• HTML/JavaScript Code - Both Samples
• C# Code - Tiles Generation
• Credits
• Recommended Reading
• Conclusion
• Related Downloads
• Related Articles

 

Introduction

Hi,



I've decided today to create small Google Maps samples that lets you zoom in and out of two pictures. As I said, I'm giving all the code to reproduce them including a small command line utility that lets you generate, from a source picture, the tiles your map needs to zoom into it. Pretty nice huh?



 

Sample #1 - Earth

Yes! what you're seeing at the top of this article is actually a Google Maps map! The map contains only custom controls for a richer user experience. Go back to the top if you missed it...



Let's look at a more simple example this time:



 

Sample #2 - Lara Croft

 

Possible Applications

The two samples are pretty cool but aren't very useful as they are. But maybe we can think of some possible applications of this technology for...

• online installation manuals, where you can zoom and interact with some components
• museums, to display pieces of art in great details
• learning, by exploring the different layers of something
• any product showcase, to show in details the features of a product
• etc...

There's plenty of possible applications and if you're thinking about something interesting, feel free to share your ideas by leaving a comment below!



 

How it works

If you're not a Google Maps API guru, you may find the recommended reading section of this article quite useful.



Technically, this is pretty simple. At the zoom level 0 (zero). Google Maps displays a single 256px square tile representing "the world" (your whole object). As you zoom to the level 1, Google Maps shows the equivalent of your original tile zoomed to 200%: a 512px square area. But it is not your original 256px tile that is stretched by 200% to fill that area, what happens is that 4 new 256px tiles are loaded. So the same picture is shown, but it has four times the resolution and since the map's viewing area stays the same size, you have the impression that the picture has been zoomed in. At any zoom level, you can find the number of tiles there are on each side of the map with this formula: 2 ^zoom.



The idea here is to find a picture large enough to cover the zoom level 4 or 5 (4096 by 4096 or 8192 by 8192). Then use my utility to split that picture recursively at each zoom level into 256px tiles.



After that it is only a matter of telling Google Maps API to use your tiles instead of the default ones.



 

HTML/JavaScript Code - Both Samples

This is a complete example of an HTML file containing my 2 samples. Just copy and paste the code into a local .html and open it with your favorite browser. UPDATE: An html file has been provided in the Related Downloads section. If you're looking for the tiles generator, it's here.



 

C# Code - Tiles Generation

Copy and paste the following C# code into a new Console Application project (lets say "TilesGenerator"). UPDATE: A compiled version has been provided in the Related Downloads section. You can invoke the program like this:

TilesGenerator.exe [maxzoom] [filename]

Where [maxzoom] represents the maximum zoom level you want to achieve. And [filename] represents your huge picture from which you want to generate the tiles for each zoom level.



Remember, at zoom level...



0, you have 1 (256px wide) tile

1, you have 4 tiles

2, you have 16 tiles

3, you have 64 tiles

4, you have 256 tiles

5, you have 1,024 tiles

[...]



So if you choose level 5, the program will resize your original picture to 8192px by 8192px (32 by 32 tiles) and will generate all the 1,024 tiles for that level. It will then resize your original image to 4096px by 4096px to generate the 256 required tiles for the zoom level 4. It will proceed as such for the remaining zoom level until reaching zoom level 0. At the end, you'll be having 1 + 4 + 16 + 64 + 256 + 1024 = 1,365 tiles. It's best to use a square picture.



 

Credits

• The Google+ Project website for the idea of using Google Maps in a whole different way
• webdesignhot.com for the conceptual symbol of a green earth graphic
• laracroft.tv for the Lara Croft model
• iconfinder.com and Aleksandra Wolska for her icon sets
• switchonthecode.com for inspiring image manipulation functions in C#
•   for all the books I read to keep my mind active :)

 

Recommended Reading

  A great book that I can recommend you is a plain JavaScript book called  . This is THE book to have if you want to master the basics of JavaScript. Even today, I can open up the book at any page and learn or re-learn something useful. JavaScript is so rich, having an in-depth knowledge of it is the key to success to build great applications with any library.



  Then if you're a beginner with Google Maps API v3, you will definitely find interesting  . One reviewer actually said: " The online documentation of the google maps api 3 is pretty good, but I definitely found that using this book helped me get my project done alot faster."



 

Conclusion

Thank you for reading, don't forget to like the article (if you really did) and buy your books from   if you're a reader :) It encourages me to write more and more articles on this blog.



Again, thank you for being here.



 

Related Downloads

 

Related Articles

• FIX: jQuery JSONP request to the Google Maps API Geo Service
• Google Maps API and jQuery - Tips to Avoid Using Both
• Google Street View And Google Maps Interaction - Sample Showcase
• JSONP and Google Maps API Geocoder - Not a Bug
• Google Maps API and jQuery - Memory Leaks Revisited