Google Maps im WebFront mit Routenberechnung

sanman · 4. Juli 2010 um 16:12

Hallo zusammen,

folgendes Script nutze ich um über das WebFront mit Hilfe von Google Maps
Ziele zu suchen oder Routen zu berechnen.

Um die Google Map API zu nutzen muss man als erstes sich einen Google Map
API Key erstellen. Über folgende Webseite kann man sich einen API Key erstellen
Anmelden fÃ¼r Google Maps-API - Google Maps-API - Google Code
Bitte darauf achten, dass man unter URL die IP des IPS Servers angibt.

Installationsanleitung.

Dummy Module erstellen
Variable (String) Start und Ziel anlegen und das Variablen Profil „~Textbox“ verknüpfen.
Beiden Variablen unter „Eigene Aktion“ folgendes Script zuweisen:


<?
//Script zum WERTEZUWEISEN aus dem Webfrontend
if($IPS_SENDER == "WebFront")
{
    SetValue($IPS_VARIABLE, $IPS_VALUE);
}
?>

Ein Script anlegen mit folgendem Inhalt:


<iframe src="user/googlemap/googlemap.php" border="0" frameborder="0" style="top: 0pt; bottom: 0pt; left: 0pt; right: 0pt; width: 100%; height: 100%;" />

Bitte nur den oben stehenden Inhalt einfügen, keine <? ?>.

Im Ordner webfront → user eine Datei mit dem Namen „user.css“ anlegen:


html, body
{
	font: normal 14px verdana;
	color: #ffffff;
	background: black;
}

body
{
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}

a:link, a:visited, a:active, a:hover
{
	color: #7faaff;
	text-decoration: none;
}

a:hover
{
	color: #4f7acf;
}

.barBottom
{
	border-color: #FFFFFF;
	border-style: solid;
	border-width: 1px 0px 0px 0px;
	height: 40px;
	background-color: #3C4B60;
	background-image: url("../../img/barBottomBottom.png");
	background-repeat: repeat-x;
	position: absolute;
	bottom: 0;
	width: 100%;
	left: 0;
	right: 0;
	display: block;
	z-index: 1;
}

.barBottomOption
{
	display: inline-block;
	font: 14px verdana;
	height: 38px;
	padding: 0 11px;
	position: relative;
	top: 1px;
	white-space: nowrap;
}

.barBottomOptionIcon
{
	width: 38px;
	margin: 4px 4px 4px 0;
	position: absolute;
	top: 0;
}

.barText
{
	display: inline-block;
	line-height: 38px;
	padding-left: 38px;
}

.barIcon
{
	height: 32px;
	width: 32px;
}

.mapLayer
{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	float: none;
}

.mapRouteLayer
{
	position: absolute;
	display: none;
	top: 6%;
	left: 20%;
	background-color: #000000;
	border:1px solid #FFFFFF;
	height: 80%;
	width: 60%;
	float: none;
}

Im Ordner webfront → user einen Ordner „googlemap“ erstellen
in diesem Ordner eine Datei mit dem Namen „googlemap.php“ erstellen:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Routeninformation</title>
	<style type="text/css">@import "../../user/user.css";</style>
    <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=XXXXXXXXXXXXXXXXXXXXXXXXX"></script>
    <script type="text/javascript">

	// Funktion zum oeffnen und schließen des Routen Panel
	var openroute = 0;
	
	function OpenRouteToggle()
		{
		if (!openroute)
			{
			document.getElementById('route').style.display = 'block';
			openroute = 1;
			}
		else
			{
			document.getElementById('route').style.display = 'none';
			openroute = 0;
			}
		}
			
	// Daten aus IPS laden
	<?php
		// Daten fuer Navigation laden
		$start = GetValue(23564 /*[WebFrontEnd\Tools\Navigation\Start]*/);
		$ziel = GetValue(12946  /*[WebFrontEnd\Tools\Navigation\Ziel]*/);
		// Daten zuruecksetzen
		// Wenn man möchte kann man hier eine feste Startadresse setzen lassen
		SetValue(23564 /*[WebFrontEnd\Tools\Navigation\Start]*/, "");
		SetValue(12946  /*[WebFrontEnd\Tools\Navigation\Ziel]*/, "");
	?>
	
    var map;
    var directionsPanel;
    var directions;
    
    function initialize() {
      map = new GMap2(document.getElementById("map"));
	  map.addControl(new GSmallZoomControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(20,20)));
	  map.addControl(new GMapTypeControl());
      directionsPanel = document.getElementById("route");
      directions = new GDirections(map, directionsPanel);
      directions.load("<?php echo "from: ".$start." to: ".$ziel."" ?>");
    }
    
    </script>
  </head>
  <body scroll="no" onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
	<div class='barBottom'>
		<div class='barBottomOption' onclick="OpenRouteToggle()">
			<span class="barBottomOptionIcon">
				<img class="barIcon" src="../../data/icon.php?name=Information&theme=png">
			</span>
			<span class="barText">Routeninformationen</span>
		</div>
	</div>
    <div id="map" class="mapLayer"></div>
    <div id="route" class="mapRouteLayer"></div>
    <br/>
  </body>
</html>

In dieser Datei bitte das XXXXXXX durch den eigenen API Key ersetzen.
Bitte ebenfalls die IDs zu den Start und Ziel Variablen anpassen.

Dummy Module, Script und Variablen noch Icons zuweisen.

Viel Spaß.
Bei Problemen, einfach fragen.

Gruss
Michael

pleibling · 4. Juli 2010 um 18:40

sehr schick :).

wgreipl · 4. Juli 2010 um 21:30

Hallo Michael,

sehr schöner Ansatz für die schnelle Routensuche auf dem Touch in der Küche.

Kommt mir definitiv drauf.

JPaeper · 22. Juli 2010 um 17:56

Hallo Michael,

tolle Geschichte! Kannst Du mir aber bitte noch mal erklären, was ich bei der Anmeldung für die Google-Maps-Api als URL angeben soll? Meine IP wechselt doch täglich… oder sollte es die dyndns-Adresse sein?
Beispiel wäre schön…

Joachim

wgreipl · 22. Juli 2010 um 18:01

Hallo Joachim,

kommt darauf an ob Du MAPS nur in deinem eigenen LAN nutzen möchtest oder auch von Extern.

Nutzt Du Webfront nur im eigenen LAN reicht die interne IP-Adresse deines IP-Symcon-Rechners.

Möchtest Du MAPS auch von extern nutzen muss deine DynDNS-Adresse bei Google registriert werden. Danach solltest Du auch intern deine DynDNS-Adresse für den Aufruf von Webfront nutzen ansonsten funktioniert MAPS wieder nicht da Du es mit der internen Adresse aufrufen würdest.

sanman · 22. Juli 2010 um 19:03

Genau wie Werner sagt. Danke.

Gruss
Michael

JPaeper · 22. Juli 2010 um 19:03

Hallo Werner,

vielen Dank für Deine (superschnelle) Antwort.

Ich habe es nun mal versucht, leider bekomme ich die Fehlermeldung, „Für diese Website ist ein anderer Google Maps-API-SChlüssel erforderlich…“.

Im Prinzip habe ich ja zwei Adressen, intern:
http://192.168.178.29:82/webfront.php
und extern:
http://xxxxx.dnsalias.com:8084/webfront.php

Die externe Adresse hatte ich bei Google angegeben…
(Nutzen würde ich es am Ende aber intern und wenn möglich auch extern…)

Außerdem werden in der Textbox Orte mit Umlauten falsch dargestellt, z.B. „Lüneburg“ wird als „L?urg“ angezeigt…

Wo liegt mein Fehler?

Joachim

Nachtrag: @Michael: Da hat sich gerade etwas überschnitten…

sanman · 22. Juli 2010 um 19:20

Hallo Joachim,

du musst mit dem DNS Namen arbeiten.
Fallst Du einen DNS Server zuhause hast, musst Du dort für die Domain
xxxxx.dnsalias.com die IP Adresse 192.168.178.29 registrieren.
Evtl. stellt diese Funktion auch Dein Router bereit.

Die nächste Lösung wäre die lokale host Datei unter:
C:\Windows\System32\drivers\etc
Dort folgenden Eintrag hinzufügen:


192.168.178.29 xxxxx.dnsalias.com

Allerdings funktioniert diese Lösung an diesem PC nur intern.

Fallst Du noch Fragen hast, einfach melden.

Gruss
Michael

wgreipl · 22. Juli 2010 um 19:39

Joachim,

hast Du beim registrieren auch nur den DynDNS-Namen angegeben also ohne Port und webfront.php?

JPaeper · 22. Juli 2010 um 19:40

Hallo Michael,

vielen Dank auch Dir für die Antwort. Leider kann ich Dir nicht mehr so ganz folgen…
Mit den oben genannten Links erreiche ich den IPS-Rechner sowohl intern (ohne Kennwortabfrage) als auch extern (dann mit Kennwortabfrage). Hier ist eine Fritz!Box intalliert, die dann eine entsprechende Portumleitung auf den IPS-Rechner vollzieht…

Kann ich nicht irgend eine andere Domain angeben?

Joachim

JPaeper · 22. Juli 2010 um 19:41

Hallo Werner,

bei Google habe ich die komplette Adresse eingegeben:
http://xxxxx.dnsalias.com:8084/webfront.php

Joachim

wgreipl · 22. Juli 2010 um 19:42

Also ich hatte nur den DynDNS-Alias angegeben, sprich ohne Port.

Vielleicht klappt es so

JPaeper · 22. Juli 2010 um 19:50

Hallo Werner,

ich habe es jetzt mal mit der „Kurzform“ probiert, damit funktioniert der „externe“ Zugriff, intern kommt wieder die Fehlermeldung…
Desweiteren habe ich das Problem, dass das Fenster nur zum Teil ausgenutzt wird (siehe Screenshot).
Und es bleibt das „Umlautproblem“…

Joachim

P.S.: Muss gleich mal kurz weg…

JPaeper · 22. Juli 2010 um 19:52

…Screenshot vergessen…

wgreipl · 24. Juli 2010 um 12:54

Da spielt dir der Internet Explorer einen Streich.

Test es mal mit Firefox 3.6.x da funktioniert es.

Das Problem mit den Umlauten habe ich auch, mußte die Adresse mit ue statt ü schreiben dann funktioniert es.

@ip-symcon: Das Umlautproblem kommt von dem Eingabeprofil, habe es in die Projektverwaltung eingestellt.

JPaeper · 24. Juli 2010 um 14:31

Hallo Werner,

versuchen „wir“ es mal „Schritt-für-Schritt“ anzugehen…

Das „Umlaut-Problem“ ist entsprechend platziert (und sollte dann unabhängig von uns gelöst werden)…
Das Problem mit der „Startposition“ (intern/extern) könnte man doch lösen, wenn man wüßte „wo man startet“, also zwei verschiedene Skripte googlemap.php jeweils für intern und extern mit zwei verschiedenen Google-Keys anlegen.
Aber wie könnte man die „Startposition“ unterscheiden? Gibt es eine Funktion zur Feststellung der aktuell verwendeten Adresse? (Ich habe dazu in der Doku nichts passendes gefunden)
Das Problem der Browser sollte doch auch irgendwie zu lösen sein…(da fällt mir aber derzeit nicht mal ein Ansatz ein). Wo wird die Größe denn bestimmt?

Joachim

wgreipl · 24. Juli 2010 um 15:51

Hallo Joachim,

ich verstehe das Problem nicht.

Ich rufe mein Webfront egal ob von intern wie auch von extern immer mit der DynDNS-Adresse auf. Klappt hervorragend. Hast Du Probleme mit dem internen Aufruf deines Webfronts mit der DynDNS-Adresse?

Diesbezüglich müßte man die Javascript-Parts im Skript anpassen und die inkompatibilitäten der verschiedenen Browser abfragen.

Da ich nur FF nutze ist das kein Thema für mich. Vielleicht könnte sich Michael (sanman) der Sache annehmen.

JPaeper · 25. Juli 2010 um 13:36

Hallo Werner,

grundsätzlich finde ich es problematisch, wenn man sich für eine sehr schöne und nützliche - aber sicherlich auch verzichtbare - Anwendung (keine „Kernfunktion“) zu sehr einschränken muss.
In der Ausgangssituation war es doch so:

keine Umlaute (wird ja nun „gefixt“)
kein IE, sondern Firefox (passiert vielleicht ja in der Richtung noch was)
Aufruf nur über Dyndns, also über extern…
(Das mit dem intern und extern hat sich bei mir mal so ergeben, weil die DSL-Anschlüsse hier eine Zeit häufig gestört waren.)

Die nächste (virtuelle jetzt ausgedachte) Anwendung funktioniert dann vielleicht nur im IE und nur über intern… Und was dann?

Von daher bin ich immer bemüht (was mir aber mangels Erfahrung noch nicht immer gelingt) eine Anwendung möglichst von solchen Restriktionen zu befreien…

Ich hoffe, das erklärt so meine grundsätzlichen „bedenken“.

Joachim

duk64 · 12. Januar 2011 um 18:25

Hallo sanman,

Ich habe ein anderes Problem.
Ich bekomme weder eine Map im Fenster angezeigt, noch eine Routeninfo.
Die Fläche ist hellgrau mit + und - Button.
Woran kann das denn liegen?

Gruß
duk64

sanman · 12. Januar 2011 um 21:12

Evtl. keine Start oder Zieladresse angegeben?

Gruss
Michael