Ich gebe auf einer Google Map folgenden Marker mit HTML info fenster aus
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.
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
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)
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.
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.
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);
[/CODE]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
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]
#mapCanvas {
height: 300;
width: 400;
}
// 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>
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. ^^
