Geo-referencing panoramas with Google Maps - Revision history

WikiSysop: /* The simple way */ source coloring

2007-11-04T16:10:06Z

‎The simple way: source coloring

Erik Krause: Geo-referencing panoramas with Google Map moved to Geo-referencing panoramas with Google Maps: typo

2007-10-07T22:08:43Z

Geo-referencing panoramas with Google Map moved to Geo-referencing panoramas with Google Maps: typo

Thire: /* A working example */ examples does NOT work

2007-10-06T07:52:42Z

‎A working example: examples does NOT work

Erik Krause: 1 revision(s)

2007-03-21T18:09:02Z

1 revision(s)

Robert Breuer: /* A working example */

2007-03-21T18:07:00Z

‎A working example

Robert Breuer: /* A working example */

2006-09-04T10:41:06Z

‎A working example

WikiSysop: 15 revision(s)

2006-07-13T20:28:00Z

15 revision(s)

WikiSysop: 1 revision(s)

2006-07-13T19:56:39Z

1 revision(s)

Zbooy: typo

2006-06-06T18:14:13Z

typo

Zbooy: typo

2006-06-06T18:14:13Z

typo

New page

== Introduction ==

Google Maps provides simple and powerful ways to show people where your panorama was taken. But you have to decide which one to use -- the simple way is not powerful, and the powerful way is not simple. We will describe them separately.

== The simple way ==

In any web page, you can easily create a link that the user can click, to bring up a separate Google Map page with your panorama location marked on it.

This simple way has limits. Most important: 1) the map page is separate, not part of your own page, 2) you can only mark one panorama, and 3) you cannot provide "click on the map to view the panorama" -- the map is for display only. But sometimes this is enough.

To use the simple method, all you need is to know the location of your pano, compose a title, then create a link patterned after this example: [http://maps.google.com/maps?f=q&hl=en&q=46.25417+N+119.286032+W+(Chamna+Natural+Preserve)&t=k&ll=46.25417,-119.286032&spn=0.009837,0.018239&t=k]

The link looks like this:

http://maps.google.com/maps?f=q&hl=en&q=46.25417+N+119.286032+W
+(Chamna+Natural+Preserve)&t=k&ll=46.25417,-119.286032&
spn=0.009837,0.018239&t=k

In this example, the location of the panorama is 46.25417 degrees North latitude and 119.286032 degrees West longitude. Notice that these numbers appear twice in the link: once in the "q=" clause and again in the "ll=" clause. The "t=k" parameter tells Google to show satellite imagery. The numbers after "spn=" are the width and height of the map, in degrees longitude and latitude. More about those in a moment.

The degrees latitude and longitude of your pano are easy to find, if you do not already know them. Just use your browser to bring up a Google Map that shows the general area where the pano was shot. Zoom in or out and pan around until you can see the location. Then double-click on the location of the pano. This will make Google center the map. When your pano is centered, click on Google's "Link to this page" link. That will cause the location and size to appear in your browser's address bar, in a format like what is shown above for "ll=" and "spn=". All you have to do then is fill in the "q=" clause.

The "spn=" parameters that specify width and height can also be computed, if you don't mind some math. The trick is to specify spn=spnLat,0.00001 where spnLat is computed using code like this:

deg2rad = pi/180;
rad2deg = 180./pi;

double latCenter = 46.230114; // latitude of the center of the map
double sbase = 0.000020853; // fit to one particular dataset
for (i=0; i<20; i++) { // compute spnLat for each of 20 zoom levels
yCenter = ln(tan(pi/4+(latCenter*deg2rad)/2));
yTop = yCenter + sbase*pow(2,i);
yBot = yCenter - sbase*pow(2,i);
latTop = rad2deg*(2*atan(exp(yTop))-pi/2);
latBot = rad2deg*(2*atan(exp(yBot))-pi/2);
spnLat = latTop - latBot;
System.out.println("i = "+i+", spnLat = "+spnLat);
}

See the email archives at [http://groups.yahoo.com/group/PanoTools/message/24586], [http://groups.yahoo.com/group/PanoTools/message/24642], and [http://groups.yahoo.com/group/PanoTools/message/24656] for discussion of why this works.

== The powerful way ==

Google also provides a powerful Google Maps API that lets you embed the map in your page and display multiple markers with arbitrary labels that can contain links. This method is more complicated to use because you have to write JavaScript to embed in your web pages.

=== What you need ===

You need to obtain a valid Google key for the URL of your map. You can obtain a key at http://www.google.com/apis/maps/ . NOTE: You need a Google account. If you don't have one, it will take several minutes to apply for one. No big deal, just a little time consuming.
If you need to find out lat/lon values for your panorama location, you may want to install [http://earth.google.com/ Google Earth]:
Set a placemark and read out the values...

=== Some caveats ===

Google Map is still (Oct. 2005) considered beta by Google. There are some known issues when integrating the applet in your webpage. The most important ones:
* Don't embed the Javascript code somewhere in between <nowiki><DIV></nowiki>-Tags. This will break functionality with Internet Explorer.
* If you display images in the balloon box, use <WIDTH> and <HEIGHT> for the image. Otherwise balloon size will be not correct if you click a placemark for the first time (Internet Explorer only)

=== The code to insert ===

The basic idea behind this code is: Use a static HTML page and load all data from a simple XML-file.

* Don't forget to place your valid Google-key in the <nowiki><HEAD></nowiki>-Area of your HTML-page! e.g.:

<nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ADD_YOUR_KEY_HERE" type="text/javascript">
</script>
</head></nowiki>

* Place the formatted map somewhere on your page, e.g.:

<<nowiki>div id="map" style="width: 800px; height: 600px"></nowiki>
<nowiki></div></nowiki>

* Now you can cut and paste the following code to your HTML:
<nowiki>
<script type="text/javascript">
//<![CDATA[
// This will initialize your map
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setMapType( _HYBRID_TYPE );
// Insert your initial map center and zoom below
// Format is: (new GPoint(lng, lat), zoom)
map.centerAndZoom(new GPoint(11.120984, 49.050060), 12);
// array to hold copies of the markers
var gmarkers = [];
// Download the data in from .xml and load it on the map.
var request = GXmlHttp.create();
request.open("GET", "panoramas.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new GPoint(parseFloat(markers[i].getAttribute("lng")),
parseFloat(markers[i].getAttribute("lat")));
var title = markers[i].getAttribute("title");
var desc = markers[i].getAttribute("desc");
var ref = markers[i].getAttribute("ref");
var img = markers[i].getAttribute("img");
// create the marker
var html = "<font size='2'><b>"+title+"</b><br>"+desc+"<br><a href='"+ref+"' target='_blank'><img src='"+img+"' width='200' height='120'></img></a><br>Click image to open link</font>";
var marker = new GMarker(point);
marker.p_html = html;
marker.p_name = title;
map.addOverlay(marker);
gmarkers.push(marker);
}
}
}
request.send(null);
// Maybe we have a lot of markers, so we use a single listener which will
// forward to the respective info window
GEvent.addListener(map, "click", function(overlay, point) {
overlay.openInfoWindowHtml(overlay.p_html);
});
//]]>
</script>
</nowiki>

* Create your XML-file (it is called "panoramas.xml" in our example).
The format is:

<nowiki><markers>
<marker lng="123.456" lat="123.456" title="The title of the Panorama" desc="Some further text" ref="http://url_to_your_panorama_page.html" img="http://url_to_your_thumbnail.jpg"/></nowiki>
...(further lines like the above example)...
<nowiki></markers></nowiki>

To have thumbnails displayed correctly, you must either use my standard size of 200x120pix or adapt the size-tags in the javascript.

''Please note:''
This is basic code only. No error handling, no fuzzy features.
Please feel free to add functionality and update this tutorial!

=== A working example ===

http://dativ.at/fotos/panoramas/google-map.html<br><br>
Documentation and API Discussion board:<br><br>
http://www.google.com/apis/maps/documentation/<br>
http://groups.google.com/group/Google-Maps-API

--[[User:Bvogl|Bvogl]] 23:05, 21 Oct 2005 (EDT)

[[Category:Tutorial]][[Category:Tutorial:Specialised]]

← Older revision		Revision as of 18:07, 21 March 2007
Line 146:		Line 146:
	--[[User:Bvogl\|Bvogl]] 23:05, 21 Oct 2005 (EDT)		--[[User:Bvogl\|Bvogl]] 23:05, 21 Oct 2005 (EDT)

−	~~[[Category:Tutorial]]~~[[Category:Tutorial:Specialised]]	+	[[Category:Tutorial:Specialised]]

@@ Line 22: / Line 22: @@
 The "spn=" parameters that specify width and height can also be computed, if you don't mind some math.  The trick is to specify spn=spnLat,0.00001 where spnLat is computed using code like this:
-   deg2rad = pi/180;
+double latCenter = 46.230114; // latitude of the center of the map
-   rad2deg = 180./pi;
+double sbase = 0.000020853; // fit to one particular dataset
 for (i=0; i<20; i++) { // compute spnLat for each of 20 zoom levels
-   double latCenter = 46.230114; // latitude of the center of the map
+  yCenter = ln(tan(pi/4+(latCenter*deg2rad)/2));
-   double sbase = 0.000020853; // fit to one particular dataset
+  yTop = yCenter + sbase*pow(2,i);
-   for (i=0; i<20; i++) { // compute spnLat for each of 20 zoom levels
+  yBot = yCenter - sbase*pow(2,i);
-     yCenter = ln(tan(pi/4+(latCenter*deg2rad)/2));
+  latTop = rad2deg*(2*atan(exp(yTop))-pi/2);
-     yTop = yCenter + sbase*pow(2,i);
+  latBot = rad2deg*(2*atan(exp(yBot))-pi/2);
-     yBot = yCenter - sbase*pow(2,i);
+  spnLat = latTop - latBot;
-     latTop = rad2deg*(2*atan(exp(yTop))-pi/2);
+  System.out.println("i = "+i+", spnLat = "+spnLat);
-     latBot = rad2deg*(2*atan(exp(yBot))-pi/2);
-     spnLat = latTop - latBot;
+</source>
-     System.out.println("i = "+i+", spnLat = "+spnLat);
+See the email archives at [http://groups.yahoo.com/group/PanoTools/message/24586], [http://groups.yahoo.com/group/PanoTools/message/24642], and [http://groups.yahoo.com/group/PanoTools/message/24656] for discussion of why this works.
-−
-−
 See the email archives at [http://groups.yahoo.com/group/PanoTools/message/24586], [http://groups.yahoo.com/group/PanoTools/message/24642], and [http://groups.yahoo.com/group/PanoTools/message/24656] for discussion of why this works.
 == The powerful way ==

@@ Line 139: / Line 139: @@
 === A working example ===
-http://dativ.at/fotos/panoramas/google-map.html<br>
+* http://dativ.at/fotos/panoramas/google-map.html (does not work with Firefox on Oct 6, 2007)<br>
-http://www.pixel-link.de<br><br>
+http://www.pixel-link.de<br>
-Documentation and API Discussion board:<br><br>
+Documentation and API Discussion board:<br>
 http://www.google.com/apis/maps/documentation/<br>
 http://groups.google.com/group/Google-Maps-API

← Older revision	Revision as of 20:28, 13 July 2006
(One intermediate revision by one user not shown)

@@ Line 54: / Line 54: @@
 Google Map is still (Oct. 2005) considered beta by Google. There are some known issues when integrating the applet in your webpage. The most important ones:
 * Don't embed the Javascript code somewhere in between <nowiki><DIV></nowiki>-Tags. This will break functionality with Internet Explorer.
-* If you display images in the balloon box, use <WIDTH> and <HEIGHT> for the image. Otherwise balloon size will be not correct if you click a placemark for the first time (Internet Exporer only)
+* If you display images in the balloon box, use <WIDTH> and <HEIGHT> for the image. Otherwise balloon size will be not correct if you click a placemark for the first time (Internet Explorer only)
 === The code to insert ===