Events: Übergabe des Parameters "Veranstaltungsort" an eine Google Map

Hallo an alle,
ich möchte in einem Eventreader nicht nur das volle Event darstellen, sondern auch gleichzeitig daneben eine Google Map. Dort sollte als Anfahrtsskizze ein Marker platziert werden, der die "location", also den ausgefüllten Veranstaltungsort mit Straße, PLZ und Ort, als Adresse übernimmt und darstellt.

Beispiel unter http://www.neu.vocality-jazz.de/term...ub-minden.html

Wie holt sich also die rechts dargestellte Karte die Adresse des jeweiligen Events und stellt sie dar?

Hallo Jens,

evtl. hilft dir das hier weiter. https://developers.google.com/maps/d...-to-maps?hl=de

Gruß Kester

Hallo Kester,

das ist zwar eine ausführlich Doku, die mir aber auf den ersten Blick nicht weiterhilft. Ich bin kein echter PHP-Programmierer und tüftele eher á la Lego mit vorhandenen Sachen herum. Das Beispiel ist auch etwas zu "aufgeblasen", weil es eine neue Datenbank erfordert, in der vorgekaute Adressen und Geokoordinaten eingepflegt sein müssen. Das ist in meinem Beispiel nicht vonnöten, den eigentlich sollen sich zwei Contao-Elemente kurz "befragen" und Informationen woanders einbauen – in dem Falle ein dargestelltes Event (dessen Adresse sich auch on the fly mal durchaus ändern könnte, zudem ist es eine menschenlesbare echte Adresse und keine Dezimalgrad-Koordinate).
Die Frage bleibt also eher, ob es ein Inserttag oder eine PHP-Funktion gibt, die das gerade dargestellt Event nach der "location" abklappert und diese der Googlemap als Adresse für den Marker auf den Weg gibt.
Ich gebe in einem Event den "Veranstaltungsort" ein, dieser wird auf der Seite extra ausgegeben (hier z. B.: <p class="location">Adresse: Gut Wienebüttel 1, 21339 Lüneburg</p>). Die Google Map lässt im Quelltext erkennen:

HTML-Code:

---

var geocoder = new google.maps.Geocoder();
geocoder.geocode(
{address: "30159 Hannover"},

---

Diese habe ich aus Testzwecken aber selber händisch im Modul eingetragen. Das Modul Google Map soll also, wenn es sich auf der Seite aufbaut, das Event irgendwie abfragen können.
Es ist kein Muss, aber durchaus eine nette Idee auch für andere Projekte, denn so kann man Veranstaltungen gleich eine Umgebungskarte mitgeben.

Hallo,

sorry Jens, ich musste soeben ein wenig in mich hineinschmunzeln ;)
Anhang 19924

... aber bitte diesen Ausflug in meine Gedankengänge jetzt nicht ernst nehmen - ich wollte einfach meiner Erheiterung nur mit euch teilen :D

nein, mal ernsthaft:
Dein Anliegen verstehe ich und kann ich auch nachvollziehen - da ich diese Anforderung ebenfalls schon mal bei einer Kundenanfrage hatte. Da ich damals keine Lösung finden konnte, erhielt ich auch den Auftrag nicht. Wobei ich erkennen durfte, dass das angefragte Projekt nie online gegangen ist - woraus ich schliesse, dass auch andere, der wohl angefragten Mitbewerbe, diese Anforderung nicht zu seinen Gunsten lösen konnten.
Hilft jetzt nichts zur Sache, aber scheinbar gibt es hierzu sehr wohl Bedarf.

zB:

PHP-Code:

---

<?php

$objEvent = \CalendarEventsModel::findByAlias(\Input::get('auto_item'));

if (null === $objEvent || !$objEvent->location)
{
    return;
}

?>

<iframe src="https://www.google.com/maps/embed/v1/place?key=YOUR_GOOGLE_MAPS_API_KEY&amp;q=<?= urlencode($objEvent->location) ?>" allowfullscreen></iframe>

---

Zitat:

---

Zitat von derRenner

sorry Jens, ich musste soeben ein wenig in mich hineinschmunzeln ;)

---

Haha, stimmt. Aber meine "Adresse" ist wenigstens noch eine echte Koordinate und keine Dezimalgradkoordinate. Als Kartograph habe ich halt ein Faible einerseits für solche Spielereien, stehe aber oftmals ratlos vor Google Earth und seinen mächtigen Geheimnissen.

Danke Spooky,

aber da es ein ziemlich volles Kauftemplate ist, habe ich mit Trial and Error mich an die Stelle vorgewagt und naturgemäß funktioniert es erst mal nicht.
Hier mein Frankenstein mit Deinen Vorschlägen im gesamten Template:

Code:

---

<div class="info-map <?php echo $this->class ?>"<?php echo $this->cssID ?>>

        <div class="info-map-gmap <?php if ($this->deactivateHover): ?> -no-hover<?php endif ?>"></div>

<?php
$objEvent = \CalendarEventsModel::findByAlias(\Input::get('auto_item'));
if (null === $objEvent || !$objEvent->location)
{
    return;
}
?>

        <script>
                (function() {
                        var mapElement = document.querySelectorAll && document.querySelectorAll('.info-map-gmap');
                        if (!mapElement || !mapElement.length) {
                                return;
                        }
                        mapElement = mapElement[mapElement.length - 1];
                        window.rsce_tao_info_map_queue = window.rsce_tao_info_map_queue || [];
                        window.rsce_tao_info_map_queue.push(function() {
                                var style = [
                                        {hue: '#1fa5d1'},
                                        {saturation: -80},
                                        {lightness: 10},
                                        {gamma: 0.8}
                                ];
                                var map = new google.maps.Map(mapElement, {
                                        zoom: <?php echo json_encode($this->zoomLevel * 1) ?>,
                                        scrollwheel: false,
                                        mapTypeControl: false,
                                        scaleControl: false,
                                        overviewMapControl: false,
                                        panControl: false,
                                        rotateControl: false,
                                        streetViewControl: false,
                                        zoomControl: false,
                                        styles: [
                                                {featureType: 'landscape', stylers: style},
                                                {featureType: 'road.highway', stylers: style},
                                                {featureType: 'road.arterial', stylers: style},
                                                {featureType: 'road.local', stylers: style},
                                                {featureType: 'water', stylers: style},
                                                {featureType: 'poi', stylers: style}
                                        ]
                                });
                                var geocoder = new google.maps.Geocoder();
                                geocoder.geocode(
                                        {address: <?php echo $objEvent->location ?>},
                                        function(results, status) {
                                                if (status == google.maps.GeocoderStatus.OK) {
                                                        map.setCenter(results[0].geometry.location);
                                                        var marker = new google.maps.Marker({
                                                                map: map,
                                                                position: results[0].geometry.location
                                                        });
                                                }
                                        }
                                );
                        });
                        window.rsce_tao_info_map_init = function () {
                                for (var i = 0; i < window.rsce_tao_info_map_queue.length; i++) {
                                        window.rsce_tao_info_map_queue[i]();
                                }
                        };
                        if (!document.getElementById('rsce_tao_info_map_script')) {
                                var scripts = document.getElementsByTagName('script');
                                var script = document.createElement('script');
                                script.id = 'rsce_tao_info_map_script';
                                script.type = 'text/javascript';
                                script.async = true;
                                script.src = '//maps.googleapis.com/maps/api/js?key=<?php echo $this->apiKey ?>&sensor=false&callback=rsce_tao_info_map_init';
                                scripts[0].parentNode.insertBefore(script, scripts[0]);
                        }
                })();
        </script>

        <div class="info-map-boxes">

                <?php foreach ($this->boxes as $index => $box): ?>

                        <?php $className = 'info-map-boxes-item ' . $this->getColumnClassName($index) ?>
                        <?php if ($box->url): ?>
                                <a class="<?php echo $className ?>" href="<?php echo $box->url ?>"<?php if ($box->icon): ?> data-icon="&#x<?php echo $box->icon ?>;"<?php endif ?><?php if ($box->newWindow): ?> target="_blank"<?php endif ?>><section>
                        <?php else: ?>
                                <section class="<?php echo $className ?>"<?php if ($box->icon): ?> data-icon="&#x<?php echo $box->icon ?>;"<?php endif ?>>
                        <?php endif ?>

                                <?php if ($box->headline): ?>
                                        <h3><?php echo $box->headline ?></h3>
                                <?php endif ?>
                                <?php if ($box->text): ?>
                                        <?php echo $box->text ?>
                                <?php endif ?>
                                <?php if ($box->linkLabel): ?>
                                        <p class="info-map-boxes-item-link"><?php echo $box->linkLabel ?></p>
                                <?php endif ?>

                        <?php if ($box->url): ?>
                                </section></a>
                        <?php else: ?>
                                </section>
                        <?php endif ?>

                <?php endforeach ?>

        </div>

</div>

---

Ich bin aber noch auf eine andere Stelle gestoßen, an der man tätig werden könnte, nämlich das Script, was die Eingabe im Backend offenbar generiert. Auch hier wird die Textfeldeingabe für eine Adresse aufgebaut, vielleicht kann man hier schon ansetzen. Auszug:

Code:

---

return array(
        'label' => array(
                'Google Map mit Textboxen',
                'Erzeugt eine vollflächige Google Map mit Textboxen',
        ),
        'types' => array('content', 'module'),
        'standardFields' => array('cssID', 'columns'),
        'fields' => array(
                'mapAddress' => array(
                        'label' => array('Adresse oder Koordinaten der GoogleMap', 'z.B.: "Berlin, Deutschland" oder "Spandauer Straße 1, Berlin, Deutschland"'),
                        'inputType' => 'text',
                        'eval' => array('tl_class' => 'w50'),
                ),

---

Dennoch bleibe ich eher als Hobbybastler hier ratlos stehen. Wie gesagt, die Karte ist in meinem Projekt kein Muss, sondern nur eine Idee.

Der PHP Code sollte an den Anfang des Templates, sonst bekommst du invalides HTML, wenn das Event keine Location hat. Darüberhinaus fehlen dir wohl bei der Ausgabe der Location im JavaScript die Anführungszeichen.

Zitat:

---

Zitat von Spooky

Der PHP Code sollte an den Anfang des Templates, sonst bekommst du invalides HTML, wenn das Event keine Location hat. Darüberhinaus fehlen dir wohl bei der Ausgabe der Location im JavaScript die Anführungszeichen.

---

Genial! danke, Spooky, jetzt funktioniert es mit jedem Terminaufruf. An Anführungszeichen habe ich nicht gedacht, weil im Originaltemplate trotz einer PHP-Zeile dort auch keine standen, es hieß dort:

Code:

---

{address: <?php echo json_encode($this->mapAddress) ?>}

---

Mein Template sieht jetzt funktionsfähig so aus (rot, was Spooky eingebracht hat:

Code:

---

<?php
$objEvent = \CalendarEventsModel::findByAlias(\Input::get('auto_item'));
if (null === $objEvent || !$objEvent->location)
{
    return;
}
?>

<div class="info-map <?php echo $this->class ?>"<?php echo $this->cssID ?>>

        <div class="info-map-gmap <?php if ($this->deactivateHover): ?> -no-hover<?php endif ?>"></div>

        <script>
                (function() {
                        var mapElement = document.querySelectorAll && document.querySelectorAll('.info-map-gmap');
                        if (!mapElement || !mapElement.length) {
                                return;
                        }
                        mapElement = mapElement[mapElement.length - 1];
                        window.rsce_tao_info_map_queue = window.rsce_tao_info_map_queue || [];
                        window.rsce_tao_info_map_queue.push(function() {
                                var style = [
                                        {hue: '#141516'},
                                        {saturation: -80},
                                        {lightness: 10},
                                        {gamma: 0.8}
                                ];
                                var map = new google.maps.Map(mapElement, {
                                        zoom: <?php echo json_encode($this->zoomLevel * 1) ?>,
                                        scrollwheel: false,
                                        mapTypeControl: false,
                                        scaleControl: true,
                                        overviewMapControl: false,
                                        panControl: true,
                                        rotateControl: false,
                                        streetViewControl: false,
                                        zoomControl: true,
                                        styles: [
                                                {featureType: 'landscape', stylers: style},
                                                {featureType: 'road.highway', stylers: style},
                                                {featureType: 'road.arterial', stylers: style},
                                                {featureType: 'road.local', stylers: style},
                                                {featureType: 'water', stylers: style},
                                                {featureType: 'poi', stylers: style}
                                        ]
                                });
                                var geocoder = new google.maps.Geocoder();
                                geocoder.geocode(
                                        {address: '<?php echo $objEvent->location ?>'},
                                        function(results, status) {
                                                if (status == google.maps.GeocoderStatus.OK) {
                                                        map.setCenter(results[0].geometry.location);
                                                        var marker = new google.maps.Marker({
                                                                map: map,
                                                                position: results[0].geometry.location
                                                        });
                                                }
                                        }
                                );
                        });
                        window.rsce_tao_info_map_init = function () {
                                for (var i = 0; i < window.rsce_tao_info_map_queue.length; i++) {
                                        window.rsce_tao_info_map_queue[i]();
                                }
                        };
                        if (!document.getElementById('rsce_tao_info_map_script')) {
                                var scripts = document.getElementsByTagName('script');
                                var script = document.createElement('script');
                                script.id = 'rsce_tao_info_map_script';
                                script.type = 'text/javascript';
                                script.async = true;
                                script.src = '//maps.googleapis.com/maps/api/js?key=<?php echo $this->apiKey ?>&sensor=false&callback=rsce_tao_info_map_init';
                                scripts[0].parentNode.insertBefore(script, scripts[0]);
                        }
                })();
        </script>

        <div class="info-map-boxes">

                <?php foreach ($this->boxes as $index => $box): ?>

                        <?php $className = 'info-map-boxes-item ' . $this->getColumnClassName($index) ?>
                        <?php if ($box->url): ?>
                                <a class="<?php echo $className ?>" href="<?php echo $box->url ?>"<?php if ($box->icon): ?> data-icon="&#x<?php echo $box->icon ?>;"<?php endif ?><?php if ($box->newWindow): ?> target="_blank"<?php endif ?>><section>
                        <?php else: ?>
                                <section class="<?php echo $className ?>"<?php if ($box->icon): ?> data-icon="&#x<?php echo $box->icon ?>;"<?php endif ?>>
                        <?php endif ?>

                                <?php if ($box->headline): ?>
                                        <h3><?php echo $box->headline ?></h3>
                                <?php endif ?>
                                <?php if ($box->text): ?>
                                        <?php echo $box->text ?>
                                <?php endif ?>
                                <?php if ($box->linkLabel): ?>
                                        <p class="info-map-boxes-item-link"><?php echo $box->linkLabel ?></p>
                                <?php endif ?>

                        <?php if ($box->url): ?>
                                </section></a>
                        <?php else: ?>
                                </section>
                        <?php endif ?>

                <?php endforeach ?>

        </div>

</div>

---

Zitat:

---

Zitat von Jens Pielawa

n Anführungszeichen habe ich nicht gedacht, weil im Originaltemplate trotz einer PHP-Zeile dort auch keine standen, es hieß dort:

Code:

---

{address: <?php echo json_encode($this->mapAddress) ?>}

---

---

Ja, weil dort json_encode benutzt wurde ;)

Zitat:

---

Zitat von Jens Pielawa

Hallo an alle,
ich möchte in einem Eventreader nicht nur das volle Event darstellen, sondern auch gleichzeitig daneben eine Google Map. Dort sollte als Anfahrtsskizze ein Marker platziert werden, der die "location", also den ausgefüllten Veranstaltungsort mit Straße, PLZ und Ort, als Adresse übernimmt und darstellt.

Beispiel unter http://www.neu.vocality-jazz.de/term...ub-minden.html

Wie holt sich also die rechts dargestellte Karte die Adresse des jeweiligen Events und stellt sie dar?

---

Hallo Jens,

habe lange rumgetüftelt und das mit zusammen mit Metamodels gelöst.
Bsp.: https://www.students-freiburg.de/eve...sti-party.html

Bei Interesse kann ich dir mal paar Tips zur Umsetzung geben.