Google Maps Marker in while Schleife

lucarp · 10 November 2009

Hallo

Ich gebe auf einer Google Map folgenden Marker mit HTML info fenster aus

Code:

 function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(<?php echo $x . "," . $y; ?>), <?php echo $zoom; ?>);
            var marker = new GMarker (new GLatLng(<?php echo $x . "," . $y; ?>));
GEvent.addListener (marker, "click", function () {
marker.openInfoWindowHtml ("html code");
});

        map.addOverlay (marker);

das klappt auch wunderbar.

Jetzt möchte ich jedoch mehrere Marker auf dieser karten platzieren.
die koordinaten für diese Marker stehen alle in einer MySQL.

Jetzt habe ich versucht den oben genannten Code einfach in einer Schleife auszugeben und den marker mit einer zählvariablen $i je nach datensätzen in der DB zu erhöhen.

Code:

 function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(<?php echo $x . "," . $y; ?>), <?php echo $zoom; ?>);

<?php 
$alle_marker = mysql_query("SELECT * FROM $mysqltable"); 
$i = 1;
?>

while($koordinaten = mysql_fetch_array($alle_marker))
            {
                ?>
        var marker<?php echo $i; ?> = new GMarker (new GLatLng(<?php echo $koordinaten['x'] . "," . $koordinaten['y']; ?>));
GEvent.addListener (marker<?php echo $i; ?>, "click", function () {
marker<?php echo $i; ?>.openInfoWindowHtml ("HTML code");
});

        <?php
        $i++;
            }
            
            for($j=1;$j<$i;$j++)
            {
                ?>
                map.addOverlay (marker<?php echo $j; ?>);
                <?php
            }

also werden erst alle marker erstellt, sagen wir 100 stück und dann werden alle overlays mit den markern mit der for schleife ausgegeben.

der code ist nicht sehr schön. aber wo liegt das problem

danke

Gilles · 10 November 2009

Mit php echt sehr unschön

und ich weiss nicht wieso du da ne 2. Schleife machst.
Reicht doch

Code:

map.addOverlay (marker<?php echo $i; ?>);
<?php
  $i++;
?>

Würde dir aber raten die Daten per Ajax abzuholen. Machste dir nen schönen json-String und verarbeitest alles damit. So hab ich es damals gemacht :)
Denn JS und PHO zu mischen kann manchmal zu sehr verwirrenden Code führen (Wie man hier sieht)

lucarp · 10 November 2009

ja ich hatte schonmal ein ähnliches problem und da wurde mir auch die lösung mit json vorgeschlagen, aber ich hatte bisher nicht nicht die Zeit mich damit zu beschäftigen und deshalb dacht ich ich löse das so.

das mit der zweiten schleife habe ich gemacht, da ich gedacht habe, dass vielleicht erst alle marker definiert werden müssen bevor man das overlay ausgibt.

vorher hatte ich das in der ersten schleife mit drin.

Gilles · 10 November 2009

Brauchst garnicht so viel zu lernen

PHP: json_encode - Manual
in PHP
und
JSON in JavaScript für den JS Teil. Was du eigentlich nur brauchst:

Code:

var myObject = eval('(' + myJSONtext + ')');

Was Ajax angeht so gibt es viele Javascript Frameworks die dir das Leben mit AJAX erleichtern. (jquery, prototype usw.)

Die Zahl · 10 November 2009

Gilles schrieb:
Mit php echt sehr unschön
und ich weiss nicht wieso du da ne 2. Schleife machst.
Reicht doch

Code:

map.addOverlay (marker<?php echo $i; ?>); <?php $i++; ?>

Würde dir aber raten die Daten per Ajax abzuholen. Machste dir nen schönen json-String und verarbeitest alles damit. So hab ich es damals gemacht :)
Denn JS und PHO zu mischen kann manchmal zu sehr verwirrenden Code führen (Wie man hier sieht)

Mal von dem Thema abgesehen..... ein <?php $i++; ?> in einer JS Schleife bringt garnichts. Der Befehl wird nur einmal ausgeführt, da JS erst nach der Serververarbeitung aktiv ist.
Beispiel: wenn die PHP var $i = 1 ist und man eine Schleife in JS macht, sagen wir mal mit 10 wiederholungen, und in der schleife steht <?php $i++; ?>, dann ist $i am ende aber nur 2, nicht 11.
Das solltet ihr dabei bedenken.

Mfg

Gilles · 10 November 2009

Die Zahl schrieb:
Mal von dem Thema abgesehen..... ein <?php $i++; ?> in einer JS Schleife bringt garnichts. Der Befehl wird nur einmal ausgeführt, da JS erst nach der Serververarbeitung aktiv ist.
Beispiel: wenn die PHP var $i = 1 ist und man eine Schleife in JS macht, sagen wir mal mit 10 wiederholungen, und in der schleife steht <?php $i++; ?>, dann ist $i am ende aber nur 2, nicht 11.
Das solltet ihr dabei bedenken.

Mfg

Du solltest bedenken, dass er die Schleifen ja nicht in JS benutzt sondern in PHP. er schreibt sich sozusagen den JS Code zusammen. Er benutzt keine einzige JS Schleife. Am Ende sollte er so etwas da haben

Code:

  var marker0 = new GMarker (new GLatLng(20.923 , 15.115));
GEvent.addListener (marker0, "click", function () {
marker0.openInfoWindowHtml ("HTML code");
});
map.addOverlay (marker0);

var marker1 = new GMarker (new GLatLng(21.923 , 16.115));
GEvent.addListener (marker1, "click", function () {
marker1.openInfoWindowHtml ("HTML code");
});
map.addOverlay (marker1);

Aber es ist halt sehr unschön gelöst und außerdem ist die 2. Schleife unnötig. :) Wie gesgat. Schöner wäre es über AJAX

lucarp · 10 November 2009

ja genau, also lassen wir die schönheit des codes mal außer acht

auch wenn ich diesen code 100 mal statisch einbinde werden mir die marker nicht angezeigt.

Code:

  var marker0 = new GMarker (new GLatLng(20.923 , 15.115));
GEvent.addListener (marker0, "click", function () {
marker0.openInfoWindowHtml ("HTML code");
});
map.addOverlay (marker0);

var marker1 = new GMarker (new GLatLng(21.923 , 16.115));
GEvent.addListener (marker1, "click", function () {
marker1.openInfoWindowHtml ("HTML code");
});
map.addOverlay (marker1);

Gilles · 10 November 2009

Hab die Lösung doch schon geschrieben

Code:

//anstatt
for($j=1;$j<$i;$j++)
            {
                ?>
                map.addOverlay (marker<?php echo $j; ?>);
                <?php
            }

Code:

// Das hier
?>
   map.addOverlay (marker<?php echo $i; ?>);
<?php
$i++;

Wenn das nicht funktioniert bitte nochmal schreiben ;) Das ganze muss übrigens innerhalb der $i-Schleife stehen

struppi · 10 November 2009

lucarp schrieb:
auch wenn ich diesen code 100 mal statisch einbinde werden mir die marker nicht angezeigt.

Und die Fehlerkonsole ist auch leer?

crash · 11 November 2009

Warum die Sprachen mischen und nicht ein verarbeitbares Format für JavaScript ausgeben? json_encode() war schon ganz richtig.

Gilles · 11 November 2009

Gerade erst gesehen, dass es auch statisch garnicht funktionieren soll.
Hab das dann mal eben ausgetestet mit dem statischem Code.
Bei mir funktioniert es einwandfrei.
Hier mal mein beispiel für einen marker auf der Map:

HTML:

<!DOCTYPE html "-//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>
    <style>
      #mapCanvas {
        height: 300;
        width: 400;
      }
    </style>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=DEINKEY" type="text/javascript"></script>  
    <script>
      // Außerhalb definieren damit die map auch in den anderen Funktionen
      // außerhalb von initialize angesprochen werden kann
      var map;
      window.onload = function() {
        // Map erstellen und auf Punkt zentrieren
        initialize();
        
        // Neuen Marker erstellen mit kopiertem Code :P
        var marker0 = new GMarker (new GLatLng(51.188812, 6.826179));
        GEvent.addListener (marker0, "click", function () {
          // Popup definieren
          marker0.openInfoWindowHtml ("HTML code");
        });
        // Marker auf Map anheften
        map.addOverlay (marker0);


      }
      
      window.onunload = function() {
        GUnload();
      }
      
      function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("mapCanvas"));
        map.setCenter(new GLatLng(51.188812, 6.826179), 13);
       }
      }
    </script>
  </head>
  <body>
    <div id="mapCanvas">
      
    </div>
  </body>
</html>

Und hier die "PHP Version", was jedoch keinen schönen Code verspricht. (Lerne lieber dieses Ajax ,Json Geschichte)

HTML:

<!DOCTYPE html "-//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>
    <style>
      #mapCanvas {
        height: 300;
        width: 400;
      }
    </style>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=DEIN_KEY" type="text/javascript"></script>  
    <script>
      // Außerhalb definieren damit die map auch in den anderen Funktionen
      // außerhalb von initialize angesprochen werden kann
      var map;
      window.onload = function() {
        // Map erstellen und auf Punkt zentrieren
        initialize();
        
        <?php
        
          // Wahlweise hier Array mit Kkordinaten auslesen
        
          // Koordinaten
          $x = 51.188812;
          $y = 6.826179;
          // Schleife für marker
          for($i=0; $i < 10; $i++) {
           
        ?>
        
        // Neuen Marker erstellen mit kopiertem Code :P
        var marker<?php echo $i;?> = new GMarker (new GLatLng(<?php echo $x.",".$y; ?>));
        GEvent.addListener (marker<?php echo $i;?>, "click", function () {
          // Popup definieren
          marker<?php echo $i;?>.openInfoWindowHtml ("HTML code");
        });
        // Marker auf Map anheften
        map.addOverlay (marker<?php echo $i;?>);

        <?php
        
        $y += 0.0011;
        $x += 0.00010;
          }
        
        ?>
      }
      
      window.onunload = function() {
        GUnload();
      }
      
      function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("mapCanvas"));
        map.setCenter(new GLatLng(51.188812, 6.826179), 13);
       }
      }
    </script>
  </head>
  <body>
    <div id="mapCanvas">
      
    </div>
  </body>
</html>

struppi · 11 November 2009

Gilles schrieb:
Gerade erst gesehen, dass es auch statisch garnicht funktionieren soll.
Hab das dann mal eben ausgetestet mit dem statischem Code.
Bei mir funktioniert es einwandfrei.

Genau deshalb sollte er mal in die Fehlerkonsole schauen. Ohne Fehlermeldung zu helfen ist immer etwas schwierig.

Wobei ich den Weg auch nicht für sinnvoll halte.

crash · 11 November 2009

Mein Beitrag wird offensichtlich nicht beachtet. Die Trennung von PHP und JavaScript verbessert die Wartungsmöglichkeit, die Erweiterung und das schreiben von Tests. Außerdem kann das Script so in eine einzelne Datei gepackt werden (wird gecached) und PHP gibt nur Daten aus.

PHP:

$koords = array(
    array('x' => 1, 'y' => 1),
    array('x' => 2, 'y' => 2),
    array('x' => 3, 'y' => 3),
    array('x' => 4, 'y' => 4),
    array('x' => 5, 'y' => 5),
);

PHP:

<script>
MyGmap(
   <?= json_encode($koords) ?>
);
</script>

Gilles · 11 November 2009

crash schrieb:
Mein Beitrag wird offensichtlich nicht beachtet. Die Trennung von PHP und JavaScript verbessert die Wartungsmöglichkeit, die Erweiterung und das schreiben von Tests. Außerdem kann das Script so in eine einzelne Datei gepackt werden (wird gecached) und PHP gibt nur Daten aus.

Wurdest nicht vergessen :) Hab immer in meinen Beiträgen geschrieben, dass die JSON Variante wesentlich eleganter ist :)
War nur zu faul ihm jetzt ein komplettes Javascript , Json Beispiel zu liefern. ^^

crash · 11 November 2009

Ich nutze ja kein JSON, sondern nur die JSON-Implementation PHPs um ein JavaScript-Objekt zu erzeugen.

Google Maps Marker in while Schleife

lucarp

Mitglied

Gilles

Blogger

lucarp

Mitglied

Gilles

Blogger

Die Zahl

Neues Mitglied

Gilles

Blogger

lucarp

Mitglied

Gilles

Blogger

struppi

Guest

crash

Neues Mitglied

Gilles

Blogger

struppi

Guest

crash

Neues Mitglied

Gilles

Blogger

crash

Neues Mitglied

Neueste Beiträge