HowTo: Magic Mirror – Show current traffic overview

A cool and practical plugin for the MagicMirror is the plugin “MMM GoogleMapsTraffic“. This shows you the status of the current road traffic in your area.

How to install this is described in the following article

Safety instructions

I know the following notes are always kind of annoying and seem unnecessary. Unfortunately, many people who knew "better" have lost eyes, fingers or other things due to carelessness or injured themselves. Data loss is almost negligible in comparison, but even these can be really annoying. Therefore, please take five minutes to read the safety instructions. Because even the coolest project is not worth injury or other trouble.

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 make a purchase via this link, will receive a commission from the relevant online shop or provider. The price does not change for you. If you make your purchases via these links, you support in being able to offer other useful projects in the future. 🙂 


Helpful articles:
Before you start the installation, you should have prepared the RaspberryPi so that it is accessible via the network and controllable via SSH. The MagicMirror software should also be set up.

The following articles describe what you need to do to get everything ready:
RaspberryPi – setup for nerdiys!
RaspberryPi – The first configuration!
RaspberryPi – Control the RaspberryPi via SSH

MagicMirror - Installing the required software

Required tool:

Required material:

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

Log in to the RaspberryPi via SSH

To start, you must first log in to the Rasp Pi with Putty via SSH. How to do this is in the article RaspberryPi - Control the RaspberryPi via SSH described.

After entering your username and password you can enter the first commands.

Installing the module

So that you can display the current traffic in your area, you need the module “MMM-GoogleMapsTraffic”. You can find it under

Install this on your RaspberryPi. How to install your modules is described in the following article:
MagicMirror - Install 3rd party modules

Configuration of the module

You configure the module - as usual with MagicMirror modules - by entering the module configuration into the configuration of your MagicMirror installation.
To do this, open the configuration file of your MagicMirror installation with the following command:

sudo nano ~/MagicMirror/config/config.js

Before you enter the following configuration file, you have to make a few replacements.

{ 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

In order for this module to work it requires access to the GoogleMaps API. An API key is required for this.
How you get a GoogleMaps API key is described in the following article:
Register GoogleMaps API key

Have you registered a Google Maps API key? Replace “YOUR_KEY” in the module configuration 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 you can find out the latitude and longitude of any location using Google Maps is described in the following article:
Find the latitude and longitude of any location with GoogleMaps

Once you have determined the latitude and longitude of your desired location, replace “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 listed above, there are other adjustable options, which largely influence the appearance of the module.

A list of possible options:

Quote from the module GitHub:

Configuration options

option Description
keys required Google api key. See below for help.
lat required Latitude used to center the map. See below for help.

Type: float

length required Longitude used to center the map. See below for help.

Type: float

height Height of the map.

Type: string (pixels)
Default values: 300px

width Width of the map.

Type: string (pixels)
Default values: 300px

zoom Zoom value to display from lat/lng.

Type: integer
Default values: 10

mapTypeId The map type to display (roadmap, satellite, hybrid, terrain).

Type: string
Default values: roadmap

styledMapType Style of the map. See below for help.

Type: string
Possible values: defaultdarknightblack or custom
Default values: default

disableDefaultUI Disable default UI buttons (Zoom and Street View).

Type: boolean
Default values: true

updateInterval How often the module should load the map.

Type: internal in milliseconds
Default values: 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 values: 'rgb(0, 0, 0, 0)'

The configuration of these options is not necessary for an initial test. If you do not enter them, the module uses the default values of the respective options.


If you have entered the configuration correctly, MagicMirrors should greet you with the following display the next time you load it.

More information

Have fun with the project

I hope everything worked as described for you. If not or you have questions or suggestions please let me know in the comments. I will then add this to the article if necessary.
Ideas for new projects are always welcome. 🙂

PS 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 think it's cool that I share the information with you, I would be happy about a small donation to the coffee fund. 🙂

Buy Me a Coffee at       


  1. Hello. Exactly as you present it here, I would like to have it on my mirror. Unfortunately, I always get an error message that the config is wrong.
    Would you help me a little with that?
    Best regards

    1. Hi Bodo,
      this is often due to incorrect formatting of the config file. The tricky thing here is that all the open parentheses have to be properly closed again.
      You can copy your config file here and see if the error messages help you. 🙂
      Otherwise you can also use the config at upload and send me the link. Then I can take a look if you want.
      Remember to delete any existing API keys or access data from the config before forwarding them to anyone. 🙂
      Best regards

  2. Hello Fabian,
    Sorry I only saw your reply now. sorry I'll try to send you the code tomorrow if I can. In any case, thank you very much for the offered help. I've been at this for weeks and I'm going in circles.
    You hear from me as soon as possible.
    Best regards

    1. Hi Bodo,
      look here:
      That should actually work. There were a few commas and brackets that were in the wrong place. You can debug something like that quite well if you do it, for example, under enter and display and process the error message by clicking on “Run code”. 🙂
      I hope everything works out.
      Best regards

  3. Hello Fabian,
    First of all, thank you very much for your efforts. But unfortunately it didn't work. When I load your code it doesn't boot and writes directly in the mirror that something is wrong with the config.
    Then I went and reloaded my working one. And it works. Then I put only YOUR maps traffic module in MY running conig and then the same message comes up.
    I then copied only the Google Traffic area from YOUR file and loaded it at
    Module: 'MMM-GoogleMapsTraffic' ,
    Position : 'top_left' ,
    configure : {
    Key : 'YOUR_KEY' ,
    lat : 'YOUR_LATITUDE' ,
    lng : 'YOUR_LONGITUDE' ,
    height : '300px' ,
    width : '300px' ,
    styledMapType : “transparent” ,
    disableDefaultUI : true ,
    backgroundColor : 'hsla (0, 0%, 0%, 0)'
    } ,

    And then I get the following error: JavaScript error: Uncaught syntax error: Unexpected token ':' on line 4

    Could you please watch this again? I also noticed that there is a “double bracket” at the end of each module in your file. Is it correct that way?

    Best regards

    1. Hi Bodo,
      I just watched it again. 🙂
      Did you add the pure config code to When I do that it doesn't show me an error message. :/ You can also view the “raw” code from the pastebin here:

      It is understandable that there is an error message if you only insert one module into The entire config file basically consists of a “keyed collection” (you can find information here, for example:
      This means that if you only insert the part marked above, the javascript interpreter will not know what kind of construct it is and will throw an error message accordingly. For example, if you put the “declaration part” in front of the module it should work again. I uploaded an example here:

      I hope I understood you correctly about the double brackets. You mean in the uploaded code (under for example the brackets in line 63 and 64 right? If yes: That is correct. You have to make sure that all previously opened parentheses are closed again. For example, the parenthesis on line 63 closes the parenthesis on line 58. The parenthesis on line 64 closes the parenthesis on line 55. Similarly, the square bracket on line 111 closes the square bracket on line 40. With these curly braces code blocks are always combined. It just gets a bit confusing sometimes. Especially when the blocks span multiple lines.

      Last but not least I have the config from just loaded into my magic mirror. It will be displayed there. maybe it can be that the error lies in one of the installed modules? If you want, send me a screenshot of your error message. 🙂
      Best regards

  4. Hello Fabian,
    so,'s going up now. Madness,......after 2 months annoyed. Until now I had always inserted everything from the script file. And now that I've clicked clone above and copied that file, at least I get a Maps window. Albeit with an error message.
    It remains even if I enter the API code and the other two data.
    Greeting Bodo

    1. hey bodo,
      just tried it again. When I enter my API key, longitude and latitude the map is displayed.
      Are you sure you entered the latitude and longitude in the correct format?
      I have pasted the code of the module for you here. You just have to insert the API key and then you should see the traffic around the Reichstag. 🙂
      Best regards

  5. Hello Fabian,
    It gets even better. Now the map can be seen, but with an error message about it.
    This page can't load Google Maps correctly.
    In your module there are also many more numbers for latitude and longitude. I took it from the Goggle Maps web address. eg:,+Platz+der+Republik+1,+10557+Berlin/@52.5186222,13.3741289,17z/data=!3m1!4b1!4m5!3m4!1s0x47a851c748c80e45:0xbf985f98f930a812!8m2!3d52.518619!4d13.3763176
    And from that then 52.5186222 and 13.3741289
    But that has nothing to do with the error message. Maybe I did something wrong on the Maps platform. There I limited the API code to “Maps Java Script API” and “Maps Static API”. Could that have been the mistake?
    Greeting Bodo

    1. hey bodo,
      sounds good. 🙂 I would just try not to restrict the API use any further. It may very well be that the error message is related to this. 🙂
      The extra digits in the latitude and longitude are just a little bit more accurate. But since you only want to mark one region anyway, that shouldn't be too tragic.
      Best regards

  6. Hello Fabian,
    Thanks again. I'll try it and then, probably tomorrow, get back to you.
    Best regards

  7. Fabian,
    have lifted all restrictions. message remains. However, I can confirm it with the mouse. Then it stays away until the next time the mirror starts up. But it comes back every time.
    Greeting Bodo

    1. hey bodo,
      strange. But then it must actually be related to the Google API. I did not see this error message. :/ maybe just create a new API access and try it out?
      Best regards

  8. Hello Fabian,
    So,……….have just generated a new API and entered it in the config. Unfortunately without success. The message stays.
    I'll try to delete everything in the cloud platform and then create it again. Let's see what comes out of it. However, everything looks a little different here than in your instructions.
    Best regards

    1. hey bodo,
      that sounds good. 🙂 I keep my fingers crossed that everything goes on like this. 🙂
      Best regards

  9. Hello Fabian, I would like to ask you something else. Just for understanding. Here in line 53 (in Java Script) you can see this “double bracket”. At the bottom of the RAW file there is only a bracket in the same place that is closed. What's the difference here?
    Best regards

    1. Hi Bodo,
      I'm not quite sure what you mean. In my view there is a curly bracket in line 53 and one in line 54. The bracket in line 53 closes the block that was opened with the bracket in line 44 “config: {”. The bracket in line 54 closes the block that was opened in line 41.
      Do you mean that? 🙂
      Best regards

Kommentar hinterlassen

Your email address will not be published. Erforderliche Felder sind mit * markiert

This site uses Akismet to reduce spam. Learn how your comment data is processed.