0
Google Maps und Marker
Hi in die Runde,
ich brauche mal eure Hilfe. Ich habe es geschafft eine Google Maps in Ninox zu integrieren die Koordinaten aus einer Tabelle ausliest und als Marker auf der Map ausgibt. Im Konkreten fall geht es um Veranstaltungslocations in Deutschland.
Wenn ich den Marker anklicke wird mir der Name der Location angezeigt. Gibt es die Möglichkeit, dass der Location Name mit einem Link hinterlegt ist und mich direkt zum Eintrag bringt, aus dem die Daten der Koordinaten kommen? Habt ihr da eine Idee?
Lg und danke fuer euren Input
Christoph
Der Code:
html("
<div id='map' style='height: 100%;'></div>
<script>
var locations = " +
formatJSON((select Locations).{
position: {
lat: lat,
lng: lon
},
title: Location
}) +
";
var map;
var icon = {
url: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png', // Roter Marker
scaledSize: new google.maps.Size(50, 50) // Größe anpassen (50x50 Pixel)
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
title: feature.title,
icon: icon,
map: map,
});
var infoWindow = new google.maps.InfoWindow({
content: feature.contentString,
})
marker.addListener('click', () => {
infoWindow.open({
anchor: marker,
map: map,
});
});
};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 51.1657, lng: 10.4515 }, // Zentrum auf Deutschland
zoom: 7, // Zoom-Level, um ganz Deutschland zu zeigen
});
locations.forEach(function(location) {
addMarker({
position: location.position,
title: location.title,
contentString: '<div>'+location.title+'</div>',
});
});
};
var mapsLink = 'https://maps.googleapis.com/maps/api/js?key=" +
myAPIkey +
"&callback=initMap';
if ($('script[src=""'+mapsLink+'""]').length === 0) {
let script = document.createElement('script');
script.src = mapsLink;
script.async = true;
script.defer = true;
document.body.append(script);
} else {
initMap()
}
</script>
")
1 Antwort
-
Netterweise konnte man mir im Englischen Forum weiter helfen und verwies mich auf diesen Beitrag Dashboard Template .
Ein paar kleine Anpassungen und schon lief alles
let myAPIkey := "XXXXX"; html(" <link rel='stylesheet' href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css' integrity='sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=' crossorigin=''/> <script src='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js' integrity='sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=' crossorigin=''></script> <div id='map' style='height: 100%; width: 100%;'></div> <script> var locations = " + formatJSON((select Locations).{ position: { lat: lat, lng: lon }, title: Location, recordId: Id }) + "; setTimeout(function(){ // Karte initialisieren var map = L.map('map').setView([51.1657, 10.4515], 7); // Zentrum: Deutschland // Google Maps Tile Layer einbinden L.tileLayer('https://maps.googleapis.com/maps/vt?lyrs=m&x={x}&y={y}&z={z}&key=" + myAPIkey + "', { maxZoom: 20, attribution: 'Map data © Google' }).addTo(map); // Marker hinzufügen var googlePin = L.icon({ iconUrl: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png', // Google Maps Marker iconSize: [32, 32], // Standardgröße ähnlich Google Maps iconAnchor: [16, 32] // Spitze des Icons auf dem Punkt }); locations.forEach(function(location) { var marker = L.marker([location.position.lat, location.position.lng], { icon: googlePin }) .addTo(map) .bindTooltip('<b>' + location.title + '</b>'); // Klick-Event für Ninox-Popup hinzufügen marker.on('click', function() { ui.popupRecord(location.recordId); }); }); }, 1000); </script> ")
Content aside
- gesternZuletzt aktiv
- 1Antworten
- 31Ansichten
-
1
Folge bereits