[WordPress] Übersichtskarte mit Googlemaps und API3 erstellen.
25.08.2012 10:28 Uhr
Hallo,
ich versuche seit zwei Tagen eine Google Map neben meiner Artikel (Events) übersicht einzubinden die die Marker der Orte anzeigt deren Events eben angezeigt werden. Dazu Initialisiere ich eine Karte und wollte dann im Loop die jeweiligen Marker erzeugen. Leider scheint das nicht zu funktionieren! Ich kenne mich nicht so gut aus mit javascript und jquery und scheine die Dokumentation nicht so ganz zu verstehen!
Karte Initialisieren :
<div id="map_canvas" style="width:100%; height:750px;"></div><!-- #map_canvas -->
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var geocoder;
var map;
var iterator = 0;
var adresse = [];
var marker = [];
jQuery(document).ready(function() {
initialize();
});
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(50.847573,9.953613);
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
Mein letzter versuch war es nun die Variablen mit der Post ID zu versehen und somit eine Indivituelle Variable für jeden Marker zu erzeugen:
<script type="text/javascript">
function codeAddress() {
var address<?php the_ID(); ?> = "<?php echo $adresse; ?>";
geocoder.geocode( { 'address': address<?php the_ID(); ?>},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker<?php the_ID(); ?> = new google.maps.Marker({
position: results[0].geometry.location});
marker<?php the_ID(); ?>.setMap(map);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
Leider scheint auch das nicht zu funktionieren. Kann mir vllt jemand helfen?
2 Antworten
#1
27.08.2012 09:32 Uhr
|
Hallo Sebastian,
das sieht eigentlich schon ziemlich gut aus. Ich habe deinen Code genommen, ihn in eine richtige HTML-Struktur überführt und getestet und es läuft.
Du bist also schon auf dem richtigen Weg. Dein Loop sollte auch funktionieren, nur habe ich in deinem Code keinen Aufruf von
codeAddress();
gefunden.
Schau mal hier, dieser Code läuft bei mir:
<html>
<body>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
</body>
<div id="map_canvas" style="width:100%; height:750px;"></div><!-- #map_canvas -->
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var geocoder;
var map;
var iterator = 0;
var adresse = [];
var marker = [];
jQuery(document).ready(function() {
initialize();
codeAddress();
});
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(50.847573,9.953613);
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = "Alexanderplatz, Berlin";
geocoder.geocode( { 'address': address},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
position: results[0].geometry.location});
marker.setMap(map);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
</html>
|
#2
27.08.2012 21:57 Uhr
|
So, ich möchte mal die Lösung online stellen. Nach zwei Tagen verzweiflung und sicherlich 100 Ideen die ich durchprobiert habe habe ich mir nun folgende lösung zusammen gebastelt:
<div id="map_canvas" style="width:100%; height:750px;"></div><!-- #map_canvas -->
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var geocoder;
var map;
jQuery(document).ready(function() {
initialize();
});
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(50.847573,9.953613);
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
codeAddress();
}
function codeAddress() {
var adress = new Array();
<?php $i = 0;
$query2 = new WP_Query( array( 'post_type' => 'eventkalender',
'orderby' => 'meta_value_num',
'meta_key' => 'sortorder',
'order' => 'ASC',
'paged' => get_query_var( 'paged' ),
'posts_per_page' => '5')
); ?>
<?php if($query2->have_posts()) : ?>
<?php while($query2->have_posts()) : $query2->the_post(); ?>
<?php
/*********************************************
* Erstellung der Marker für die Karte
********************************************/
$strasse = get_post_meta($post->ID, 'ecpt_adresse-strasse', true);
$plz = get_post_meta($post->ID, 'ecpt_postleizahl', true);
$ort = get_post_meta($post->ID, 'ecpt_stadt', true);
$land = get_post_meta($post->ID, 'ecpt_land', true);
// Lokation Informationen zusammenfügen
$adresse = $strasse .', '.$plz .' '.$ort.', '.$land ;
?>
adress[<?php echo $i; ?>] = "<?php echo $adresse; ?>";
<?php
$i++;
endwhile;
wp_reset_postdata();
endif;?>
for (var i =0; i < adress.length; i++) {
geocoder.geocode( { 'address': adress[i]},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
});
}
}
</script>
Es ist sicherlich noch nicht DIE goldlösung, zumal ich auch noch nicht den Titel sowie die Beschreibung übergeben habe. Diese müsste ich bei der Lösung jeweils in einem Array abspeichern, aber mal sehen was mir noch so einfällt!!!
|
Ähnliche Fragen
|