Home
We were recently tasked by a client to feed in all of the images on their site to a Google map (geo-coded) as seen when you turn on the google images filter. This seemed fairly straight-forward at first as pretty much anything Google does is documented and easy to pick up, for some reason this is not the case with geo-coded images.
As you may well know Google uses Panaramio to display its photos on a map, this may be fine for some but was not suitable for us.
Why not use Panaramio?
Panaramio is a perfectly good application and we would suggest for smaller sites that you do use Panaramio, upload your photos and use their API. The issue we had was that the overlay always takes you to the Panaramio site (our client wanted to remain on their site but view the image in their gallery) and the storage limit of 2GB. Unfortunately we would eat up 2GBs worth of images in no time.
Here is our Panaramio Google maps alternative:
Nice eh? we think so too!
If your reading this I’m sure you are aware there is a lack of documentation and tutorials online. We hunted for ages and found this solution, we do not intend to take all of the credit for this as we used pre-made js files provided by Google and Panaramio, we have just modified them slightly to achieve a custom version. The original websites are cited at the bottom if you want some further reading.
Whats Required:
- PHP server (or similar for creating your own JSON feed)
- Google maps API key
- Our zip files of code
The Code:
Below is the source code used in this example:
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>
<head>
<title>Geocode Images</title>
<script src=”http://maps.google.com/maps?file=api&v=2.98&key=%%API-KEY%%“type=”text/javascript”></script>
<script src=”markermanager.js” type=”text/javascript”></script>
<script src=”soak_layer.js” type=”text/javascript”></script>
<script type=”text/javascript”>
//<![CDATA[
var map = null;
var geocoder = null;
function setupMap() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.419322,-122.085228), 8);
map.enableGoogleBar();
map.addControl(new GSmallMapControl());
map.enableDoubleClickZoom();
var soak_layer = new SoakLayer(map);
soak_layer.enable();
}
}
//]]>
</script>
</head>
<body onload=”setupMap()” onunload=”GUnload()”>
<div id=”map” style=”border:2px solid green; width: 550px; height: 500px”></div>
</body>
</html>
Explanation:
- First we include Google maps file (change the API-key to be correct for the domain you are using)
- Next we include the mapmarker.js (standard Google library also download-able on version control here)
- Now we include the soak_layer.js (this is a standard js Google library we have modified)
- Now in the body of the document we insert the Javascript for a standard map
- Included in the map js is the calls to the Soak Layer (will discuss below)
- Now include a matching div with an id of “map” for the js to hook onto.
Let’s look at the soak_layer.js
The soak_layer file simply reads from a API (on your web server) which generates a set of JSON data. As this file was written to work with the JSON object that panaramio produces all you will need to do is re-create your own JSON output in the same structure and the scripts will take care of the rest.
Within this file at line 98 you can set the options that are passed into the API feed. The options to focus on are:
- from: “0″ = get images from 0
- to: “50″ = up to 50
- minx: “-180″ = min x coords against image query
- miny: “-90″ = min y coords against image query
- maxx: “180″ = max x coords against image query
- maxy: “90″ = max y coords against image query
Your API will need to only show image results within the minx/y and maxx/y coords.
The API call is fired every time a map interaction ends (move, drag, zoom etc…)
You could also alter the options to filter criteria further, for example if in your DB images are stored with keywords defined you could only return images that have a keyword containing say “panoramic”.
Just to point out:
At this stage we would like to point out the following:
- In this example we are still using the panaramio JSON php feed (editable on soak_layer @ line 118)
- The JSON format can be found here: http://www.panoramio.com/api
- The original article this was taken from and extended from can be found here:
http://googlegeodevelopers.blogspot.com/2008/06/panoramio-api-markermanager-instant.html - Soak Blog Geocode Images: Download Zip Here
- If you found this useful PLEASE share it
Enjoy!
I’ve tested your script and it returns me this error:
invalid label (in SampleJSONFeed.php).
Are you sure this works?
Hi Lucifix,
We are looking into this and will supply info regarding this issue asap.