google MapsAPIv3

Fragen zu JavaScript.
Fragen zu we:Tags bitte im Forum webEdition Templates erstellen (we:Tags) posten.
gelogelo
Member
Beiträge: 92
Registriert: Di 7. Dez 2010, 15:00
Wohnort: Hamburg

google MapsAPIv3

Beitragvon gelogelo » Mi 7. Mär 2012, 17:05

Hallo
nach einem Serverumzug gehen unsere Skripte mit Googlemaps nicht mehr.
Ich gkaube das liegt am API-Key.
Nun kann man aber keinen mehr erzeugen lassen, da Google die neue APIv3 verwendet.

Wir hatten ne map, die aus nem

Code: Alles auswählen

<we:block name="standortliste">   
   <we:object name="standorte" classid="2">
   ...
   </we:object>
 </we:block>
solchen Konstrukt alle marker erzeugte.

Ein ähnlich dynamisch mit einer Schleife durchlaufbares script für die neue Google-maps APIv3 habe ich nicht gefunden.
Das kam mir am nähesten
http://code.google.com/apis/maps/documentation/javascript/examples/icon-complex.html, hat aber den nachteil, daß ich das Gebilde

Code: Alles auswählen

var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

nicht aus dem <we_object> befüllt bekomme.
Hier der code des Beispielscriptes:

Code: Alles auswählen

<!DOCTYPE html>
<html DIR="LTR">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"  /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Beispiel eines Google Maps JavaScript APIs Version 3: Komplexe Symbole</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML &lt;area&gt; element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>

</html>


Hat jemand eine Lösung dafür?
Vielen Dank,
Gelo
Besten Dank,
Gelo

gelogelo
Member
Beiträge: 92
Registriert: Di 7. Dez 2010, 15:00
Wohnort: Hamburg

Re: google MapsAPIv3

Beitragvon gelogelo » Mi 7. Mär 2012, 17:59

Hier eine Ergänzung:

Dieses Konstrukt tut schon fast was ich will.

Nur der Content ist leider immer derselbe:

Code: Alles auswählen

<!DOCTYPE html>
<html DIR="LTR">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"  /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Beispiel eines Google Maps JavaScript APIs Version 3: Mehrere Bubbles</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
   // Koordinaten fuer das Zentrum der Map
   var latlang = new Array();
   var titles = new Array();
   var contents = new Array();
   contents[0] = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Uluru 0</h1>'+
        '<div id="bodyContent">'+
        '<p><b>Uluru 0</b>, also referred to as <b>Ayers Rock</b></p>'+
        '</div>';
   contents[1] = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Uluru 1</h1>'+
        '<div id="bodyContent">'+
        '<p><b>Uluru 1</b>, also referred to as <b>Ayers Rock</b></p>'+
        '</div>';
   contents[2] = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Uluru 2</h1>'+
        '<div id="bodyContent">'+
        '<p><b>Uluru 2</b>, also referred to as <b>Ayers Rock</b></p>'+
        '</div>';
   contents[3] = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Uluru 3</h1>'+
        '<div id="bodyContent">'+
        '<p><b>Uluru 3</b>, also referred to as <b>Ayers Rock</b></p>'+
        '</div>';
   titles[0] = 'Uluru (Ayers Rock)';
   titles[1] = 'Uluru1 (Ayers Rock)';
   titles[2] = 'Uluru2 (Ayers Rock)';
   titles[3] = 'Uluru3 (Ayers Rock)';
   latlang[0] = new google.maps.LatLng(-25.363882,131.044922);
   latlang[1] = new google.maps.LatLng(-26.363882,132.044922);
   latlang[2] = new google.maps.LatLng(-27.363882,133.044922);
   latlang[3] = new google.maps.LatLng(-28.363882,134.044922);
   
    var myOptions = {
      zoom: 4,
      center: latlang[0],
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

   
       
    var infowindow = new google.maps.InfoWindow({
        content: contents[0]
    });

    var marker = new google.maps.Marker({
        position: latlang[0],
        map: map,
        title: 'Uluru (Ayers Rock)'
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
   
   // Weitere Marker setzen
   var infowindow2 = new Array();
   marker2  = new Array();
   for(i in latlang) {
   alert(contents[i]);
      infowindow2[i] = new google.maps.InfoWindow({
         content: contents[i]
      });

      marker2[i] = new google.maps.Marker({
         position: latlang[i],
         map: map,
         title: titles[i]
      });
      google.maps.event.addListener(marker2[i], 'click', function() {
        infowindow2[i].open(map,marker2[i]);
      });
   }
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>


Mein Zusatzproblem ist, daß ich die Koordinaten anhand der Adressen aus WebEdition Objekten ermitteln muß.
Gruß Gelo
Besten Dank,
Gelo

gelogelo
Member
Beiträge: 92
Registriert: Di 7. Dez 2010, 15:00
Wohnort: Hamburg

Re: google MapsAPIv3

Beitragvon gelogelo » Mi 7. Mär 2012, 19:27

Hi, hier noch was zum Verständnis der Problematik!

Ich will ja Bubbles in einer Schleife erzeugen und die Info Felder.

Im Code geht es mit der Schleife nicht, mit willkürlichem setzen der array-Elemente über index geht es schon.
Hier der Code

Code: Alles auswählen

<!DOCTYPE html>
<html DIR="LTR">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"  /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Beispiel eines Google Maps JavaScript APIs Version 3: Mehrere Bubbles</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
   // Koordinaten fuer das Zentrum der Map
   var latlang = new Array();
   var titles = new Array();
   var contents = new Array();
   contents[0] = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Uluru 0</h1>'+
        '<div id="bodyContent">'+
        '<p><b>Uluru 0</b>, also referred to as <b>Ayers Rock</b></p>'+
        '</div>';
   contents[1] = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Uluru 1</h1>'+
        '<div id="bodyContent">'+
        '<p><b>Uluru 1</b>, Aboriginees call it <b>Ayers Rock</b></p>'+
        '</div>';
   contents[2] = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Uluru 2</h1>'+
        '<div id="bodyContent">'+
        '<p><b>Uluru 2</b>, gennant auch <b>Ayers Rock</b></p>'+
        '</div>';
   contents[3] = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Uluru 3</h1>'+
        '<div id="bodyContent">'+
        '<p><b>Uluru 3</b>, ist der schöne <b>Ayers Rock</b></p>'+
        '</div>';
   contents[4] = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Der 4.</h1>'+
        '</div>';
   contents[5] = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Der 5.</h1>'+
        '</div>';
   titles[0] = 'Uluru (Ayers Rock)';
   titles[1] = 'Uluru1 (Ayers Rock)';
   titles[2] = 'Uluru2 (Ayers Rock)';
   titles[3] = 'Uluru3 (Ayers Rock)';
   titles[4] = 'vier';
   titles[5] = 'fünf';
   latlang[0] = new google.maps.LatLng(-25.363882,131.044922);
   latlang[1] = new google.maps.LatLng(-26.363882,132.044922);
   latlang[2] = new google.maps.LatLng(-27.363882,133.044922);
   latlang[3] = new google.maps.LatLng(-28.363882,134.044922);
   latlang[4] = new google.maps.LatLng(-31.363882,136.044922);
   latlang[5] = new google.maps.LatLng(-33.363882,138.044922);
   
    var myOptions = {
      zoom: 4,
      center: latlang[0],
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

   
       
    var infowindow = new google.maps.InfoWindow({
        content: contents[0]
    });

    var marker = new google.maps.Marker({
        position: latlang[0],
        map: map,
        title: 'Uluru (Ayers Rock)'
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
   
   // Weitere Marker setzen
   var infowindow2 = new Array();
   var marker2  = new Array();
   for(i=1;i<latlang.length;i++) {
    // warum wird das nicht korrekt verarbeitet?????????????
      infowindow2[i] = new google.maps.InfoWindow({
         content: contents[i]
      });

      marker2[i] = new google.maps.Marker({
         position: latlang[i],
         map: map,
         title: titles[i]
      });
      google.maps.event.addListener(marker2[i], 'click', function() {
        infowindow2[i].open(map,marker2[i]);
      });
   }   
   
// Warum wird das korrekt gesetzt ????      
      
   infowindow2[4] = new google.maps.InfoWindow({
      content: contents[4]
   });

   marker2[4] = new google.maps.Marker({
      position: latlang[4],
      map: map,
      title: titles[4]
   });
   google.maps.event.addListener(marker2[4], 'click', function() {
   
     infowindow2[4].open(map,marker2[4]);
   });
   
   infowindow2[5] = new google.maps.InfoWindow({
      content: contents[5]
   });

   marker2[5] = new google.maps.Marker({
      position: latlang[5],
      map: map,
      title: titles[5]
   });
   google.maps.event.addListener(marker2[5], 'click', function() {
     infowindow2[5].open(map,marker2[5]);
   });
}

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>

</html>


Für Ratschläge gern zu haben,
Gelo
Besten Dank,
Gelo

gelogelo
Member
Beiträge: 92
Registriert: Di 7. Dez 2010, 15:00
Wohnort: Hamburg

Re: google MapsAPIv3

Beitragvon gelogelo » Mo 12. Mär 2012, 12:49

Hi,

inzwischen habe ich herausgefunden, daß die Vereigerung der Anzeige an was anderem liegt:
Der neue Server hatte keine curl enabled eingeschaltet.

Jetzt funktioniert die alte variante mit dem googlemap api key.

Trotzdem: für die neue api v3 fehlt mir die Möglichkeit, das dynamisch in die Felder einzulesen aus <we:object>
Und zwar an der Stelle wo das Infowindow in einer Schleife gefüllt werden soll.

Code: Alles auswählen

// Weitere Marker setzen
   var infowindow2 = new Array();
   var marker2  = new Array();
   for(i=1;i<latlang.length;i++) {
    // warum wird das nicht korrekt verarbeitet?????????????
      infowindow2[i] = new google.maps.InfoWindow({
         [b][i]content: contents[i][/i][/b]  // hier wird der Inhalt nicht übergeben
      });

      marker2[i] = new google.maps.Marker({
         position: latlang[i],
         map: map,
         title: titles[i]
      });
      google.maps.event.addListener(marker2[i], 'click', function() {
        infowindow2[i].open(map,marker2[i]);
      });
   }   


Ansehen unter: http://www.gelodata.de/maps/Google_Map_bubble_infofield_4.php

Die festkodierten content[i] geben was aus, die dynamischen nicht.

Hat jemand dazu einen Vorschlag?
Besten Dank,
Gelo


Zurück zu „JavaScript“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast