Author Topic: open cycle map in googlemaps integrieren  (Read 14994 times)

0 Members and 1 Guest are viewing this topic.

Offline kubiczek

  • Full Member
  • ***
  • Posts: 211
    • View Profile
    • Gross Peterwitz
Re: open cycle map in googlemaps integrieren
« Reply #15 on: January 22, 2010, 01:46:57 PM »
Hallo ich habe aus dem Quelltext den Scriptteil    jetzt in meine gm-gp.js eingebaut,

die "More" Schaltfläche  ist jetzt sichtbar, aber ohne funktion.

sehe http://grosspeterwitz.org/gp/index.php?template=google-photo-map-gp&l=deutsch

das ist meine gm-gp.js

r
Code: [Select]
//<![CDATA[

var tinyIcon = new GIcon();
tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_blue.png";
tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
tinyIcon.iconSize = new GSize(12, 20);
tinyIcon.shadowSize = new GSize(22, 20);
tinyIcon.iconAnchor = new GPoint(6, 20);
tinyIcon.infoWindowAnchor = new GPoint(5, 1);

// Set up our GMarkerOptions object literal
markerOptions = { icon:tinyIcon };

    function load() {
      
if (GBrowserIsCompatible()) {

    // ==== The "More..." control simply accepts a mouseover to reveal the "Layer" control ===

      function MoreControl() {}
      MoreControl.prototype = new GControl();

      MoreControl.prototype.initialize = function(map) {
        var container = document.createElement("div");
        container.style.border = "2px solid black";
        container.style.fontSize = "12px";
        container.style.fontFamily = "Arial, sans-serif";
        container.style.width="80px";
        container.style.backgroundColor = "#ffffff";
        container.style.textAlign = "center";
        container.innerHTML = "More...";
      
        map.getContainer().appendChild(container);
        
        GEvent.addDomListener(container, "mouseover", function() {
          map.addControl(layerControl);
        });
        
        
        return container;
      }
      
      MoreControl.prototype.getDefaultPosition = function() {
        return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(210, 7));
      }


      
      // ==== The "Layer" control displays the "More..." plus the checkboxes ====
      // ==== The checkbox info is passed in the "opts" parameter ====

      function LayerControl(opts) {
        this.opts = opts;
      }
      LayerControl.prototype = new GControl();

      LayerControl.prototype.initialize = function(map) {
        var container = document.createElement("div");
        
        container.style.border = "2px solid black";
        container.style.fontSize = "12px";
        container.style.fontFamily = "Arial, sans-serif";
        container.style.width="80px";
        container.style.backgroundColor = "#ffffff";
        container.innerHTML = '<center><b>More...<\/b><\/center>';
        for (var i=0; i<this.opts.length; i++) {
          if (layers[i].Visible) {
            var c = 'checked';
          } else {
            var c = '';
          }
        
          container.innerHTML += '<input type="checkbox" onclick="toggleLayer('+i+')" ' +c+ ' /> '+this.opts[i]+'<br>';
        }
          
      
        map.getContainer().appendChild(container);
        
        // === This doesn't do what I want. It kills the control if I mouseover a checkbox ===
        // === If you know how to do this better, let me know ===

        //GEvent.addDomListener(container, "mouseout", function() {
        //  map.removeControl(layerControl);
        //});
        
        setTimeout("map.removeControl(layerControl)",5000);
        
        
        return container;
      }
      
      LayerControl.prototype.getDefaultPosition = function() {
        return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(210, 7));
      }



      // ==== toggleLayer adds and removes the layers ====
      function toggleLayer(i) {
        if (layers[i].Visible) {
          layers[i].hide();
        } else {
          if(layers[i].Added) {
            layers[i].show();
          } else {
            map.addOverlay(layers[i]);
            layers[i].Added = true;
          }
        }
        layers[i].Visible = !layers[i].Visible;
      }
      

      var map = new GMap2(document.getElementById("map"));

      map.setCenter(new GLatLng(50.08374726,18.08589935),15);
      map.addControl(new GMapTypeControl());
      map.addControl(new GLargeMapControl());


      // ==== Create the GLayer()s, and set them  Visible=false Added=false ====
      // If you want a GLayer open by default, addOverlay() it and set it  Visible=true Added=true

      var layers = [];      
          layers[0] = new GLayer("org.wikipedia.en");
          layers[0].Visible = false;
          layers[0].Added = false;
          
          layers[1] = new GLayer("org.wikipedia.de");
          layers[1].Visible = false;
          layers[1].Added = false;
          
          layers[2] = new GLayer("com.panoramio.popular");
          layers[2].Visible = false;
          layers[2].Added = false;

          layers[3] = new GLayer("com.panoramio.all");
          map.addOverlay(layers[3]);  // This one open by default
          layers[3].Visible = true;
          layers[3].Added = true;
      
      // === Create the layerControl, but don't addControl() it ===
      // = Pass it an array of names for the checkboxes =
      var layerControl = new LayerControl(["Wiki", "Wike DE", "Popular", "Photos"]);

      // === Create the MoreControl(), and do addControl() it ===
      map.addControl(new MoreControl());




        GDownloadUrl("/gp/google-photo-map-gp.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var thumb = markers[i].getAttribute("thumb");
            var kml = markers[i].getAttribute("kml");
            var desc = markers[i].getAttribute("desc");
            var cat = markers[i].getAttribute("cat");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));            var marker = createTabbedMarker(point, name, address, type, thumb, kml, cat, desc);


map.addOverlay(marker);
          }
        });
      }
    }function createTabbedMarker(point, name, address, type, thumb, kml, cat, desc, html1,html2,label1,label2) {
var marker = new GMarker(point,tinyIcon);
      var label1 = "Das Bild";
      var html1 = "<div id='infoback_01'>" + "<table width='250' height='150' border='0' cellspacing='0' cellpadding='0' bgcolor='#EFEFEF'><tr>" + "<td valign='middle'>" + "<a href=" + type +"#Google_Maps>" + "<img src=" + thumb + ">" + "</a>" + "</td>" + "<td>&nbsp;&nbsp;</td>" + "<td valign='middle'>"+ "<b> <font color='black'>" + name + "</b> <br>" + "<a href=" + kml +">" + "Google Earth" + "</a>" +"<br>" +  "<a href=" + cat +">" + "zur Kategorie" + "</a></td></tr></table></div>";
      var label2 = "Infos";
      var html2 = "<div id='infoback_02'>" + "<table width='250' height='150' border='0' cellspacing='0' cellpadding='0' bgcolor='#efefef'><tr>" + "<td valign='middle'>" +  desc + "</td></tr><tr>" + "<td valign='middle'>Koordinaten:" + point + "</td></tr></table></div>";

GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml([new GInfoWindowTab(label1,html1), new GInfoWindowTab(label2,html2)]);
});
return marker;
}

  // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/  
    // http://econym.org.uk/gmap/

    //]]>



Muss ich den anfang von MIKE seinen seinen Quelltext auch noch verbauen?

Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps</title>

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw" type="text/javascript"></script>
  </head>
  <body onunload="GUnload()">


    <div id="map" style="width: 550px; height: 450px;"></div>
        <a href="layercontrol.htm">Back to the tutorial page</a>
        
    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
      However, it seems JavaScript is either disabled or not supported by your browser.
      To view Google Maps, enable JavaScript by changing your browser options, and then
      try again.
    </noscript>