halo hauge,
die nächste herausforderung wäre nun, innerhalb einer gmap daten aus zwei MM
anzuzeigen. ob das funktionieren kann? was meinst du ?
lg.
alex
halo hauge,
die nächste herausforderung wäre nun, innerhalb einer gmap daten aus zwei MM
anzuzeigen. ob das funktionieren kann? was meinst du ?
lg.
alex
Tach beisammen!
sorry wenn ich mich hier mal einklinke. Aber ich versuche gerade das erste Mal eine Google MAp von MM zu befüllen. Dank Christians Folien von der Contao Konferenz klappt das auf Anhieb! Allerdings zentriert er mir die Karte nicht auf den Pin. Da bräuchte ich bitte etwas Hilfe.
Edit:
Es handelt sich hier um einen Einzeleintrag mit einem PIN auf den immer zentriert werden soll, nicht auf die Grundeinstellung der Map.
Hier mein Code im Detail-Template
Folgendes habe ich im Netzgefunden...aber ich erzeuge die Map ja nicht im Javascript. An welche Stelle muss ich das center packen?Code:<script type="text/javascript"> function gmap1_dynmap(gmap1) { <?php $koordinaten = $arrItem['raw']['breitengrad'].",".$arrItem['raw']['laengengrad']; $title = $arrItem['raw']['title']['value']; $infoblase = '<div style="width:200px;height:150px;">Das ist ein Test</div>'; ?> var gmap1_1_marker = new google.maps.Marker({ position: new google.maps.LatLng(<?php echo $koordinaten; ?>), map: gmap1, title:"<?php echo $arrItem['raw']['title']['value']; ?>", zIndex: 1 }); var gmap1_1_infowindow = new google.maps.InfoWindow({ position: new google.maps.LatLng(<?php echo $koordinaten; ?>), pixelOffset: new google.maps.Size(0,-15), content: '<?php echo preg_replace('%(\r\n)|(\r)|(\n)%', '', $infoblase); ?>' }); google.maps.event.addListener( gmap1_1_marker, 'click', function() { gmap1_1_infowindow.open(gmap1); }); } </script>
VGCode:var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP };
Frank
Geändert von Kahmoon (27.11.2014 um 11:23 Uhr)
Meinst du den Kartenausschnitt? Der wird ja im GoogleMaps Modul bei den Einstellungen der Karte eingestellt.
Oder meinst du die Karte soll sich zum angeklickten Pin bewegen, so dass dieser Pin dann im Zentrum der Karte ist?
Gruß
René
Genau das ist das Problem...er zentriert auf die Grundeinstellung in der Googlemap. Wenn ich auf den Pin klicke, zentriert er die Karte auf den Eintrag. Das passt.
Es handelt sich hier aber um einen einzelne Einträge z.b. "Olypiaturm". Unterhalb des Eintrags und dessen Beschreibungstext ist eine Googlemap. Hier soll die Karte immer auf den Marker zentriert sein, es gibt ja nur einen. Genau dafür gibt es wohl diesen center Befehl der API. Aber ich weiss nicht wie ich den verwende.
Hab das leider noch nicht online um einen Link zu zeigen. Ich hoffe meine Erklärung reicht.
Geändert von Kahmoon (27.11.2014 um 11:13 Uhr)
Wenn ich das richtig verstehe, bräuchtest du für jeden Eintrag eine eigene GoogleMap mit anderem Kartenausschnitt. Spontan fällt mir ein, ob ich dann nicht die GoogleMap selbst per JS erstellen würde, in dem Fall also gar nicht mit dlh_googlemap arbeiten.
Dann könntest du direkt beim Eerzeugen der Karte den center Befehl ausführen.
Oder andere Idee: mit
kannst du den page load event triggern und dann in der initialize Funktion den GoogleMaps setCenter() Befehl verwenden?Code:google.maps.event.addDomListener(window, 'load', initialize);
Hab ich nicht getestet. Ist nur eine Anregung.
Letzteres klingt gut. Wie würde das dann aussehen?
Problem ist der Zugriff auf die Google Map. Ich weiss nicht wie ich die anspreche. Das erzeugt mir ja laut Code eine neue Karte oder?Code:google.maps.event.addDomListener(window, 'load', initialize); function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("dlh_googlemap_1"), mapOptions); }
var map = new google.maps.Map(document.getElementById("dlh_googl emap_1"), mapOptions);
Edit:
er springt mir jetzt an den richtigen Punkt...aber der MArker ist weg.
Code:<script type="text/javascript"> function gmap1_dynmap(gmap1) { <?php $koordinaten = $arrItem['raw']['breitengrad'].",".$arrItem['raw']['laengengrad']; $title = $arrItem['raw']['title']['value']; $infoblase = '<div id="gmap_infobox"> <p class="title"><strong>'.$arrItem['raw']['title']['value'].'</strong></p></div>'; ?> var gmap1_1_marker = new google.maps.Marker({ position: new google.maps.LatLng(<?php echo $koordinaten; ?>), map: gmap1, title:"<?php echo $titel; ?>", zIndex: 1 }); var gmap1_1_infowindow = new google.maps.InfoWindow({ position: new google.maps.LatLng(<?php echo $koordinaten; ?>), center: new google.maps.LatLng(<?php echo $koordinaten; ?>), pixelOffset: new google.maps.Size(0,-15), content: '<?php echo preg_replace('%(\r\n)|(\r)|(\n)%', '', $infoblase); ?>' }); google.maps.event.addListener( gmap1_1_marker, 'click', function() { gmap1_1_infowindow.open(gmap1); }); google.maps.event.addDomListener(window, 'load', initialize); function initialize() { var mapOptions = { zoom: 13, center: new google.maps.LatLng(<?php echo $koordinaten; ?>), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("dlh_googlemap_1"), mapOptions); } } </script>
Geändert von Kahmoon (27.11.2014 um 11:47 Uhr)
Oder könnte man nicht auch statt dem:
einfachCode:google.maps.event.addDomListener(window, 'load', initialize); function initialize() { var mapOptions = { zoom: 13, center: new google.maps.LatLng(<?php echo $koordinaten; ?>), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("dlh_googlemap_1"), mapOptions); } } </script>
einfügen?Code:gmap1.setCenter(x,y);
Sorry fürs herumstochern. Ich müsste mich wahrscheinlich mal dran setzen und es selbst versuchen.
Kein Problem...bin ja selbst am stochern. Dein Tipp ging in die richtige Richtung. Der Befehl ist aber etwas anders. Jetzt geht es.
Code:function initialize() { gmap1.setCenter(new google.maps.LatLng(<?php echo $koordinaten; ?>)); } google.maps.event.addDomListener(window, 'load', initialize);
Na, wunderbar, dann klappts ja.
Was ich nur nicht verstehe ist, warum man hier noch den load event listener benötigt?
Ich meine, die Funktion dynmap wird ja eh durchlaufen, wenn der Marker erzeugt wird.
Kann man da nicht gleich nach der Marker-Erzeugung das setCenter aufrufen, ohne das load event?
Du hast Recht. Geht auch ohne.
Eine Lösung habe ich gefunden :-)
Das Problem ist das bei mehreren Bildern alle Pfade in einem String gespeichert werden. (z.b. 1.jpg,2.jpg,3.jpg)
Daher muss zuerst der String zerteilt werden und danach wieder in einer foreach Schleife abgerufen werden.
<?php
foreach($this->items->parseAll($this->getFormat(), $this->view) as $arrItem):
// $label = htmlspecialchars($arrItem['text']['label'], ENT_QUOTES);
// $geodaten = $arrItem['text']['geodaten'];
// $marker = $arrItem['text']['marker'];
// $datum = $arrItem['text']['datum'];
// $beschreibung = $arrItem['text']['beschreibung'];
// $alternativtext = $arrItem['text']['alternativtext'];
// $id = $arrItem['raw']['id'];
$bild = $arrItem['text']['bild'];
// Zerteilen des Strings in dem Array $bild
$einzelne_bilder = explode(",", $bild);
// Formatierung der Inhalte für das Infowindow
// $info = '<div class="gmap-infobox-content">';
// $info .= '<p class="id">ID: ' .$id .'</p>';
// $info .= '<p class="label">' .$label .'</p>';
// $info .= '<p class="datum">' .$datum .'</p>';
// $info .= '<div class="beschreibung">' .$beschreibung .'</div>';
// $info .= '<div class="alternativtext">' .$alternativtext .'</div>';
// Schleife um die einzelnen Bilder anzuzeigen
foreach ($einzelne_bilder as $bilder)
{
$info .= '<div class="bildupload"><img src="' .$bilder .'"></div>';
};
$info .= '</div>';
?>
ist´s zu früh am Morgen... oder wo wird die Schleife "foreach($this->items..." beendet? Welches Tag wird mit "$info .= '</div>';" geschlossen?
MetaModels-Workshop: ... wo sich die nächste Gelegenheit bietet... oder Extern oder Online
Erweiterungen: Infos im Seitenbaum, Formular-Default für Select/Checkbox/Radio (SCR), Formular-Newsletteranmeldung, Regex-Formularwidget, Lizenzmanager für Isotope
Unterstützung per Github-Sponsoring: MetaModels Handbuch und Forum, e-spin Erweiterungen
Hier mein gesamter Code:
PHP-Code:
<?php if ($this->items->getCount()): ?>
<script>
var arrInfoBoxes = new Array();
function gmap1_dynmap(gmap1) {
<?php
foreach($this->items->parseAll($this->getFormat(), $this->view) as $arrItem):
$label = htmlspecialchars($arrItem['text']['label'], ENT_QUOTES);
$geodaten = $arrItem['text']['geodaten'];
$marker = $arrItem['text']['marker'];
$datum = $arrItem['text']['datum'];
$beschreibung = $arrItem['text']['beschreibung'];
$alternativtext = $arrItem['text']['alternativtext'];
$id = $arrItem['raw']['id'];
$bild = $arrItem['text']['bild'];
// Zerteilen des Strings $bild
$einzelne_bilder = explode(",", $bild);
// Formatierung der Inhalte für das Infowindow
$info = '<div class="gmap-infobox-content">';
$info .= '<p class="id">ID: ' .$id .'</p>';
$info .= '<p class="label">' .$label .'</p>';
$info .= '<p class="datum">' .$datum .'</p>';
$info .= '<div class="beschreibung">' .$beschreibung .'</div>';
$info .= '<div class="alternativtext">' .$alternativtext .'</div>';
// Schleife um $einzelne_bilder auszugeben
foreach ($einzelne_bilder as $bilder)
{
$info .= '<div class="bildupload"><img src="' .$bilder .'"></div>';
};
$info .= '</div>';
?>
// Auswahl der Markerfarbe
<?php
if($marker == "Blau"){$markerFile = "files/img/marker_blau.png";}
if($marker == "Rot"){$markerFile = "files/img/marker_rot.png";}
if($marker == "Gelb"){$markerFile = "files/img/marker_gelb.png";}
if($marker == "Lila"){$markerFile = "files/img/marker_lila.png";}
if($marker == "Grün"){$markerFile = "files/img/marker_gruen.png";}
?>
// Erstellung der Marker
var gmap1_<?php echo $id; ?>_marker = new MarkerWithLabel({
position: new google.maps.LatLng(<?php echo $geodaten; ?>),
map: gmap1,
labelContent: "<?php echo $label; ?>",
labelAnchor: new google.maps.Point(30, 40),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 1},
icon: new google.maps.MarkerImage(
'<?php echo $markerFile; ?>',
new google.maps.Size(11, 21),
new google.maps.Point(0,0),
new google.maps.Point(5,21)
)
});
// Erstellung der Infowindow
var gmap1_<?php echo $id; ?>_infobox1 = new InfoBox({
content: '<?php echo $info; ?>',
boxClass: 'gmap-infobox',
disableAutoPan: false,
zIndex: null,
closeBoxMargin: '18px 8px 2px 2px',
closeBoxURL: 'http://www.google.com/intl/en_us/mapfiles/close.gif'
});
arrInfoBoxes[arrInfoBoxes.length] = gmap1_<?php echo $id; ?>_infobox1;
// Erstellung der Event Listener
google.maps.event.addListener(gmap1_<?php echo $id; ?>_marker, 'click', function() {
// Erst alle schließen damit nur eins geöffnet werden kann
var i;
for (i = 0; i < arrInfoBoxes.length; i++) {
arrInfoBoxes[i].close();
}
gmap1_<?php echo $id; ?>_infobox1.open(gmap1, this);
gmap1.setCenter(this.getPosition());
gmap1.setZoom(9);
})
<?php endforeach; ?>
}
</script>
<?php endif; ?>
o.k. - nu wird ein Schuh draus...
MetaModels-Workshop: ... wo sich die nächste Gelegenheit bietet... oder Extern oder Online
Erweiterungen: Infos im Seitenbaum, Formular-Default für Select/Checkbox/Radio (SCR), Formular-Newsletteranmeldung, Regex-Formularwidget, Lizenzmanager für Isotope
Unterstützung per Github-Sponsoring: MetaModels Handbuch und Forum, e-spin Erweiterungen
Wenn ich in einem Attribut (Typ: Longtext) im Backend über den TinyMC einen Umbruch ( ) schreibe,
werden die Einträge nicht mehr auf der Karte angezeigt.
Wahrscheinlich muss das   irgendwie abgefangen werden.
PHP-Code:
$beschreibung = $arrItem['text']['beschreibung'];
$info .= '<div class="beschreibung">' .$beschreibung .'</div>';
  ist kein Umbruch, sondern ein geschütztes Leerzeichen (non-break-space)...
wird gar nichts mehr ausgegeben oder kommen irgendwelche JS-Fehler?
MetaModels-Workshop: ... wo sich die nächste Gelegenheit bietet... oder Extern oder Online
Erweiterungen: Infos im Seitenbaum, Formular-Default für Select/Checkbox/Radio (SCR), Formular-Newsletteranmeldung, Regex-Formularwidget, Lizenzmanager für Isotope
Unterstützung per Github-Sponsoring: MetaModels Handbuch und Forum, e-spin Erweiterungen
Wenn es benutzt wird kommt garnichts mehr.
Und im Firebug sieht man das der JavaScript Fehler enthält.
MetaModels-Workshop: ... wo sich die nächste Gelegenheit bietet... oder Extern oder Online
Erweiterungen: Infos im Seitenbaum, Formular-Default für Select/Checkbox/Radio (SCR), Formular-Newsletteranmeldung, Regex-Formularwidget, Lizenzmanager für Isotope
Unterstützung per Github-Sponsoring: MetaModels Handbuch und Forum, e-spin Erweiterungen
gelöscht
Geändert von contao100 (08.08.2015 um 20:22 Uhr)
Habe es nochmal getestet und kommen doch keine Javascript Fehler.
Das Problem scheint nicht im $nbsp zu liegen. Wenn der p-Tag zwei mal gesetzt ist funktioniert es auch nicht:
<p>Beschreibung</p>
<p>Weitere Beschreibung</p>
Das funktioniert dahingegen:
<p>Beschreibung<br>Weitere Beschreibung</p>
Geändert von contao100 (08.08.2015 um 20:30 Uhr)
o.k. - komisches Verhalten...
bitte mal damit eingrenzen, ob das auch auftritt, wenn man eine dlh_googlemap "zu Fuß" - also "ganz normal" über die Erweiterung anlegt und einbaut
MetaModels-Workshop: ... wo sich die nächste Gelegenheit bietet... oder Extern oder Online
Erweiterungen: Infos im Seitenbaum, Formular-Default für Select/Checkbox/Radio (SCR), Formular-Newsletteranmeldung, Regex-Formularwidget, Lizenzmanager für Isotope
Unterstützung per Github-Sponsoring: MetaModels Handbuch und Forum, e-spin Erweiterungen
Wenn ich einen Eintrag über dlh_googlemaps erstelle läuft es einwandfrei!
Der Marker taucht auf und nach dem Klick erscheint die Infoblase mit dem Text der Beschreibung.
Hier kann ich auch Absätze bilden bzw. die Probleme tauchen nicht auf.
Es scheint doch ein Javascript Fehler aufzutreten:
SyntaxError: unterminated string literal
content: '<div class="gmap-infobox-content"><p class="id">ID: 18</p><
Geändert von contao100 (09.08.2015 um 19:00 Uhr)
https://www.google.de/?gws_rd=ssl#q=...string+literal
alles muss in eine Zeile
MetaModels-Workshop: ... wo sich die nächste Gelegenheit bietet... oder Extern oder Online
Erweiterungen: Infos im Seitenbaum, Formular-Default für Select/Checkbox/Radio (SCR), Formular-Newsletteranmeldung, Regex-Formularwidget, Lizenzmanager für Isotope
Unterstützung per Github-Sponsoring: MetaModels Handbuch und Forum, e-spin Erweiterungen
ein schöner "Dank" an alle Helfer wäre sicher ein kleines Wiki zum Thema unter http://de.contaowiki.org/MetaModels#Tipps_und_Tricks
MetaModels-Workshop: ... wo sich die nächste Gelegenheit bietet... oder Extern oder Online
Erweiterungen: Infos im Seitenbaum, Formular-Default für Select/Checkbox/Radio (SCR), Formular-Newsletteranmeldung, Regex-Formularwidget, Lizenzmanager für Isotope
Unterstützung per Github-Sponsoring: MetaModels Handbuch und Forum, e-spin Erweiterungen
Hallo zusammen,
mal eine Frage. Ist das Template von
http://metamodels.pyropixel.de/news-...al-part-9.html
noch aktuell.
In meiner Testumgebung wird immer nur 1 Marker angezeigt und Infoblasen werden bei Klick nicht geöffnet...
Jemand eine Idee?
Danke + Gruß Marco
PHP-Code:
<?php if ($this->items->getCount()): ?>
<script>
var arrInfoBoxes = new Array();
function gmap1_dynmap(gmap1) {
<?php
foreach($this->items->parseAll($this->getFormat(), $this->view) as $arrItem):
$name = htmlspecialchars($arrItem['text']['name'], ENT_QUOTES);
$url = $arrItem['text']['url'];
// check if url begins with http://
$parsedURL = parse_url($url);
if (empty($parsedURL['scheme'])) { $url = 'http://' . ltrim($url, '/'); }
$geolocation = $arrItem['text']['geolocation'];
$address = preg_replace( "/\r|\n/", "<br>", $arrItem['text']['address']);
$id = $arrItem['raw']['id'];
$info = '<div class="gmap-infobox-tip"></div>';
$info .= '<div class="gmap-infobox-content">';
$info .= '<p class="name">' .$name .'</p>';
$info .= '<p><a target="_blank" href="' .$url .'">' .$url .'</a></p>';
$info .= '<p>' .$address .'</p>';
$info .= '</div>';
?>
// Create Marker
var gmap1_<?php echo $id; ?>_marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $geolocation; ?>),
map: gmap1,
title:"<?php echo $name; ?>",
icon: new google.maps.MarkerImage(
'files/nail.png',
new google.maps.Size(11, 21),
new google.maps.Point(0,0),
new google.maps.Point(5,21)
)
});
// Create InfoBox
var gmap1_<?php echo $id; ?>_infobox1 = new InfoBox({
content: '<?php echo $info; ?>',
disableAutoPan: false,
maxWidth: 150,
boxClass: 'gmap-infobox',
pixelOffset: new google.maps.Size(-75, -5),
zIndex: null,
closeBoxMargin: '18px 8px 2px 2px',
closeBoxURL: 'http://www.google.com/intl/en_us/mapfiles/close.gif'
});
arrInfoBoxes[arrInfoBoxes.length] = gmap1_<?php echo $id; ?>_infobox1;
// Create Event Listener
google.maps.event.addListener(gmap1_<?php echo $id; ?>_marker, 'click', function() {
// close all info boxes
var i;
for (i = 0; i < arrInfoBoxes.length; i++) {
arrInfoBoxes[i].close();
}
gmap1_<?php echo $id; ?>_infobox1.open(gmap1, this);
})
<?php endforeach; ?>
}
</script>
<?php endif; ?>
könnte es JS-Error-Meldungen geben?
MetaModels-Workshop: ... wo sich die nächste Gelegenheit bietet... oder Extern oder Online
Erweiterungen: Infos im Seitenbaum, Formular-Default für Select/Checkbox/Radio (SCR), Formular-Newsletteranmeldung, Regex-Formularwidget, Lizenzmanager für Isotope
Unterstützung per Github-Sponsoring: MetaModels Handbuch und Forum, e-spin Erweiterungen
Soo Problem gelöst.
das eingebundene js File von google hat nicht mehr existiert.
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
stattdessen habe ich die infobox.js heruntergeladen und lokal eingebunden.
> Ergebnis: Alle Marker werden angezeigt.
wurde ersetzt durchPHP-Code:
// Create InfoBox
var gmap1_<?php echo $id; ?>_infobox1 = new InfoBox({
> Ergebnis: Bei Klick auf Marker wird die Infobox angezeigt.PHP-Code:
// Create InfoBox
var gmap1_<?php echo $id; ?>_infobox1 = new google.maps.InfoWindow({
MetaModels-Workshop: ... wo sich die nächste Gelegenheit bietet... oder Extern oder Online
Erweiterungen: Infos im Seitenbaum, Formular-Default für Select/Checkbox/Radio (SCR), Formular-Newsletteranmeldung, Regex-Formularwidget, Lizenzmanager für Isotope
Unterstützung per Github-Sponsoring: MetaModels Handbuch und Forum, e-spin Erweiterungen
Schau dir an, wie die Map, Marker und Infoboxen im neuen dlh_googlemaps Template eingebunden werden und schaue es dir dort ab.
Bitte!
Vor Anfragen im Forum HTML validieren.
Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.
Vielen Dank an alle Wunschlistenerfüller
Andreas Burg, Web Solutions
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
Lesezeichen