googelmaps mit verkehr ?

[spion77]

Hi

ich habe eine frage wie kann ich einen google maps link bei fhem einfügen so das mir ein bestimmter ausschnitt der google maps karte angezeigt wird das wichtige ist aber das die verkehrslage auch mit angezeigt wird

wenn ich z.b folgenden link einfüge bekomme ich keine map dagestellt

Code Auswählen Erweitern

define google weblink iframe https://www.google.de/maps/place/Frankfurt+am+Main/@50.1081127,8.6879764,14z/data=!4m2!3m1!1s0x47bd096f477096c5:0x0422435029b0c600!5m1!1e1


benuzte ich es so  bekomme ich zwar die Karte aber keine verkehrslage

Code Auswählen Erweitern

define googelohnestau weblink htmlCode <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d20470.672574384607!2d8.687976379113731!3d50.10811266795061!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sde!2sde!4v1426518663448" width="600" height="450" frameborder="0" style="border:0"></iframe>

habe gegoogelt und eine seite gefunden hier http://www.sandoba.de/blog/produktinfos-und-updates/eigene-karten-auf-ihrer-webseite-anzeigen-mit-der-google-maps-api/aber ich verstehe nicht wie ich das mit dem container oder dem link einfügen sollte ? kann mir da jemand einen Tip geben ?


Vielen Dank

[JoWiemann]

Hallo,

der Link verwaist auf ein Shopsystem (kostenpflichtiges WEB-Produkt) in dem man über einen "Container" Google-Maps einbinden kann. Das geht so dann nur mit diesem Shopsystem. Für Fhem jedenfalls nicht.

Grüße Jörg

[spion77]

Schade  Danke dir das es kostenpflichtig ist hatte ich gesehen hatte nur gedacht es hat jemand eine Idee hat wie es noch gehen könnte
Danke dir

[JoWiemann]

Hallo,

meine Antwort bezog sich auf Deinen Link und die Frage nach dem dort beschriebenem Container. Sicherlich gibt es die Möglichkeit Maps in Fhem einzubinden, bisher hat sich aber wohl niemand die Mühe gemacht. In folgendem Thread wird beschrieben, wie man die Fahrzeiten in Fhem integrieren kann. http://forum.fhem.de/index.php?topic=20151.0

Grüße Jörg

[ChrisK]

Du packst folgendes in die 99_myUtils:

Code Auswählen Erweitern

sub ShowGoogleMapsCode() {
  my $htmlcode = "";
 
  $htmlcode .= "<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true'></script>";
  $htmlcode .= "<script>";
  $htmlcode .= "function initialize() {  ";
  $htmlcode .= "var myLatlng = new google.maps.LatLng(50.957245,6.9673223);  ";
  $htmlcode .= "var mapOptions = {    ";
  $htmlcode .= "  zoom: 14,    ";
  $htmlcode .= "  center: myLatlng  ";
  $htmlcode .= "};  ";
  $htmlcode .= "var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);  ";
  $htmlcode .= "var trafficLayer = new google.maps.TrafficLayer();  ";
  $htmlcode .= "trafficLayer.setMap(map);";
  $htmlcode .= "}";
  $htmlcode .= "google.maps.event.addDomListener(window, 'load', initialize);    ";
  $htmlcode .= "</script>    ";
  $htmlcode .= "<div id='map-canvas' style='width:400px;height:400px;'></div>";
 
  return $htmlcode;
}

Und definierst Deinen weblink so:

Code Auswählen Erweitern

define googlemaps weblink htmlCode {ShowGoogleMapsCode()}

Da ich noch ein blutiger FHEM-Anfänger bin, weiß ich jetzt nicht, wie es weitergeht 
Aber hier http://fhem/fhem?detail=googlemaps ist die Karte sichtbar.

[spion77]

vielen lieben danke hat alles bestens geklappt 

Danke

[hexenmeister]

nette Funktion

Ein Verbesserungsvorschlag:

Code Auswählen Erweitern

sub ShowGoogleMapsCode($$;$$$) {
my ($lat,$lng,$zoom,$width,$height) = @_;
$zoom='12' unless $zoom;
$width='400' unless $width;
$height='400' unless $height;

  my $htmlcode = "";
 
  $htmlcode .= "<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true'></script>";
  $htmlcode .= "<script>";
  $htmlcode .= "function initialize() {  ";
  $htmlcode .= "var myLatlng = new google.maps.LatLng(".$lat.",".$lng.");  ";
  $htmlcode .= "var mapOptions = {    ";
  $htmlcode .= "  zoom: ".$zoom.",    ";
  $htmlcode .= "  center: myLatlng  ";
  $htmlcode .= "};  ";
  $htmlcode .= "var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);  ";
  $htmlcode .= "var trafficLayer = new google.maps.TrafficLayer();  ";
  $htmlcode .= "trafficLayer.setMap(map);";
  $htmlcode .= "}";
  $htmlcode .= "google.maps.event.addDomListener(window, 'load', initialize);    ";
  $htmlcode .= "</script>    ";
  $htmlcode .= "<div id='map-canvas' style='width:".$width."px;height:".$height."px;'></div>";
 
  return $htmlcode;
}

Und dann kann man die Koordinaten, Zoom-Stufe und die Fenstergröße selbst angeben:

Code Auswählen Erweitern

define googlemaps weblink htmlCode {ShowGoogleMapsCode('50.957245','6.9673223',14,600,400)}

(http://forum.fhem.de/index.php?action=dlattach;topic=35121.0;attach=29386;image)

[ChrisK]

nette Funktion

Ein Verbesserungsvorschlag:

Prima!

Eine Parametrisierung hatte ich auch im Hinterkopf, dafür kenne ich mich aber mit Perl und FHEM-Code (noch) zu wenig aus. Ich war froh, dass es zumindest funktioniert hat
Aber Deine Anpassung hilft mir definitiv weiter, leichter rein zu kommen.

[hexenmeister]

War doch eine gute Teamarbeit 

[ChrisK]

War doch eine gute Teamarbeit 

Jepp, sehe ich genau so!

[spion77]

vielen Dank an alle !!!

[spion77]

wie könnte ich das nun machen das ich 2 karten in Fhem anzeigen könnte ?

wenn ich das ganze mit

Code Auswählen Erweitern

define googlemaps weblink htmlCode {ShowGoogleMapsCode('50.438164','8.669311',12,600,600)}
attr googlemaps room Verkehr

define googlemaps_ffm weblink htmlCode {ShowGoogleMapsCode('50.202843','8.686649',12,600,600)}
attr googlemaps_ffm room Verkehr

bekomme ich nur eine karte angezeigt ?

[ChrisK]

wie könnte ich das nun machen das ich 2 karten in Fhem anzeigen könnte ?

Es wird vermutlich daran liegen, dass beide Karten in das gleiche div geschrieben werden bzw. es zwei divs gibt mit der gleichen ID.

Ungetestet (weil grad kein FHEM zur Hand):

Code Auswählen Erweitern

sub ShowGoogleMapsCode($$;$$$$) {
my ($lat,$lng,$zoom,$width,$height,$id) = @_;
$zoom='12' unless $zoom;
$width='400' unless $width;
$height='400' unless $height;
$id='map-canvas' unless $id;

  my $htmlcode = "";
 
  $htmlcode .= "<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true'></script>";
  $htmlcode .= "<script>";
  $htmlcode .= "function initialize() {  ";
  $htmlcode .= "var myLatlng = new google.maps.LatLng(".$lat.",".$lng.");  ";
  $htmlcode .= "var mapOptions = {    ";
  $htmlcode .= "  zoom: ".$zoom.",    ";
  $htmlcode .= "  center: myLatlng  ";
  $htmlcode .= "};  ";
  $htmlcode .= "var map = new google.maps.Map(document.getElementById('".$id."'), mapOptions);  ";
  $htmlcode .= "var trafficLayer = new google.maps.TrafficLayer();  ";
  $htmlcode .= "trafficLayer.setMap(map);";
  $htmlcode .= "}";
  $htmlcode .= "google.maps.event.addDomListener(window, 'load', initialize);    ";
  $htmlcode .= "</script>    ";
  $htmlcode .= "<div id='".$id."' style='width:".$width."px;height:".$height."px;'></div>";
 
  return $htmlcode;
}

Und der Aufruf dann mit:

Code Auswählen Erweitern

define googlemaps weblink htmlCode {ShowGoogleMapsCode('50.438164','8.669311',12,600,600,'erstekarte')}
attr googlemaps room Verkehr

Code Auswählen Erweitern

define googlemaps_ffm weblink htmlCode {ShowGoogleMapsCode('50.202843','8.686649',12,600,600,'zweitekarte')}
attr googlemaps_ffm room Verkehr

Wenn's nicht klappt, dann habe ich das mit der Übergabe der Parameter an die sub-routine nicht richtig verstanden.

[spion77]

super das hat geklappt

kannst du mir auch einen tip geben wie man einen zwichen raum zwichen die beiden karten bekommt ?


VIELEN DANK hast mir echt geholfen und auch ein großes Danke Schön an Hexenmeister

[ChrisK]

super das hat geklappt

Da freue ich mich fast mehr drüber, als Du

kannst du mir auch einen tip geben wie man einen zwichen raum zwichen die beiden karten bekommt ?

Du könntest diese Zeile nehmen und das css dort anpassen:

Code Auswählen Erweitern

$htmlcode .= "<div id='".$id."' style='width:".$width."px;height:".$height."px;'></div>";
Z.B. in

Code Auswählen Erweitern

$htmlcode .= "<div id='".$id."' style='width:".$width."px;height:".$height."px;margin:10px'></div>";

[spion77]

Vielen Dank ! bin begeistert !!  DANKE

[kimbolero]

Das habe ich doch direkt auch mal ausprobiert - funktioniert einwandfrei!
Ich habe das bisher immer über eine eigene HTML-Seite (auf dem Raspberry abgelegt) umgesetzt und diese dann per iFrame eingebunden. Nicht optimal, aber hat seinen Zweck erfüllt.
So aber um einiges besser!
Danke.

[Ecomartin]

Hallo,
kennt jemand einen Weg die Fahrzeit-Prognose mit einzubauen?

Danke,
Martin

[Ecomartin]

Hallo,
bin ein Stück weiter => So bekommt man die Entferung und fahrzeit...
http://webmaster-fragen.de/webdev/php/mit-google-maps-api-entfernungen-berechnen-20140714.html

Wenn jetzt einer der sich mir Regular Expressions auskennt die Extraktion hinbekommt... (ist mir ein Rätsel... noch...)

Gruß,
Martin

[JoWiemann]

Hallo,

sorry, dass ist nicht neu. Allerdings erhält man in der "freien" Version nur die Standard Reisezeit und nicht die durch Verkehr verzögerte. Die ist aber die interessantere Version, wenn man wissen will, wann man abfahren muss.

Grüße Jörg

[netbus]

hi,
ich möchte gerne die map in die tablet ui einblenden lassen.
nesges hat es an einem anderen Beispiel so empfohlen:

Code Auswählen Erweitern

<div data-template="/fhem?cmd={UWZAsHtmlFP(%22Unwetterzentrale%22)}&XHR=1"></div>

Ich hätte es umgemappt auf diesen code:

Code Auswählen Erweitern

<div data-template="/fhem?cmd={ShowGoogleMapsCode(%2748.2240729%27%2C%2716.4327505%27%2C14%2C600%2C400)}&XHR=1"></div>
Hat jemand eine Idee?

[kumue]

hi,
ich möchte gerne die map in die tablet ui einblenden lassen.
nesges hat es an einem anderen Beispiel so empfohlen:

Code Auswählen Erweitern

<div data-template="/fhem?cmd={UWZAsHtmlFP(%22Unwetterzentrale%22)}&XHR=1"></div>

Ich hätte es umgemappt auf diesen code:

Code Auswählen Erweitern

<div data-template="/fhem?cmd={ShowGoogleMapsCode(%2748.2240729%27%2C%2716.4327505%27%2C14%2C600%2C400)}&XHR=1"></div>
Hat jemand eine Idee?

Ich habe es so gemacht:

googlemaps.html

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 560px;
width: 710px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.13&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 11,
disableDefaultUI: true,
center: new google.maps.LatLng(48.208174,16.373819),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}

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


FTUI:

Code Auswählen Erweitern


<li data-row="2" data-col="2" data-sizex="13" data-sizey="7">
        <header>VERKEHRSLAGE</header>
        <div data-type="iframe"
        data-src="googlemaps.html"
        data-width="710"
        data-height="500"
        class="top-space">
        </div>
</li>



[netbus]

danke kumue.
genau das was ich gesucht hatte 

[weini]

Hallo zusammen!

Tolle Sache! Beim Versuch, Google Maps ins Dashboard einzubinden bin ich aber über ein Problem gestolpert: Wenn man die Tabs durchschaltet und beim Einstieg ins Dashboard nicht der Tab mit Google Maps aktiv ist, dann wird die Karte beim Umschalten auf den Google Maps Tab nicht dargestellt. Erst ein Reload triggert die JavaScript Logik.

Nach ein wenig Recherche bin ich dann darauf gestoßen, dass der zusätzliche Parameter "callback=initialize" in die Skript-URL mit aufgenommen werden muss.
Konkret sieht die Funktion bei mir jetzt so aus:

Code Auswählen Erweitern


sub ShowGoogleMapsCode($$;$$$$) {
my ($lat,$lng,$zoom,$width,$height,$id) = @_;
$zoom='12' unless $zoom;
$width='400' unless $width;
$height='400' unless $height;
$id='map-canvas' unless $id;

  my $htmlcode = "";

  $htmlcode .= "<script src='https://maps.googleapis.com/maps/api/js?v=3.13&sensor=false&callback=initialize'></script>";
  $htmlcode .= "<script>";
  $htmlcode .= "function initialize() {  ";
  $htmlcode .= "var myLatlng = new google.maps.LatLng(".$lat.",".$lng.");  ";
  $htmlcode .= "var mapOptions = {    ";
  $htmlcode .= "  zoom: ".$zoom.",    ";
  $htmlcode .= "  mapTypeId: google.maps.MapTypeId.ROADMAP,  ";
  $htmlcode .= "  center: myLatlng  ";
  $htmlcode .= "};  ";
  $htmlcode .= "var map = new google.maps.Map(document.getElementById('".$id."'), mapOptions);  ";
  $htmlcode .= "var trafficLayer = new google.maps.TrafficLayer();  ";
  $htmlcode .= "trafficLayer.setMap(map);";
  $htmlcode .= "}  ";
  $htmlcode .= "google.maps.event.addDomListener(window, 'load', initialize);    ";
  $htmlcode .= "window.setInterval(function(){initialize();}, 60000);   ";
  $htmlcode .= "</script>    ";
  $htmlcode .= "<div id='".$id."' style='width:".$width."px;height:".$height."px;'></div>";

  return $htmlcode;
}


So klappt es dann auch im Dashboard beim Durchschalten der Tabs ohne explizitem Reload   

[weini]

Ich wecke hier mal die alte Leiche auf...
Nachdem Google mittlerweile die Verkehrsflussdaten nur noch gegen Hinterlegung einer Kreditkarte herausrückt, bin ich auf Here Maps umgestiegen.
Die "besondere Herausforderung" war auch mit Here wieder, im Dashboard die Initialisierung für den Fall korrekt hinzubekommen, wenn der Tab mit der Map beim ersten Aufruf des Dashboards nicht aktiv ist. Der Kniff ist das dynmische Laden via "$.getScript".

Hier die Perl Funktion:

Code Auswählen Erweitern


sub ShowHereMapsCode($$;$$$$) {
my ($lat,$lng,$zoom,$width,$height) = @_;
$zoom='12' unless $zoom;
$width='400' unless $width;
$height='400' unless $height;

  my $id='map';
  my $htmlcode = "";

  $htmlcode .= "<meta name='viewport' content='initial-scale=1.0, width=device-width' /> \n";
  $htmlcode .= "<link rel='stylesheet' type='text/css' href='https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059' /> \n";

  $htmlcode .= "<div id='".$id."' style='width:".$width."px;height:".$height."px;'></div>\n";

  $htmlcode .= "<script  type='text/javascript' charset='UTF-8' > \n";
  $htmlcode .= "\$.getScript('https://js.api.here.com/v3/3.0/mapsjs-core.js', function() { \n";
  $htmlcode .= "  \$.getScript('https://js.api.here.com/v3/3.0/mapsjs-service.js', function() { \n";
  $htmlcode .= "    \$.getScript('https://js.api.here.com/v3/3.0/mapsjs-ui.js', function() { \n";
  $htmlcode .= "      \$.getScript('https://js.api.here.com/v3/3.0/mapsjs-mapevents.js', function() { \n";
  $htmlcode .= "  function enableTrafficInfo (map) { \n";
  $htmlcode .= "// Center map on Munich \n";
  $htmlcode .= "map.setCenter({lat: ".$lat.", lng: ".$lng."}); \n";
  $htmlcode .= "map.setZoom(".$zoom."); \n";
  $htmlcode .= "// Show traffic tiles \n";
  $htmlcode .= "map.setBaseLayer(defaultLayers.normal.traffic); \n";
  $htmlcode .= "// Enable traffic incidents layer \n";
  $htmlcode .= "map.addLayer(defaultLayers.incidents); \n";
  $htmlcode .= "} \n";
  $htmlcode .= "/** \n";
  $htmlcode .= " * Boilerplate map initialization code starts below: \n";
  $htmlcode .= " */ \n";
  $htmlcode .= "// Step 1: initialize communication with the platform \n";
  $htmlcode .= "var platform = new H.service.Platform({ \n";
  $htmlcode .= "app_id: '<yourID>', \n";
  $htmlcode .= "app_code: '<yourCode>', \n";
  $htmlcode .= "useHTTPS: true \n";
  $htmlcode .= "}); \n";
  $htmlcode .= "var pixelRatio = window.devicePixelRatio || 1; \n";
  $htmlcode .= "var defaultLayers = platform.createDefaultLayers({ \n";
  $htmlcode .= "tileSize: pixelRatio === 1 ? 256 : 512, \n";
  $htmlcode .= "ppi: pixelRatio === 1 ? undefined : 320 \n";
  $htmlcode .= "}); \n";
  $htmlcode .= "// Step 2: initialize a map  - not specificing a location will give a whole world view. \n";
  $htmlcode .= "var map = new H.Map(document.getElementById('map'), \n";
  $htmlcode .= "  defaultLayers.normal.map, {pixelRatio: pixelRatio}); \n";
  $htmlcode .= "// Step 3: make the map interactive \n";
  $htmlcode .= "// MapEvents enables the event system \n";
  $htmlcode .= "// Behavior implements default interactions for pan/zoom (also on mobile touch environments) \n";
  $htmlcode .= "var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); \n";
  $htmlcode .= "// Create the default UI components \n";
  $htmlcode .= "var ui = H.ui.UI.createDefault(map, defaultLayers); \n";
  $htmlcode .= "// Now enable traffic tiles and traffic incidents \n";
  $htmlcode .= "enableTrafficInfo(map); \n";
  $htmlcode .= "      }); \n";
  $htmlcode .= "    }); \n";
  $htmlcode .= "  }); \n";
  $htmlcode .= "}); \n";
  $htmlcode .= "</script> \n";

  return $htmlcode;
}


der Weblink

Code Auswählen Erweitern


defmod vkr_GoogleMapsMunich weblink htmlCode {ShowHereMapsCode('48.1262279','11.576254','12',930,500)}
attr vkr_GoogleMapsMunich group _Verkehr
attr vkr_GoogleMapsMunich htmlattr width="100%" height="500" frameborder="0" marginheight="0" marginwidth="0"


und hier die Einbindung ins Dashboard:

Code Auswählen Erweitern


defmod Dashboard Dashboard
...
attr Dashboard dashboard_activetab 1
attr Dashboard dashboard_colcount 2
attr Dashboard dashboard_showfullsize 1
...
attr Dashboard dashboard_tab5colcount 1
attr Dashboard dashboard_tab5devices vkr_GoogleMapsMunich
attr Dashboard dashboard_tab5name Verkehr
attr Dashboard dashboard_tab5sorting t4c0,_Verkehr,true,950,0,1,1:
...
attr Dashboard dashboard_width 960