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.
https://www.nerdiy.de/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 make a purchase via this link, Nerdiy.de 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 Nerdiy.de in being able to offer other useful projects in the future. 🙂
Requirements
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:
-no-
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.
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 https://github.com/vicmora/MMM-GoogleMapsTraffic
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: https://github.com/vicmora/MMM-GoogleMapsTraffic
Configuration options
option Description keysrequired Google api key. See below for help. latrequired Latitude used to center the map. See below for help. Type:
floatlengthrequired Longitude used to center the map. See below for help. Type:
floatheightHeight of the map. Type:
string(pixels)
Default values:300pxwidthWidth of the map. Type:
string(pixels)
Default values:300pxzoomZoom value to display from lat/lng. Type:
integer
Default values:10mapTypeIdThe map type to display (roadmap, satellite, hybrid, terrain). Type:
string
Default values:roadmapstyledMapTypeStyle of the map. See below for help. Type:
string
Possible values:default,dark,night,blackor custom
Default values:defaultdisableDefaultUIDisable default UI buttons (Zoom and Street View). Type:
boolean
Default values:trueupdateIntervalHow often the module should load the map. Type:
internalin milliseconds
Default values:900000 (15 mins)markersAdditional markers in the map as an array. See example. backgroundColorBackgound 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.
result
If you have entered the configuration correctly, MagicMirrors should greet you with the following display the next time you load it.
More information
https://github.com/MichMich/MagicMirror
https://github.com/vicmora/MMM-GoogleMapsTraffic
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. 🙂
English 
Deutsch 
Français 
Español 
Nederlands
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
Bodo
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. 🙂 https://jshint.com/
Otherwise you can also use the config at https://pastebin.com/ 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
Fabian
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
Bodo
Hello Fabian,
if i did it right you should be here https://pastebin.com/KiYNnauD see the content of the config.
The code from Google Cloud was in there as the API. Likewise longitude and latitude.
Best regards
Bodo
Hi Bodo,
look here: https://pastebin.com/b0iVmzaV
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 https://js.do/ enter and display and process the error message by clicking on “Run code”. 🙂
I hope everything works out.
Best regards
Fabian
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 js.do.
{
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
Bodo
Hi Bodo,
I just watched it again. 🙂
Did you add the pure config code to js.do? When I do that it doesn't show me an error message. :/ You can also view the “raw” code from the pastebin here: https://pastebin.com/raw/b0iVmzaV
It is understandable that there is an error message if you only insert one module into js.do. The entire config file basically consists of a “keyed collection” (you can find information here, for example: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Keyed_collections)
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: https://pastebin.com/inKvNBh3
I hope I understood you correctly about the double brackets. You mean in the uploaded code (under https://pastebin.com/b0iVmzaV) 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 https://pastebin.com/b0iVmzaV 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
Fabian
Hello Fabian,
so,......it'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
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. 🙂 https://pastebin.com/JsprMVFb
Best regards
Fabian
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: https://www.google.com/maps/place/Reichstagsgeb%C3%A4ude,+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
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
Fabian
Hello Fabian,
Thanks again. I'll try it and then, probably tomorrow, get back to you.
Best regards
Bodo
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
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
Fabian
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
Bodo
Fabian !!!!!!!!!
It's done !!!!!!!!!! Thanks to this guide here https://www.wpgmaps.com/documentation/creating-a-google-maps-api-key/
I got rid of the error message. It was something with the login credentials and linked account on Google.
But first I want to wait another day and see if the devil doesn't come back after all.
Until then, thank you very much in advance!!!!!!!!!!!!!!!!
But I'll get in touch with you again.
Best regards
Bodo
hey bodo,
that sounds good. 🙂 I keep my fingers crossed that everything goes on like this. 🙂
Best regards
Fabian
Hello Fabian,
everything looks really good. So once again a thousand thanks!!!
Best regards
Bodo
Hello Fabian, I would like to ask you something else. Just for understanding. Here https://pastebin.com/b0iVmzaV 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
Bodo
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
Fabian