Please note that as of 2007-08-27 19:29, the map-a-photo project is no longer under active development. Google My Maps is an easy-to-use alternative.

Map-a-photo tutorial

This tutorial gives a short introduction how to display your own vacation photos in Google Maps using some Java Script code provided by this open source project. If you have any questions, please contact us in the project forums.

Online example

online example.

Downloading the example

You can download "examples.zip" containing a short example at project download page.

Known working browsers

Inserting your own google maps key

To get the example working, you must replace the passage "INSERTYOURGOOGLEMAPSKEYHERE" in the "maps.html" file from the example with your google maps key. If you don't have a google maps key, you can obtain one at http://www.google.com/apis/maps/signup.html.

Please note that as far as I know, you can test the example locally by opening the "maps.html" file in your favorite browser if you have an internet connection, so the code must not be placed on a web server.

Setting the default map center and zoom level

To change the default map center and zoom level, you must again modify the "maps.html" file from the example. The passage map.setCenter(new GLatLng(new GLatLng(48.44673890596188, -123.38882446289062), 12); contains the default location coordinates and the zoom level. If you click on the map, not on a marker, the current location will be shown next to the map part of the browser window.

Adding locations

Locations are places on the map that have a name and can contain photos and text.

To add your own locations to the map, you must modify the "data.xml" file contained in the example. The recommended way is to click on the map to get the location xml element and copy&paste this element into the data element of the "data.xml" file.

Adding photos

You can add photos to a location by adding pictures elements, e.g. <picture file="img_1490.jpg" date="2006-10-12 14:30" />.

Each picture element contains a date and references an image file. The image file must be available and displayable in the browser - it should be a png, jpg or gif image.

Adding text

Adding text works like adding pictures, but the text must be contained in the "data.xml" file, not in separate files, e.g. <text date="2006-10-14 20:00">An example text...</text>.

Contributors

Please note that as of 2007-08-27 19:29, the map-a-photo project is no longer under active development. Google My Maps is an easy-to-use alternative.