MMM-GoogleMapsTraffic

A module for the MagicMirror² that displays a map, centered at provided coordinates, with Google Maps Traffic information.

Installation

1. Navigate into your MagicMirror's ~/MagicMirror/modules folder and execute git clone https://github.com/vicmora/MMM-GoogleMapsTraffic.git. A new folder will appear navigate into it.
2. Execute npm install in ~/MagicMirror/modules/MMM-GoogleMapsTraffic to install the node dependencies.

Using the module

To use this module, add it to the modules array in the config/config.js file:

var config = {
    modules: [
        {
            module: 'MMM-GoogleMapsTraffic',
            position: 'top_left',
            config: {
                key: 'YOUR_KEY',
                lat: 37.8262306,
                lng: -122.2920096,
                height: '300px',
                width: '300px'
                styledMapType: "transparent",
                disableDefaultUI: true,
                backgroundColor: 'hsla(0, 0%, 0%, 0)',
                markers: [
                    {
                        lat: 37.8262316,
                        lng: -122.2920196,
                        fillColor: '#9966ff'
                    },
                ],
            },
        }
    ]
}

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

Google API Key

Obtain an api at Google Developer's page.

Coordinates

The easiest way to obtain latitude and longitude coordinates is via Google Maps. Type an address, location, or center the map where you'd like it centered. The coordinates will appear in the address bar as seen below.

Map style

The easiest way to create your own styled map is via Google Maps APIs Styling Wizard. Create a new file in ~/MagicMirror/modules/MMM-GoogleMapsTraffic/mapStyle , using the style name as the filename. Copy JSON data generated by wizard into this file.

Dependencies

Installed via npm install:

• fs
• path