Route anzeigen zum Einsatzort

[Funkmann]

Den ganzen Tag habe ich im Forum nach html Dateien gesucht,
die man unter BosMon->mapTamplates einfügen kann um ein Kartenfenster
zu erhalten, welches die Route zum Einsatz anzeigt. Ich habe bereits sehr viele gefunden,
jedoch gab es immer Probleme...Oft wurde mir eine Script Fehler Meldung angezeigt..
JETZT meine Frage an alle: Besitzt irgendjemand eine html Datei womit es funktioniert.
Wenn ja, wäre es wirklich sehr nett wenn derjeniege sie hier ins Forum als Antwort reinschickt.
LG

[Lumin]

Es gibt sicher schon mehrere Templates im Forum.

Hier nochmal ein Google Map Routing Template, welches ich verwende:

Google Maps (Route).zip

(974 Bytes) 426-mal heruntergeladen

Wichtig:

Im Code muss die Variable startposition exakt die gleiche Start-Position wie in der Fenster-Konfiguration von BosMon haben. So wird die Route nur berechnet, wenn es sich um einen anderen Ort als die Start-Position handelt. Das ist im Code mit einem nicht zu übersehendem Kommentar markiert.

Im Code gibt's mehrere Kommentare, wo Anpassung vorgenommen werden könnten.

Damit die Google Karten funktionieren benötigst Du ja einen API Key. Ich gehe davon aus, Du hast diesen bereits für die Nutzung der in BosMon vorhandenen Templates erstellt. Für die vorhandenen Templates benötigt der Key nur Zugriff auf die "Maps JavaScript API", wenn Du das Routing verwenden möchtest, muss der Key auch für die "Directions API" in der Developer Console freigeschaltet werden.

[Funkmann]

Hey, vielen Dank für deine schnelle Antwort.
Ist es möglich den Directions API kostenlos zu
erhalten? Wenn ja, wie und wo?
LG

[Lumin]

Ja die API ist ebenfalls wie die "Maps JavaScript API" kostenlos. Man hat ein gewisses Kontingent für die Anfragen. Benötigt man mehr, kostet es etwas. Aber in der Regel ist das kostenlose Kontingent völlig ausreichend.

Schau einfach in die Google Developer Console. Dort kann man es für den Key aktivieren, sofern Du nicht eh schon alle APIs dafür aktiviert hast. Läuft eigentlich genau so wie bei der "Maps JavaScript API". Das hast Du ja vermutlich schon geschafft, sonst siehst Du auch keine andere Google Karte.

[Funkmann]

Habe die Karte jetzt eingefügt. Wenn jedoch ein Einsatz kommt springt die Karte
zwar zum Einsatzort hin, jedoch wird mir immernoch keine Route angezeigt. In der
Script Datei habe ich meine gewünschte Startposition in Koordinaten eingetragen, die selben auch bei Bosmon. Muss ich in der Script Datei vielleicht noch etwas machen oder habe ich irgendetwas anderes vergessen?

[Lumin]

• Kopier dir die HTML Datei
• Füge statt %param1% den key ein, den Du auch in BosMon hinterlegt hast
• Füge statt %koordinaten.latitude% und %koordinaten.longitude% beliebige Koordinatenwerte ein, jedoch nicht die Start-Koordinanten
• Öffne die HTML-Seite in einem Browser
• Schau, was die Console des Browser für Fehlermeldungen zurückgibt (ggf. googlen, wie man die Konsole in Deinem verwendeten Browser findet/nutzt)

[Funkmann]

Ich zähle einmal alles auf was ich bis jetzt gemacht habe:
- Deine Datei runtergeladen & entpackt
- Anstatt %param1% den API Schlüssel eingefügt (den gleichen den ich auch bei der normalen Karte, die mir den Einsatzort anzeigt, benutze.
- Anstatt %koordinaten.latitude% und %koordinaten.longitude% irgendwelche Koordinaten eingefügt.
- Bei var startposition meine Koordinaten eingefügt (die selben wie bei Bosmon hinterlegt)
- Bei Bosmon auf Fenster hinzufügen》Karten Fenster 》 Google Maps (Route) 》 Parameter= API KEY Startposition: meine Koordinaten (die selben die ich auch bei der Script Datei eingefügt habe)
Was du jetzt eben sagtest mit ,,html im Browser öffnen" habe ich nich ganz verstanden, denn wenn ich die Datei im Browser öffne wird mir einfach ein weißes Fenster angezeigt.

Immernoch habe ich das Problem das mir bei einem Alarm keine Route angezeigt wird, sondern einfach der Einsatzort...

Habe ich sonst noch was vergessen oder irgendetwas falsch gemacht?

[Lumin]

Das sollte alles außerhalb von BosMon geschehen. Das wäre nur ein Test. BosMon ersetzt die %-Variablen und zeigt, dann die HTML Datei an.

Meine Idee war, Du stellst das nach. Also Du ersetzt händisch die %-Variablen und lässt es Dir dann mit einem Browser anzeigen, da hat man bessere Debug Möglichkeiten als in BosMon. Sobald Du die %-Variablen händisch ersetzt hast, wird BosMon Dir nur noch die gleiche Route anzeigen. Deshalb solltest Du in ersten Schritt die Datei kopieren.

Hast Du mittlerweile die API aktiviert. Welche APIs ist Du aktiviert. Es dauert nach dem Aktivieren auch immer ein bisschen bis es wirklich aktiv ist. Siehe auch hier: viewtopic.php?f=4&t=2416&p=21284#p21284

[Funkmann]

Hier einmal meine Script Datei:

<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js ... nsor=false" type="text/javascript"></script>
<style type="text/css">
html, body, #map-canvas {
height: 100%;
margin: 0;
}
</style>
<script type="text/javascript">
function initialize() {
var startposition = {lat: 52.266837, lng: 8.049741}; // <<<<< exakt gleiche Start-Position wie in BosMon >>>>>
var zielposition = {lat: 52.279771, lng: 7.437361};

var latLngDest = new google.maps.LatLng(zielposition);
var latLngHome = new google.maps.LatLng(startposition);
var directionsService = new google.maps.DirectionsService();
var mapOptions = {
center: latLngDest,
zoom: 16, // Zoomstufe
disableDefaultUI: true, // Bedienelemente anzeigen (false) bzw. nicht anzeigen (true)
mapTypeId: google.maps.MapTypeId.ROADMAP // ROADMAP, SATELLITE, HYBRID, TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);

if (startposition.lat == zielposition.lat && startposition.lng == zielposition.lng) return;

var request = {
origin: startposition,
destination: zielposition,
travelMode: 'DRIVING' // DRIVING, BICYCLING, TRANSIT, WALKING
};
directionsService.route(request, function (result, status) {
if (status == 'OK') {
directionsRenderer.setDirections(result);
}
});
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

Habe ich hier vielleicht noch was vergessen einzusetzen?
Ich habe an der Datei nur folgendes verändert:
-Startposition eingefügt
-Zielposition eingefügt (einfach irgendwelche Kordinaten)
-API KEY eingefügt

Kann auch sein das es am API KEY liegt. Könnten sie mir vielleicht ihren API Key geben? Man kann einen ja öfter benutzen...Wenn sie das machen würden können sie ihn ja über Privatnachricht an mich schicken...

LG

[Lumin]

Ich habe eben die HTML-Datei geprüft.

Der Fehler liegt im Key: "InvalidKeyMapError"

Der Fehler lautet: The API key included in the script element that loads the API is not found. Please make sure you are using a correct API key. You can generate a new API key in the Google Cloud Platform Console.

Siehe auch hier:
https://developers.google.com/maps/docu ... -map-error

Aber niemals hier einen Key posten! Ich werde meinen Key auch nicht herausgeben. Nachdem Du ihn jetzt hier gepostet hast, musst Du Dir nun sowieso einen neuen erstellen. Jeder könnte Deinen Key jetzt verwenden und das kostenlose Kontingent aufbrauchen. Anschließend können Kosten anfallen.