googelmaps mit verkehr ?

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

Vorheriges Thema - Nächstes Thema

spion77

Vielen Dank ! bin begeistert !!  :D 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.
CUL 868, Jeelink 868 Clone, NanoCUL 868, HM-CC-RT-DN,  max! Fensterkontakte, Zigbee, GoogleAssistant, GHoma Wifi-Steckdosen, Telegram etc.....

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
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

netbus

hi,
ich möchte gerne die map in die tablet ui einblenden lassen.
nesges hat es an einem anderen Beispiel so empfohlen:
<div data-template="/fhem?cmd={UWZAsHtmlFP(%22Unwetterzentrale%22)}&XHR=1"></div>

Ich hätte es umgemappt auf diesen code:
<div data-template="/fhem?cmd={ShowGoogleMapsCode(%2748.2240729%27%2C%2716.4327505%27%2C14%2C600%2C400)}&XHR=1"></div>
Hat jemand eine Idee?

kumue

Zitat von: netbus am 22 Januar 2016, 14:58:38
hi,
ich möchte gerne die map in die tablet ui einblenden lassen.
nesges hat es an einem anderen Beispiel so empfohlen:
<div data-template="/fhem?cmd={UWZAsHtmlFP(%22Unwetterzentrale%22)}&XHR=1"></div>

Ich hätte es umgemappt auf diesen code:
<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

<!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:

<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  ;D

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:


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   :D

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:

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

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:

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