Google Maps API - mehrere Marker via PHP Schleife

Beitrag von **Huggy** » 13.03.2009, 13:46

Hiho!
Für ein Projekt würde ich gerne eine Gmap erstellen, die relativ viele Marker hat. Die Positionen + Texte der Marker kommen aus einer Datenbank (SQL).

Mein derzeitiger Code sieht so aus:

Code: Alles auswählen

<?php 
$verbindung = mysql_connect &#40;"localhost",
"root", ""&#41;
or die &#40;"keine Verbindung möglich.
 Benutzername oder Passwort sind falsch"&#41;;

mysql_select_db&#40;"googlemaps"&#41;
or die &#40;"Die Datenbank existiert nicht."&#41;;

$abfrage = "SELECT * FROM positions";
$ergebnis = mysql_query&#40;$abfrage&#41;;



?>
<!-- Body Teil, muss bleiben!-->
<html xmlns="http&#58;//www.w3.org/1999/xhtml" xmlns&#58;v="urn&#58;schemas-microsoft-com&#58;vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps API Example&#58; Simple Geocoding</title>
    <script src="http&#58;//maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAjukfAShPqYVMq-7wT-QPrxSW02BduV7fa4cQ42E4kidB8_FWmxQE-khZXVQ3jI8k2vrxCi4VPaZCKQ" type="text/javascript"></script>
    <script type="text/javascript">

    var map = null;
    var geocoder = null;

    function initialize&#40;&#41; &#123;
      if &#40;GBrowserIsCompatible&#40;&#41;&#41; &#123;
        map = new GMap2&#40;document.getElementById&#40;"map_canvas"&#41;&#41;;
        map.setCenter&#40;new GLatLng&#40;48.2296848, 16.3441712&#41;, 13&#41;;
        geocoder = new GClientGeocoder&#40;&#41;;
      &#125;
    
<!-- Ende Body, es folgen die JS-Schnipsel der DB -->	
<?php while&#40;$row = mysql_fetch_object&#40;$ergebnis&#41;&#41;

   &#123;
	   $i = $i + 1;
   echo "map.setCenter&#40;new GLatLng&#40;$row->position&#41;, 13&#41;;
   var marker$i = new GMarker&#40;new GLatLng&#40;$row->position&#41;&#41;;
              map.addOverlay&#40;marker$i&#41;;
              marker$i.openInfoWindowHtml&#40;$row->text&#41;; ";
   &#125;
   echo "&#125; \n";
?>
</script>
</head>
<body onload="initialize&#40;&#41;" onunload="GUnload&#40;&#41;">
    <form action="#" onsubmit="showAddress&#40;this.address.value&#41;; return false">
      <p>
        <input type="text" size="60" name="address" value="1600 Amphitheatre Pky, Mountain View, CA" />
        <input type="submit" value="Go!" />
      </p>
      <div id="map_canvas" style="width&#58; 1000px; height&#58; 800px"></div>
    </form>
</body>
</html>

Das geht auch halbwegs, es wird brav auf den ersten Marker zentriert , welcher auch erstellt wird. Die anderen 30 Marker werden jedoch nicht erstellt.

Der Output als HTML sieht so aus:

Code: Alles auswählen

<!-- Body Teil, muss bleiben!-->
<html xmlns="http&#58;//www.w3.org/1999/xhtml" xmlns&#58;v="urn&#58;schemas-microsoft-com&#58;vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps API Example&#58; Simple Geocoding</title>
    <script src="http&#58;//maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAjukfAShPqYVMq-7wT-QPrxSW02BduV7fa4cQ42E4kidB8_FWmxQE-khZXVQ3jI8k2vrxCi4VPaZCKQ" type="text/javascript"></script>
    <script type="text/javascript">

    var map = null;
    var geocoder = null;

    function initialize&#40;&#41; &#123;
      if &#40;GBrowserIsCompatible&#40;&#41;&#41; &#123;
        map = new GMap2&#40;document.getElementById&#40;"map_canvas"&#41;&#41;;
        map.setCenter&#40;new GLatLng&#40;48.2296848, 16.3441712&#41;, 13&#41;;
        geocoder = new GClientGeocoder&#40;&#41;;
      &#125;
    
<!-- Ende Body, es folgen die JS-Schnipsel der DB -->	
map.setCenter&#40;new GLatLng&#40;48.2296848, 16.3441712&#41;, 13&#41;;
   var marker1 = new GMarker&#40;new GLatLng&#40;48.2296848, 16.3441712&#41;&#41;;
              map.addOverlay&#40;marker1&#41;;
              marker1.openInfoWindowHtml&#40;&#41;; map.setCenter&#40;new GLatLng&#40;48.2296848, 16.3441713&#41;, 13&#41;;
   var marker2 = new GMarker&#40;new GLatLng&#40;48.2296848, 16.3441713&#41;&#41;;
              map.addOverlay&#40;marker2&#41;;
              marker2.openInfoWindowHtml&#40;&#41;; &#125; 
</script>
</head>
<body onload="initialize&#40;&#41;" onunload="GUnload&#40;&#41;">

    <form action="#" onsubmit="showAddress&#40;this.address.value&#41;; return false">
      <p>
        <input type="text" size="60" name="address" value="" />
        <input type="submit" value="Go!" />
      </p>
      <div id="map_canvas" style="width&#58; 1000px; height&#58; 800px"></div>
    </form>
</body>
</html>

Ich kann leider weder PHP noch Javascript gut genug, um solche Probleme zu lösen.

kann mir jemand sagen, wieso ich nur einen Marker bekomme?