googelmaps mit verkehr ?

Begonnen von spion77, 16 März 2015, 16:18:46

Vorheriges Thema - Nächstes Thema

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

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
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
Jörg Wiemann

Slave: RPi B+ mit 512 MB, COC (868 MHz), CUL V3 (433.92MHz SlowRF); FHEMduino, Aktuelles FHEM

Master: CubieTruck; Debian; Aktuelles FHEM

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
Jörg Wiemann

Slave: RPi B+ mit 512 MB, COC (868 MHz), CUL V3 (433.92MHz SlowRF); FHEMduino, Aktuelles FHEM

Master: CubieTruck; Debian; Aktuelles FHEM

ChrisK

#4
Du packst folgendes in die 99_myUtils:
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:
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

#6
nette Funktion ;)

Ein Verbesserungsvorschlag:
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:
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)
Maintainer: MQTT_GENERIC_BRIDGE, SYSMON, SMARTMON, systemd_watchdog, MQTT, MQTT_DEVICE, MQTT_BRIDGE
Contrib: dev_proxy

ChrisK

Zitat von: hexenmeister am 16 März 2015, 21:36:44
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  :)
Maintainer: MQTT_GENERIC_BRIDGE, SYSMON, SMARTMON, systemd_watchdog, MQTT, MQTT_DEVICE, MQTT_BRIDGE
Contrib: dev_proxy

ChrisK


spion77


spion77

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

wenn ich das ganze mit 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

Zitat von: spion77 am 17 März 2015, 12:23:52
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):
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:
define googlemaps weblink htmlCode {ShowGoogleMapsCode('50.438164','8.669311',12,600,600,'erstekarte')}
attr googlemaps room Verkehr

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

Zitat von: spion77 am 17 März 2015, 12:55:17
super das hat geklappt
Da freue ich mich fast mehr drüber, als Du ;)

Zitat von: spion77 am 17 März 2015, 12:55:17
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:
$htmlcode .= "<div id='".$id."' style='width:".$width."px;height:".$height."px;'></div>";
Z.B. in
$htmlcode .= "<div id='".$id."' style='width:".$width."px;height:".$height."px;margin:10px'></div>";