Google API Map - Wie mehrere Marker dynamisch laden und anzeigen?

[Rayne]

Hallo liebe Leute und zunächst ein frohes und gesundes Jahr euch allen!

Ich möchte auf meiner Seite eine Google-Karte einbinden, auf der per Marker/Pin Adressen angezeigt werden. Für eine Adresse ist das gar kein Problem, aber wie bekomme ich mehrere Marker dynamisch angezeigt? Man kann ja mehrere Marker fest in den Code schreiben, in meinem Fall müssten die allerdings dynamisch geladen werden.

Ich benutze für die Website Wordpress und speichere die Koordinaten in Custom Fields.

So sieht mein bisheriger Code aus:

<script type="text/javascript">
function initialize() {

if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));

<?php/* Ausgangsdaten konfigurieren: Längen und Breitenangabe des Karten-Mittelpunktes; Zoomfaktor, Kartentyp (G_NORMAL_MAP, G_HYBRID_MAP, G_SATELLITE_MAP)*/?>
map.setCenter(new GLatLng(<?php echo get_post_meta($post->ID, 'lat', true); ?>, <?php echo get_post_meta($post->ID, 'lng', true); ?>), 13, G_NORMAL_MAP);

function createMarker(point,html) {
var marker = new GMarker(point);

<?php/*Tooltip beim Klick auf den Marker anzeigen oder nicht*/?>
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}

<?php/* Standort Anfang*/?>
var point = new GLatLng(<?php echo get_post_meta($post->ID, 'lat', true); ?>, <?php echo get_post_meta($post->ID, 'lng', true); ?>);
var marker = createMarker(point,'<?php echo get_post_meta($post->ID, 'store', true); ?><br><?php echo get_post_meta($post->ID, 'street', true); ?><br><?php echo get_post_meta($post->ID, 'zip', true); ?> <?php echo get_post_meta($post->ID, 'locality', true); ?>')
map.addOverlay(marker);
<?php/* Standort Ende*/?>

<?php/* Standort Anfang*/?>
var point = new GLatLng(<?php echo get_post_meta($post->ID, 'lat', true); ?>, <?php echo get_post_meta($post->ID, 'lng', true); ?>);
var marker = createMarker(point,'<?php echo get_post_meta($post->ID, 'store', true); ?><br><?php echo get_post_meta($post->ID, 'street', true); ?><br><?php echo get_post_meta($post->ID, 'zip', true); ?> <?php echo get_post_meta($post->ID, 'locality', true); ?>')
map.addOverlay(marker);
<?php/* Standort Ende*/?>

<?php/* Standort Anfang*/?>
var point = new GLatLng(<?php echo get_post_meta($post->ID, 'lat', true); ?>, <?php echo get_post_meta($post->ID, 'lng', true); ?>);
var marker = createMarker(point,'<?php echo get_post_meta($post->ID, 'store', true); ?><br><?php echo get_post_meta($post->ID, 'street', true); ?><br><?php echo get_post_meta($post->ID, 'zip', true); ?> <?php echo get_post_meta($post->ID, 'locality', true); ?>')
map.addOverlay(marker);
<?php/* Standort Ende*/?>

<?php/* Standort Anfang*/?>
var point = new GLatLng(<?php echo get_post_meta($post->ID, 'lat', true); ?>, <?php echo get_post_meta($post->ID, 'lng', true); ?>);
var marker = createMarker(point,'<?php echo get_post_meta($post->ID, 'store', true); ?><br><?php echo get_post_meta($post->ID, 'street', true); ?><br><?php echo get_post_meta($post->ID, 'zip', true); ?> <?php echo get_post_meta($post->ID, 'locality', true); ?>')
map.addOverlay(marker);
<?php/* Standort Ende*/?>

<?php/* Standort Anfang*/?>
var point = new GLatLng(<?php echo get_post_meta($post->ID, 'lat', true); ?>, <?php echo get_post_meta($post->ID, 'lng', true); ?>);
var marker = createMarker(point,'<?php echo get_post_meta($post->ID, 'store', true); ?><br><?php echo get_post_meta($post->ID, 'street', true); ?><br><?php echo get_post_meta($post->ID, 'zip', true); ?> <?php echo get_post_meta($post->ID, 'locality', true); ?>')
map.addOverlay(marker);
<?php/* Standort Ende*/?>

<?php/* Navigationselemente einblenden*/?>
map.addControl(new GSmallMapControl());

<?php/* Kartentypen einblenden*/?>
map.addControl(new GMapTypeControl());

<?php/* Maßstab einblenden*/?>
map.addControl(new GScaleControl());

<?php/* Mouse Zoom aktivieren*/?>
map.enableScrollWheelZoom(); map.enableContinuousZoom();

}
}
</script>

Die Koordinaten werden per

<?php echo get_post_meta($post->ID, 'lat', true); ?>, <?php echo get_post_meta($post->ID, 'lng', true); ?>

aus den Custom Fields geladen. Bei einer Adresse kein Problem, bei mehreren wird weiterhin nur ein Marker angezeigt.

Nun ist es so, dass auf manchen Unterseiten der Website mal 5 Adressen, auf anderen Unterseiten 10 Adressen per Custom Fields angezeigt werden. Ich hätt auf jeder dieser Unterseiten gern eine Google-Karte mit der entsprechenden Anzahl an Markern.

Habt ihr eine Lösung für dieses Problem?

Vielen Dank schon im Voraus für eure Hilfe und einen guten Start in die Woche

 

[saftmeister]

Hmm, könnte es sein, das deswegen nur einer angezeigt wird, weil die Koordinaten immer die gleichen sind?

 

[Rayne]

Hmm, könnte es sein, das deswegen nur einer angezeigt wird, weil die Koordinaten immer die gleichen sind?

Der Aufruf für die Kooradinaten ist zwar immer derselbe, aber jede Post ID hat ihre eigenen Koordinaten in den Custom Fields gespeichert. Und durch $post->ID soll er ja die für die jeweilige ID spezifischen Koordinaten holen. Per HTML-Ausgabe klappt das nach diesem Prinzip einwandfrei, nur nicht in der Google-Map.

Ich denke, hier müsste auch eine Schleife rein, da jede Unterseite auf meiner Website verschieden viele Post IDs besitzt. Die Schleife müsste also solange durchlaufen, bis sie bei dem letzten Post angekommen ist und die entsprechenden Koordinaten in den Code setzen. Leider bin ich in Sachen PHP nicht fit genug, um das entsprechend umzusetzen. Daher würde ich mich sehr freuen, wenn ihr mir dabei helfen könnt

Dankeschön!

 

[saftmeister]

Ich weiß jetzt erstmal nicht, was du mit "Custom Fields" meinst. Auch ist nicht klar, wie die Daten in $post reinkommen und wo sie genau herkommen. Es wäre sinnvoll, mal ein

var_dump($post);

zu sehen. Meine Vermutung lautet, das $post ein simples Objekt ist und nur einen Datensatz enthält. Wenn dem nicht so ist, musst du erstmal erklären, was $post überhaupt ist.

 

[Rayne]

Hallo saftmeister, danke zunächst für deine Antworten!

Custom Fields sind im Prinzip extra Felder, die mit einem Post verknüpft werden. In diesen Feldern können Informationen gespeichert werden, auf die man dann zugreifen kann (wie bspw. die Koordinaten). Siehe auch hier: http://codex.wordpress.org/Custom_Fields

Auf einer anderen Unterseite rufe ich die Daten aus den Custom Fields folgendermaßen ab:

<?php while (have_posts()) : the_post(); $count++; ?>                                                                 

<?php echo get_post_meta($post->ID, 'Vorname', true); ?><br />
<?php echo get_post_meta($post->ID, 'Nachname', true); ?> <?php echo get_post_meta($post->ID, 'Spitzname', true); ?>

            
<?php endwhile; ?>

Vorname, Nachname und Spitzname sind hier jeweils Custom Fields, die mir dann durch die Schleife auf der Seite ausgegeben werden.

Das sieht dann so aus:

Vorname
Nachname Spitzname

Vorname
Nachname Spitzname

Vorname
Nachname Spitzname
...

So eine Schleife bräuchte ich wohl auch für die Google Maps-Geschichte. Hab es aber leider noch nicht lauffähig umsetzen können.