Difference between revisions of "Geo-referencing panoramas with Google Maps"

From PanoTools.org Wiki
Jump to navigation Jump to search
m (Added newly posted links by Mr. Vogl)
m (Oops - Line break needed)
Line 96: Line 96:
 
http://dativ.at/fotos/panoramas/google-map.html<br><br>
 
http://dativ.at/fotos/panoramas/google-map.html<br><br>
 
Documentation and API Discussion board:<br><br>
 
Documentation and API Discussion board:<br><br>
−
http://www.google.com/apis/maps/documentation/
+
http://www.google.com/apis/maps/documentation/<br>
 
http://groups.google.com/group/Google-Maps-API
 
http://groups.google.com/group/Google-Maps-API
  

Revision as of 22:12, 23 October 2005

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/ . If you need to find out lat/lon values for your panorama location, you may want to install 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 java code somewhere in between <DIV>-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)

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 <HEAD>-Area of your HTML-page! e.g.:
 <!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>
  • Place the formatted map somewhere on your page, e.g.:
     <div id="map" style="width: 800px; height: 600px">
     </div>


  • Now you can cut and paste the following code to your HTML:
 
  <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>
  • Create your XML-file (it is called "panoramas.xml" in our example).

The format is: 

   <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"/>

...(further lines like the above example)... 

   </markers>

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

Documentation and API Discussion board:

http://www.google.com/apis/maps/documentation/
http://groups.google.com/group/Google-Maps-API



--Bvogl 23:05, 21 Oct 2005 (EDT)

Retrieved from "https://wiki.panotools.org/index.php?title=Geo-referencing_panoramas_with_Google_Maps&oldid=4807"