Es gibt mehrere Möglichkeiten.
Die eleganteste und vielseitigste ist mit dem Modul iFrame und der
Google javascript API
https://developers.google.com/maps/documentation/javascript/styling
Hier könnt Ihr die Farben ändern und Marker setzen.
- Marker setzen siehe Step2:
https://developers.google.com/maps/documentation/ javascript/adding-a-google-map
Zum Vorgehen:
- In Unterverezeichnis "modules" gehen
cd MagicMirror/modules - Modul iFrame von github holen
git clone https://github.com/desertblade/iFrame.git - iFrame in Config einbinden:
a. zum Unterverzeichnis "config" wechseln, denn wir sind gerade in "modules"!
cd ..
cd config
b. config.js öffnen, z.B.:
sudo nano config.js
c. Modul einbinden:
o var config = {
address: "localhost",
!!! bitte überprüfen ob localhost drin steht!!! sonst geht nichts!!!
o {
module: "iFrame",
position: "middle_center",
config: {
url: "http://localhost:8080/modules/iFrame/googlemapstraffic.html",
width: "100%",
height: "500px",
refreshInterval: 100
}
},
!!! position: hier könnt Ihr alle gültigen Positionen wählen !!!
d. speichern:
strg + o
strg + x - googlemapstraffic.html erstellen
a. wechseln in das Unterverzeichnis iFrame
cd ..
cd modules/iFrame
b. Datei erstellen:
sudo nano googlemapstraffic.html
c. Inhalt von
https://developers.google.com/maps/documentation/javascript/styling holen
!!! das Beispiel unter der Googlemap kopieren !!!
d. Inhalt im "nano" kopieren:
Shift + Strg + v
e. Speichern:
Strg + o
f. nach Lust und Laune ändern
(bei Anfängern vielleicht erst mal schaun ob es überhaupt geht)
g. Verlassen:
Strg + x
h. aufs Unterverzeichnis MagicMirror wechseln
cd ..
cd ..
i. MagicMirror starten:
npm start
An dieser Stelle ein herzliches Danke schön an meine Kollegen Nicklas Schwellenbach der auf diese Methode gekommen ist.
