topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

professional-ria-03-GoogleMashup.htm / htm



  <!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>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <title>Google Maps JavaScript API Example</title>
      <!--
      The API-Key shown is for my URL, and all sub domains.
      var localhostAPIKey = "ABQIAAAA-j4r1Ft3AXUvtHpmQed5QBT1Od6h1-72Y7prpYCpJn9DFtoeIBRtm8wkEs7US-rldb6QtKa-S45Ezw";
      var abraxasAPIKey = "ABQIAAAA-j4r1Ft3AXUvtHpmQed5QBSWzNBOSyak8f9TRXsmYAgq6F2hIxQ4tcYhi1JBO8vJ0i_E7BsL5NIkfw";
      var myAPIKey = localhostAPIKey;
       -->
      <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-j4r1Ft3AXUvtHpmQed5QBT1Od6h1-72Y7prpYCpJn9DFtoeIBRtm8wkEs7US-rldb6QtKa-S45Ezw"
        type="text/javascript"></script>
      <script type="text/javascript">
  
      //<![CDATA[
  
  function load() {
          if (GBrowserIsCompatible()) {
          var map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(38.893813, -77.073733), 13);
        }
       // Create a base icon for all of our markers that specifies the
       // shadow, icon dimensions, etc.
          var baseIcon = new GIcon();
          baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
          baseIcon.iconSize = new GSize(50, 25);
          //baseIcon.shadowSize = new GSize(37, 34);
          baseIcon.iconAnchor = new GPoint(9, 34);
          baseIcon.infoWindowAnchor = new GPoint(9, 2);
          baseIcon.infoShadowAnchor = new GPoint(18, 25);
  
          // Creates a marker whose icon is an image and whose.
          
          function createMarker(point, index) {
  //          var geoQuery = "http://geocoder.us/demo.cgi?address=1300+N.17th+St.%2C+Arlington%2C+Va+22209";
            var tabOneContents = "../../images/1300N17TH.jpg";
            var tabTwoContents = "BBN<br/> Rosslyn VA<br/>Labs";
            
            var infoTabs = [
                    new GInfoWindowTab("Image", makeDOMImgSnippet(tabOneContents)),
                    new GInfoWindowTab("Description", tabTwoContents)
            ];
            
            var icon = new GIcon(baseIcon);
            var imageAddr = "../../images/bbn_logo.gif";
            icon.image =  imageAddr;
            var marker = new GMarker(point, icon);
          
            GEvent.addListener(marker, "click", 
                    function() {
                      marker.openInfoWindowTabsHtml(
                      infoTabs
                      );
                    }
            );
            return marker;
          } 
          
          function makeDOMImgSnippet(imageAddr){
                  return "<img src="+imageAddr+" \"width=125\" height=\"150\" />";
          }              
  
          var point = map.getCenter();
          map.addOverlay(createMarker(point, 0));
  
  }
  
      //]]>
      </script>
    </head>
    <body onload="load()" onunload="GUnload()">
      <div id="map" style="width: 500px; height: 600px"></div>
    </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.