Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 02. April 2019 08:07

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

LISE: Google Maps einbauen / Checkbox-Group aufteilen

Hallo!

Ich hätte zwei Fragen zu LISE:
Ich würde gerne ein Feld anlegen in dem man die Koordinaten oder den Link (was am Besten funktioniert) für einen Standort auf Google Maps (OSM) eingeben kann.

Leider funktioniert das ja seitens Google ja nur mit einem iframe (bei OSM auch).
Jetzt wäre es cool den iframe-Link selbst zu erstellen, jedoch funktioniert das leider nicht.

Hat da jemand Erfahrung damit?

Und wie teile ich die Werte eine Checkbox-Group in der Anzeige auf. Es ist ja quasi ein Array mit den Werten, die ausgewählt wurden.
Ich möchte diese Werte in jeweils einem div ausgeben.
Wie teile ich das auf?

Vielen Dank!

Beitrag geändert von brandy (02. April 2019 09:35)

Offline

#2 16. April 2019 09:24

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: LISE: Google Maps einbauen / Checkbox-Group aufteilen

Hat noch keiner Google-Maps mit LISE verwendet?

Offline

#3 17. April 2019 08:06

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.435

Re: LISE: Google Maps einbauen / Checkbox-Group aufteilen

Das Problem ist nicht LISE, das Problem ist, dass Dein Vorhaben bei Google nicht ohne Google Maps Api Key funktioniert.
Man kann nicht einfach einen Link zu einer Google-Map selber zusammenbasteln und das dann via iFrame einbetten.
D.h. man könnte schon, aber dann hat man eben das vollständige Google-Maps inklusive aller Google-Menüs im iFrame und nicht nur den Kartenausschnitt.

Bei OSM braucht man zwar nicht unbedingt einen Key, aber am Ende läuft es bei beiden darauf hinaus, dass man die Map nicht vie iFrame einfach einbettet, sondern via Javascript generiert. (Google Maps API - kann angeblich sogar auch OSM Maps anzeigen; oder z.B. OpenLayers)

Vielleicht erinnerst Du Dich ja an dieses Thema hier wink
Da kam doch auch OpenLayers und OSM zum Einsatz.
Ich hatte hier ein Beispiel: http://jsfiddle.net/KWX47/
Dieser Teil dürfte für Dich relevant sein:

    map = new OpenLayers.Map("ID DES DIVS WO DIE MAP REIN SOLL");
    var mapnik = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);
    var clonlat = new OpenLayers.LonLat([LÄNGENGRAD], [BREITENGRAD]).transform( new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913") );
    var zoom = 12;
    map.setCenter(clonlat, zoom);

Bei [LÄNGENGRAD] und [BREITENGRAD] müssen dann die Inhalte aus den Feldern von LISE rein.
Das wäre die meiner Meinung nach einfachste Variante.

Wenn Du es komfortabler haben willst, also z.B. mit Addresse, wirst Du um einen entsprechenden Geocoding-Dienst nicht herumkommen. D.h. Längen und Breitengrad musst Du erst mit einer gesonderten Anfrage aus der Addresse ermitteln. Z.B: nominatim.openstreetmap.org
Hier mal ein Beispiel (nutzt jQuery um die Koordinaten zu ermitteln):
http://jsfiddle.net/vxzgy9aw/1/
Empfehlen kann ich auch noch dieses Beispiel hier:
https://jsfiddle.net/jonataswalker/c4qv9afb/

Beitrag geändert von NaN (17. April 2019 09:11)


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#4 17. April 2019 08:08

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: LISE: Google Maps einbauen / Checkbox-Group aufteilen

Ah, okay!
Vielen Dank, die Antwort hat mir schon mal gewaltig weitergeholfen!

Offline

#5 20. April 2019 22:53

Janl
Server-Pate
Ort: Freistadt, Österreich
Registriert: 13. Dezember 2010
Beiträge: 1.227
Webseite

Re: LISE: Google Maps einbauen / Checkbox-Group aufteilen

Bei mir gibt es kein iFrame.

im Template:

[== de ==]
html

{* untere ist fuer osm ********************************************}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
   integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
   crossorigin=""/>
{*---------- *}
<!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
   integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
   crossorigin=""></script>
{* ende der osmkode ************************}
  </head>
  <body onload="drawmap();">

Dann ein Contentblock mit dem Plan:

[== de ==]
html

<div id='mapid' style='width:95%;height:400px;'></div>
{literal}
<script type="text/javascript">// <![CDATA[
	var mymap = L.map('mapid').setView([50.00001, 15.00001], 15);

	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="https://mapbox.com">Mapbox</a>',
		id: 'mapbox.streets'
	}).addTo(mymap);

	L.marker([50.00001, 15.00001]).addTo(mymap)
		.bindPopup("<b>Name,<br />Adresse<br />Wohnort</b>").openPopup();

	var popup = L.popup();

	function onMapClick(e) {
		popup
			.setLatLng(e.latlng)
			.setContent("You clicked the map at " + e.latlng.toString())
			.openOn(mymap);
	}
	mymap.on('click', onMapClick);
// ]]></script>
{/literal}

evt. eine eigene "access-token" holen.

Viel Spaß
Jan

Beitrag geändert von Janl (21. April 2019 23:11)


Ubuntu 16.04 KDE - Kubuntu 18.04 / win10 (1 duo-boot laptop)- LAMP
Raspi 4b mit Ubuntu 20.04 (64bit) und Mate.

Offline

#6 20. April 2019 21:39

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: LISE: Google Maps einbauen / Checkbox-Group aufteilen

Gut, und ich könnte den Linkteil mit mit einem Textfeld einsetzbar machen, da ich diesen dynamisch laden möchte.

Offline