problem mit google api bei aufruf aus template - baseportal Forum - Web-Anwendungen einfach, schnell, leistungsfähig!
baseportal
English - Deutsch "Es gibt keine dummen Fragen - jeder hat einmal angefangen"

 baseportal-ForumDie aktuellsten 10, 30, 50, 100 Einträge anzeigen.  

 
 Ausgewählter Eintrag: Zur Liste 
    Beitrag von markus (990 Beiträge) am Montag, 19.März.2012, 09:31.
    problem mit google api bei aufruf aus template

      hallo,

      ich teste gerade mit dem api von google rum und hänge an einem nicht nachvollziehbaren problem.

      wenn ich nachfolgendes html in ein template packe und aufrufe, wird nix
      von google geladen.
      mach ich das ganze in eine normale html datei, ist es einwandfrei?!

      woran kann das denn liegen?

      markus




      #######################################
      

      <!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> </head><body>

      <!-- You can see the sample spreadsheet here:
      https://spreadsheets.google.com/pub?key=0AneCM3YnuzpAcG5FczJCXzM3Uy1ER0dGSTZrZFFaUFE&output=html
      -->
      

      <div style="width:575px; font-family:Arial,
      sans-serif; font-size:11px; border:1px solid black">
        <table id="cm_mapTABLE"> <tbody> <tr id="cm_mapTR">
      
          <td> <div id="cm_map" style="width:450px; height:450px"></div> </td>   </tr> </tbody></table>
      </div>

      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
      

      <script type="text/javascript">
      //<![CDATA[
      var cm_map;
      var cm_openInfowindow;
      var cm_mapMarkers = [];
      var cm_mapHTMLS = [];

      // Change these parameters to customize map
      var param_wsId = "od6";
      var param_ssKey = "o16162288751915453340.4402783830945175750";
      var param_useSidebar = true;
      var param_titleColumn = "title";
      var param_descriptionColumn = "description";
      var param_latColumn = "latitude";
      var param_lngColumn = "longitude";
      var param_rankColumn = "rank";
      var param_iconType = "green";
      var param_iconOverType = "orange";

      /**
       * Loads map and calls function to load in worksheet data.
       */
      function cm_load() {  
        var myLatlng = new google.maps.LatLng(43.907787,-79.359741);
        var myOptions = {
          zoom: 2,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        cm_map = new google.maps.Map(document.getElementById("cm_map"), myOptions);
      

        cm_getJSON();
      }
      

      /**
       * Function called when marker on the map is clicked.
       * Opens an info window (bubble) above the marker.
       * @param {Number} markerNum Number of marker in global array
       */
      function cm_markerClicked(markerNum) {
        var infowindowOptions = {
          content: cm_mapHTMLS[markerNum]
        }
        var infowindow = new google.maps.InfoWindow(infowindowOptions);
        infowindow.open(cm_map, cm_mapMarkers[markerNum]);
        cm_setInfowindow(infowindow);
      }
      

      /**
       * Function that sorts 2 worksheet rows from JSON feed
       * based on their rank column. Only called if column is defined.
       * @param {rowA} Object Represents row in JSON feed
       * @param {rowB} Object Represents row in JSON feed
       * @return {Number} Difference between row values
       */
      function cm_sortRows(rowA, rowB) {
        var rowAValue = parseFloat(rowA["gsx$" + param_rankColumn].$t);
        var rowBValue = parseFloat(rowB["gsx$" + param_rankColumn].$t);
      
        return rowAValue - rowBValue;
      }

      /**
       * Called when JSON is loaded. Creates sidebar if param_sideBar is true.
       * Sorts rows if param_rankColumn is valid column. Iterates through worksheet rows, 
       * creating marker and sidebar entries for each row.
       * @param {JSON} json Worksheet feed
       */       
      function cm_loadMapJSON(json) {
        var usingRank = false;
      
        if(param_useSidebar == true) {
          var sidebarTD = document.createElement("td");
          sidebarTD.setAttribute("width","150");
          sidebarTD.setAttribute("valign","top");
          var sidebarDIV = document.createElement("div");
          sidebarDIV.id = "cm_sidebarDIV";
          sidebarDIV.style.overflow = "auto";
          sidebarDIV.style.height = "450px";
          sidebarDIV.style.fontSize = "11px";
          sidebarDIV.style.color = "#000000";
          sidebarTD.appendChild(sidebarDIV);
          document.getElementById("cm_mapTR").appendChild(sidebarTD);
        }
      

        var bounds = new google.maps.LatLngBounds();

        if(json.feed.entry[0]["gsx$" + param_rankColumn]) {
          usingRank = true;
          json.feed.entry.sort(cm_sortRows);
        }
      
        for (var i = 0; i < json.feed.entry.length; i++) {
          var entry = json.feed.entry[i];
          if(entry["gsx$" + param_latColumn]) {
            var lat = parseFloat(entry["gsx$" + param_latColumn].$t);
            var lng = parseFloat(entry["gsx$" + param_lngColumn].$t);
            var point = new google.maps.LatLng(lat,lng);
            var html = "<div style='font-size:12px'>";
            html += "<strong>" + entry["gsx$"+param_titleColumn].$t 
                    + "</strong>";
            var label = entry["gsx$"+param_titleColumn].$t;
            var rank = 0;
            if(usingRank && entry["gsx$" + param_rankColumn]) {
              rank = parseInt(entry["gsx$"+param_rankColumn].$t);
            }
            if(entry["gsx$" + param_descriptionColumn]) {
              html += "<br/>" + entry["gsx$"+param_descriptionColumn].$t;
            }
            html += "</div>";
      

            // create the marker
            var marker = cm_createMarker(cm_map,point,label,html,rank);
            // cm_map.addOverlay(marker);
            cm_mapMarkers.push(marker);
            cm_mapHTMLS.push(html);
            bounds.extend(point);
          
            if(param_useSidebar == true) {
              var markerA = document.createElement("a");
              markerA.setAttribute("href","javascript:cm_markerClicked('" + i +"')");
              markerA.style.color = "#000000";
              var sidebarText= "";
              if(usingRank) {
                sidebarText += rank + ") ";
              } 
              sidebarText += label;
              markerA.appendChild(document.createTextNode(sidebarText));
              sidebarDIV.appendChild(markerA);
              sidebarDIV.appendChild(document.createElement("br"));
              sidebarDIV.appendChild(document.createElement("br"));
            } 
          }
        }
      

        cm_map.fitBounds(bounds);
        cm_map.setCenter(bounds.getCenter());
      }
      

      function cm_setInfowindow(newInfowindow) {
        if (cm_openInfowindow != undefined) {
          cm_openInfowindow.close();
        }
      

        cm_openInfowindow = newInfowindow;
      }
      

      /**
       * Creates marker with ranked Icon or blank icon,
       * depending if rank is defined. Assigns onclick function.
       * @param {GLatLng} point Point to create marker at
       * @param {String} title Tooltip title to display for marker
       * @param {String} html HTML to display in InfoWindow
       * @param {Number} rank Number rank of marker, used in creating icon
       * @return {GMarker} Marker created
       */
      function cm_createMarker(map, latlng, title, html, rank) {
        var iconSize = new google.maps.Size(20, 34);
        var iconShadowSize = new google.maps.Size(37, 34);
        var iconHotSpotOffset = new google.maps.Point(9, 0); // Should this be (9, 34)?
        var iconPosition = new google.maps.Point(0, 0);
        var infoWindowAnchor = new google.maps.Point(9, 2);
        var infoShadowAnchor = new google.maps.Point(18, 25);
      

        var iconShadowUrl = "http://www.google.com/mapfiles/shadow50.png";
        var iconImageUrl;
        var iconImageOverUrl;
        var iconImageOutUrl;
      
        if(rank > 0 && rank < 100) {
          iconImageOutUrl = "http://gmaps-samples.googlecode.com/svn/trunk/" +
              "markers/" + param_iconType + "/marker" + rank + ".png";
          iconImageOverUrl = "http://gmaps-samples.googlecode.com/svn/trunk/" +
              "markers/" + param_iconOverType + "/marker" + rank + ".png";
          iconImageUrl = iconImageOutUrl;
        } else { 
          iconImageOutUrl = "http://gmaps-samples.googlecode.com/svn/trunk/" +
              "markers/" + param_iconType + "/blank.png";
          iconImageOverUrl = "http://gmaps-samples.googlecode.com/svn/trunk/" +
              "markers/" + param_iconOverType + "/blank.png";
          iconImageUrl = iconImageOutUrl;
        }
      

        var markerShadow =
            new google.maps.MarkerImage(iconShadowUrl, iconShadowSize,
                                        iconPosition, iconHotSpotOffset);
      

        var markerImage =
            new google.maps.MarkerImage(iconImageUrl, iconSize,
                                        iconPosition, iconHotSpotOffset);
      

        var markerImageOver =
            new google.maps.MarkerImage(iconImageOverUrl, iconSize,
                                        iconPosition, iconHotSpotOffset);
      

        var markerImageOut =
            new google.maps.MarkerImage(iconImageOutUrl, iconSize,
                                        iconPosition, iconHotSpotOffset);
      

        var markerOptions = {
          title: title,
          icon: markerImage,
          shadow: markerShadow,
          position: latlng,
          map: map
        }
      

        var marker = new google.maps.Marker(markerOptions);

        google.maps.event.addListener(marker, "click", function() {
          var infowindowOptions = {
            content: html
          }
          var infowindow = new google.maps.InfoWindow(infowindowOptions);
          cm_setInfowindow(infowindow);
          infowindow.open(map, marker);
          marker.setIcon(markerImageOut);
        });
        google.maps.event.addListener(marker, "mouseover", function() {
          marker.setIcon(markerImageOver);
        });
        google.maps.event.addListener(marker, "mouseout", function() {
          marker.setIcon(markerImageOut);
        });
      
        return marker;
      }

      /**
       * Creates a script tag in the page that loads in the 
       * JSON feed for the specified key/ID. 
       * Once loaded, it calls cm_loadMapJSON.
       */
      function cm_getJSON() {
      

        // Retrieve the JSON feed.
        var script = document.createElement('script');
      

        script.setAttribute('src', 'http://spreadsheets.google.com/feeds/list'
                               + '/' + param_ssKey + '/' + param_wsId + '/public/values' +
                              '?alt=json-in-script&callback=cm_loadMapJSON');
        script.setAttribute('id', 'jsonScript');
        script.setAttribute('type', 'text/javascript');
        document.documentElement.firstChild.appendChild(script);
      }
      

      setTimeout('cm_load()', 500);

      //]]>

      </script>
      </body> </html>
      


    Antworten

 Alle Einträge zum Thema: Zur Liste 
    Beitrag von markus (990 Beiträge) am Montag, 19.März.2012, 09:31.
    problem mit google api bei aufruf aus template

      hallo,

      ich teste gerade mit dem api von google rum und hänge an einem nicht nachvollziehbaren problem.

      wenn ich nachfolgendes html in ein template packe und aufrufe, wird nix
      von google geladen.
      mach ich das ganze in eine normale html datei, ist es einwandfrei?!

      woran kann das denn liegen?

      markus




      #######################################
      

      <!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> </head><body>

      <!-- You can see the sample spreadsheet here:
      https://spreadsheets.google.com/pub?key=0AneCM3YnuzpAcG5FczJCXzM3Uy1ER0dGSTZrZFFaUFE&output=html
      -->
      

      <div style="width:575px; font-family:Arial,
      sans-serif; font-size:11px; border:1px solid black">
        <table id="cm_mapTABLE"> <tbody> <tr id="cm_mapTR">
      
          <td> <div id="cm_map" style="width:450px; height:450px"></div> </td>   </tr> </tbody></table>
      </div>

      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
      

      <script type="text/javascript">
      //<![CDATA[
      var cm_map;
      var cm_openInfowindow;
      var cm_mapMarkers = [];
      var cm_mapHTMLS = [];

      // Change these parameters to customize map
      var param_wsId = "od6";
      var param_ssKey = "o16162288751915453340.4402783830945175750";
      var param_useSidebar = true;
      var param_titleColumn = "title";
      var param_descriptionColumn = "description";
      var param_latColumn = "latitude";
      var param_lngColumn = "longitude";
      var param_rankColumn = "rank";
      var param_iconType = "green";
      var param_iconOverType = "orange";

      /**
       * Loads map and calls function to load in worksheet data.
       */
      function cm_load() {  
        var myLatlng = new google.maps.LatLng(43.907787,-79.359741);
        var myOptions = {
          zoom: 2,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        cm_map = new google.maps.Map(document.getElementById("cm_map"), myOptions);
      

        cm_getJSON();
      }
      

      /**
       * Function called when marker on the map is clicked.
       * Opens an info window (bubble) above the marker.
       * @param {Number} markerNum Number of marker in global array
       */
      function cm_markerClicked(markerNum) {
        var infowindowOptions = {
          content: cm_mapHTMLS[markerNum]
        }
        var infowindow = new google.maps.InfoWindow(infowindowOptions);
        infowindow.open(cm_map, cm_mapMarkers[markerNum]);
        cm_setInfowindow(infowindow);
      }
      

      /**
       * Function that sorts 2 worksheet rows from JSON feed
       * based on their rank column. Only called if column is defined.
       * @param {rowA} Object Represents row in JSON feed
       * @param {rowB} Object Represents row in JSON feed
       * @return {Number} Difference between row values
       */
      function cm_sortRows(rowA, rowB) {
        var rowAValue = parseFloat(rowA["gsx$" + param_rankColumn].$t);
        var rowBValue = parseFloat(rowB["gsx$" + param_rankColumn].$t);
      
        return rowAValue - rowBValue;
      }

      /**
       * Called when JSON is loaded. Creates sidebar if param_sideBar is true.
       * Sorts rows if param_rankColumn is valid column. Iterates through worksheet rows, 
       * creating marker and sidebar entries for each row.
       * @param {JSON} json Worksheet feed
       */       
      function cm_loadMapJSON(json) {
        var usingRank = false;
      
        if(param_useSidebar == true) {
          var sidebarTD = document.createElement("td");
          sidebarTD.setAttribute("width","150");
          sidebarTD.setAttribute("valign","top");
          var sidebarDIV = document.createElement("div");
          sidebarDIV.id = "cm_sidebarDIV";
          sidebarDIV.style.overflow = "auto";
          sidebarDIV.style.height = "450px";
          sidebarDIV.style.fontSize = "11px";
          sidebarDIV.style.color = "#000000";
          sidebarTD.appendChild(sidebarDIV);
          document.getElementById("cm_mapTR").appendChild(sidebarTD);
        }
      

        var bounds = new google.maps.LatLngBounds();

        if(json.feed.entry[0]["gsx$" + param_rankColumn]) {
          usingRank = true;
          json.feed.entry.sort(cm_sortRows);
        }
      
        for (var i = 0; i < json.feed.entry.length; i++) {
          var entry = json.feed.entry[i];
          if(entry["gsx$" + param_latColumn]) {
            var lat = parseFloat(entry["gsx$" + param_latColumn].$t);
            var lng = parseFloat(entry["gsx$" + param_lngColumn].$t);
            var point = new google.maps.LatLng(lat,lng);
            var html = "<div style='font-size:12px'>";
            html += "<strong>" + entry["gsx$"+param_titleColumn].$t 
                    + "</strong>";
            var label = entry["gsx$"+param_titleColumn].$t;
            var rank = 0;
            if(usingRank && entry["gsx$" + param_rankColumn]) {
              rank = parseInt(entry["gsx$"+param_rankColumn].$t);
            }
            if(entry["gsx$" + param_descriptionColumn]) {
              html += "<br/>" + entry["gsx$"+param_descriptionColumn].$t;
            }
            html += "</div>";
      

            // create the marker
            var marker = cm_createMarker(cm_map,point,label,html,rank);
            // cm_map.addOverlay(marker);
            cm_mapMarkers.push(marker);
            cm_mapHTMLS.push(html);
            bounds.extend(point);
          
            if(param_useSidebar == true) {
              var markerA = document.createElement("a");
              markerA.setAttribute("href","javascript:cm_markerClicked('" + i +"')");
              markerA.style.color = "#000000";
              var sidebarText= "";
              if(usingRank) {
                sidebarText += rank + ") ";
              } 
              sidebarText += label;
              markerA.appendChild(document.createTextNode(sidebarText));
              sidebarDIV.appendChild(markerA);
              sidebarDIV.appendChild(document.createElement("br"));
              sidebarDIV.appendChild(document.createElement("br"));
            } 
          }
        }
      

        cm_map.fitBounds(bounds);
        cm_map.setCenter(bounds.getCenter());
      }
      

      function cm_setInfowindow(newInfowindow) {
        if (cm_openInfowindow != undefined) {
          cm_openInfowindow.close();
        }
      

        cm_openInfowindow = newInfowindow;
      }
      

      /**
       * Creates marker with ranked Icon or blank icon,
       * depending if rank is defined. Assigns onclick function.
       * @param {GLatLng} point Point to create marker at
       * @param {String} title Tooltip title to display for marker
       * @param {String} html HTML to display in InfoWindow
       * @param {Number} rank Number rank of marker, used in creating icon
       * @return {GMarker} Marker created
       */
      function cm_createMarker(map, latlng, title, html, rank) {
        var iconSize = new google.maps.Size(20, 34);
        var iconShadowSize = new google.maps.Size(37, 34);
        var iconHotSpotOffset = new google.maps.Point(9, 0); // Should this be (9, 34)?
        var iconPosition = new google.maps.Point(0, 0);
        var infoWindowAnchor = new google.maps.Point(9, 2);
        var infoShadowAnchor = new google.maps.Point(18, 25);
      

        var iconShadowUrl = "http://www.google.com/mapfiles/shadow50.png";
        var iconImageUrl;
        var iconImageOverUrl;
        var iconImageOutUrl;
      
        if(rank > 0 && rank < 100) {
          iconImageOutUrl = "http://gmaps-samples.googlecode.com/svn/trunk/" +
              "markers/" + param_iconType + "/marker" + rank + ".png";
          iconImageOverUrl = "http://gmaps-samples.googlecode.com/svn/trunk/" +
              "markers/" + param_iconOverType + "/marker" + rank + ".png";
          iconImageUrl = iconImageOutUrl;
        } else { 
          iconImageOutUrl = "http://gmaps-samples.googlecode.com/svn/trunk/" +
              "markers/" + param_iconType + "/blank.png";
          iconImageOverUrl = "http://gmaps-samples.googlecode.com/svn/trunk/" +
              "markers/" + param_iconOverType + "/blank.png";
          iconImageUrl = iconImageOutUrl;
        }
      

        var markerShadow =
            new google.maps.MarkerImage(iconShadowUrl, iconShadowSize,
                                        iconPosition, iconHotSpotOffset);
      

        var markerImage =
            new google.maps.MarkerImage(iconImageUrl, iconSize,
                                        iconPosition, iconHotSpotOffset);
      

        var markerImageOver =
            new google.maps.MarkerImage(iconImageOverUrl, iconSize,
                                        iconPosition, iconHotSpotOffset);
      

        var markerImageOut =
            new google.maps.MarkerImage(iconImageOutUrl, iconSize,
                                        iconPosition, iconHotSpotOffset);
      

        var markerOptions = {
          title: title,
          icon: markerImage,
          shadow: markerShadow,
          position: latlng,
          map: map
        }
      

        var marker = new google.maps.Marker(markerOptions);

        google.maps.event.addListener(marker, "click", function() {
          var infowindowOptions = {
            content: html
          }
          var infowindow = new google.maps.InfoWindow(infowindowOptions);
          cm_setInfowindow(infowindow);
          infowindow.open(map, marker);
          marker.setIcon(markerImageOut);
        });
        google.maps.event.addListener(marker, "mouseover", function() {
          marker.setIcon(markerImageOver);
        });
        google.maps.event.addListener(marker, "mouseout", function() {
          marker.setIcon(markerImageOut);
        });
      
        return marker;
      }

      /**
       * Creates a script tag in the page that loads in the 
       * JSON feed for the specified key/ID. 
       * Once loaded, it calls cm_loadMapJSON.
       */
      function cm_getJSON() {
      

        // Retrieve the JSON feed.
        var script = document.createElement('script');
      

        script.setAttribute('src', 'http://spreadsheets.google.com/feeds/list'
                               + '/' + param_ssKey + '/' + param_wsId + '/public/values' +
                              '?alt=json-in-script&callback=cm_loadMapJSON');
        script.setAttribute('id', 'jsonScript');
        script.setAttribute('type', 'text/javascript');
        document.documentElement.firstChild.appendChild(script);
      }
      

      setTimeout('cm_load()', 500);

      //]]>

      </script>
      </body> </html>
      

     Antworten

    Beitrag von markus (990 Beiträge) am Dienstag, 20.März.2012, 16:46.
    Re: problem mit google api bei aufruf aus template

      egal, habe eine andere lauffähige lösung gefunden.

     Antworten


     
 Liste der Einträge von 4050 bis 4200:Einklappen Zur Eingabe 
Neueste Einträge << 10 | 9 | 8 | 7 | 6 | 5 | 4 | 3 | 2 | Neuere Einträge < Zur Eingabe  > Ältere Einträge | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 >> Älteste Einträge


Zurück zur Homepage

© baseportal.de. Alle Rechte vorbehalten. Nutzungsbedingungen



powered in 0.09s by baseportal.de
Erstellen Sie Ihre eigene Web-Datenbank - kostenlos!