HowTo: Magic Mirror – Display current traffic overview

A cool and usefull plugin for the MagicMirror is the plugin “MMM-GoogleMapsTraffic”. This will show you the status of the current road traffic in your area.

How to install this is described in the following article

Hints for our lovely english readers: Basically, many of the articles on Nerdiy.de are translations from the original german articles. Therefore, it may happen here and there that some illustrations are not available in english and that some translations are weird/strange/full of mistakes or generally totaly wrong. So if you find some obvious (or also not obvious) mistakes don't hesitate to leave us a hint about that in the comment section. 
Also please don't get confused, that instead of a "dot" often a "comma" is used as decimal separator. 🙂

---

Safety instructions

I know the following hints are always a bit annoying and seem unnecessary. But unfortunately, many people who knew it "better" from carelessness lost their eyes, fingers or other things or hurt themselves. In comparison, a loss of data is almost not worth mentioning, but even these can be really annoying. Therefore, please take five minutes to read the safety instructions. Even the coolest project is worth no injury or other annoyance. https://www.nerdiy.de/en/sicherheitshinweise/

Affiliate links / advertising links

The links to online shops listed here are so-called affiliate links. If you click on such an affiliate link and shop via this link, Nerdiy.de receives a commission from the online shop or provider concerned. The price doesn't change for you. If you do your purchases via these links, you will support Nerdiy.de in being able to offer further useful projects in the future. 🙂

---

Requirements

Helpful Articles:
Before you start with the installation, you should have prepared the RaspberryPi so far that it can be reached via the network and controlled by SSH. In addition, the MagicMirror software should be set up.

The following articles describe what to do to prepare everything:
RaspberryPi – Setting up for Nerdiys!
RaspberryPi – The first configuration
RaspberryPi – Controlling the RaspberryPi via SSH
MagicMirror – Installing the required software

Required tools:
-none-

Required material:

In the following list you will find all the parts you need to implement this article.

---

Log in via SSH on the RaspberryPi

To get started, you first need to log in to RasPi with SSH on Putty. How to do it is described in the article

• RaspberryPi - Controlling the RaspberryPi via SSH.

---

Installation des Moduls

Damit ihr euch den aktuellen Straßenverkehr in Eurer Umgebung anzeigen könnt benötigt Ihr das Modul “MMM-GoogleMapsTraffic”. Ihr findet es unter https://github.com/vicmora/MMM-GoogleMapsTraffic

Installiert dies auf eurem RaspberryPi. Wie Ihr Module installiert ist im folgendem Artikel beschrieben:
MagicMirror – 3rd-Party-Module installieren

---

Configuration of the module

The module configuration is done – as usual with MagicMirror modules – by entering the module configuration in the configuration of your MagicMirror installation.
Open the configuration file of your MagicMirror installation with the following command:

sudo nano ~/MagicMirror/config/config.js

However, before you enter the following configuration file, you need to do a few substitutions.

{
     module: 'MMM-GoogleMapsTraffic',
     position: 'top_left',
     config: {
         key: 'YOUR_KEY',
         lat: YOUR_LATITUDE,
         lng: YOUR_LONGITUDE,
         height: '300px',
         width: '300px'
         styledMapType: "transparent",
         disableDefaultUI: true,
         backgroundColor: 'hsla(0, 0%, 0%, 0)',
     },
 }

Enter Google Maps API Key

For this module to work, it needs access to the Google Maps API. This requires an API key.
How to get a GoogleMaps API Key is described in the following article:
Register GoogleMaps API Key

Did you register a Google Maps API key? In the module configuration, replace “YOUR_KEY” with your GoogleMaps API key.

Enter latitude and longitude

In addition to the API key, the module also requires the latitude and longitude of the desired location.
How to find the latitude and longitude of any location using Google Maps is described in the following article:
Find latitude and longitude of any position with GoogleMaps

Once you have determined the latitude and longitude of your desired location, replace your “YOUR_LATITUDE” with the latitude of your desired location and “YOUR_LONGITUDE” with the longitude of your desired location.

More options

In addition to the options above, there are other adjustable options that largely affect the look of the module.

A list of possible options:
Quote from the module GitHub: https://github.com/vicmora/MMM-GoogleMapsTraffic

Configuration options

Option	Description
key	Required Google api key. See below for help.
lat	Required Latitude used to center the map. See below for help. Type: float
lng	Required Longitude used to center the map. See below for help. Type: float
height	Height of the map. Type: string (pixels) Default value: 300px
width	Width of the map. Type: string (pixels) Default value: 300px
zoom	Zoom value to display from lat/lng. Type: integer Default value: 10
mapTypeId	The map type to display (roadmap, satellite, hybrid, terrain). Type: string Default value: roadmap
styledMapType	Style of the map. See below for help. Type: string Possible value: standard, dark, night, black or custom Default value: standard
disableDefaultUI	Disable default UI buttons (Zoom and Street View). Type: boolean Default value: true
updateInterval	How often the module should load the map. Type: int in millisecond Default value: 900000 (15 mins)
markers	Additional markers in the map as an array. See example.
backgroundColor	Backgound behind the map.Can be set to transparent ('hsla(0, 0%, 0%, 0)') or left at black (default). Type: string Default value: 'rgba(0, 0, 0, 0)'

The configuration of these options is not necessary for a first test. If you do not enter it, the module will use the defaults for each option.

---

Result

If you have entered the configuration correctly, you should be welcome by the following message at te next time you load the MagicMirror.

---

Additional information

https://github.com/MichMich/MagicMirror
https://github.com/vicmora/MMM-GoogleMapsTraffic

---

Have fun with the project

I hope everything worked as described. If not or you have any other questions or suggestions, please let me know in the comments. Also, ideas for new projects are always welcome. 🙂

P.S. Many of these projects - especially the hardware projects - cost a lot of time and money. Of course I do this because I enjoy it, but if you appreciate it that I share these information with you, I would be happy about a small donation to the coffee box. 🙂