Ergebnis 1 bis 11 von 11

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

  1. #1
    Contao-Fan Avatar von Jens Pielawa
    Registriert seit
    08.01.2010.
    Ort
    9°45'34"E 52°20'12"N
    Beiträge
    531

    Frage 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?
    Beste Grüße von

  2. #2
    Alter Contao-Hase Avatar von kmielke
    Registriert seit
    21.06.2009.
    Beiträge
    1.173

    Standard

    Hallo Jens,

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

    Gruß Kester
    Gruß Kester

    Kein Support via PN ohne vorherige Absprache.

  3. #3
    Contao-Fan Avatar von Jens Pielawa
    Registriert seit
    08.01.2010.
    Ort
    9°45'34"E 52°20'12"N
    Beiträge
    531

    Standard

    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.
    Geändert von Jens Pielawa (29.09.2017 um 20:02 Uhr)
    Beste Grüße von

  4. #4
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.858
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo,

    sorry Jens, ich musste soeben ein wenig in mich hineinschmunzeln
    2017-09-30 08_42_32-3.5.x Events_ Übergabe des Parameters _Veranstaltungsort_ an eine Google Ma.jpg

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

    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.
    Grüsse
    Bernhard


  5. #5
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.088
    Partner-ID
    10107

    Standard

    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>

  6. #6
    Contao-Fan Avatar von Jens Pielawa
    Registriert seit
    08.01.2010.
    Ort
    9°45'34"E 52°20'12"N
    Beiträge
    531

    Standard

    Zitat Zitat von derRenner Beitrag anzeigen
    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.
    Beste Grüße von

  7. #7
    Contao-Fan Avatar von Jens Pielawa
    Registriert seit
    08.01.2010.
    Ort
    9°45'34"E 52°20'12"N
    Beiträge
    531

    Standard

    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.
    Beste Grüße von

  8. #8
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.088
    Partner-ID
    10107

    Standard

    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.

  9. #9
    Contao-Fan Avatar von Jens Pielawa
    Registriert seit
    08.01.2010.
    Ort
    9°45'34"E 52°20'12"N
    Beiträge
    531

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    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>
    Beste Grüße von

  10. #10
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.088
    Partner-ID
    10107

    Standard

    Zitat Zitat von Jens Pielawa Beitrag anzeigen
    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

  11. #11
    Contao-Fan
    Registriert seit
    20.10.2014.
    Beiträge
    484

    Standard

    Zitat Zitat von Jens Pielawa Beitrag anzeigen
    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.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •