A raspberry pi MagicMirror module that displays a map, centered at provided coordinates, with Google Maps Traffic information.
Clone or download
vicmora Merge pull request #14 from rklueber/master
Transparent option plus colored markers
Latest commit 0336b8b Sep 10, 2018

README.md

MMM-GoogleMapsTraffic

Alt text

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.

Alt text

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: