@KirAsh4
Yea the buttons would be nice to switch between maps.

But the thing is i can’t even display a map of the JS api of google: https://maps.googleapis.com/maps/api/js

There is also an static map api from google that just display’s an image of the map. This should be easier to push to a module. But i want the traffic functionallity that only is possible in the JS api…

I don’t know if the google JS api allows to get requests from a node module.

(my first 3 pages of google are already purple ^^)

Woow nice writing! Thnx for the motivating words :) i’ll keep trying to make things work.

Update using the soccer module as base (but still no succes):
Trafficmaps.js:

Module.register("trafficmaps",{
defaults: {
			api_key: "",
			mapoptions: {
          			center: {lat: -34.397, lng: 150.644},
          			zoom: 13
			}
	},

	start: function() {
		Log.info("Starting module: " + this.name);
		this.initmap = this.config.mapoptions;
		this.sendSocketNotification('GET_DATA', {initMap: this.initmap, api_key: this.config.api_key});
	},
	

	socketNotificationReceived: function(notification, payload){
		if(notification === 'DATA'){
			this.maps = payload;
			this.updateDom();
		}
	},

	getStyles: function() {
		return ["trafficmaps.css"];
	},
	
	getDom: function() {
		var wrapper = document.createElement("div");
		if(this.maps){
			var map = document.createElement("div");
				map.classList.add("map");
			wrapper.appendChild(map);


		} else {
			wrapper.innerHTML = "No data available";
		}
		return wrapper;
	}
});

node_helper.js:

var request = require('request');
var NodeHelper = require("node_helper");
module.exports = NodeHelper.create({

	start: function() {
		console.log("Starting module: " + this.name);
	},

	socketNotificationReceived: function(notification, payload) {
		if (notification === "GET_DATA") {
			var options = {};
			if(payload.api_key){
				 options = {
					url: "https://maps.googleapis.com/maps/api/js?key=" + payload.api_key + "&callback=" + payload.initMap + "",
				};
			} else {
				options = {
					url: "https://maps.googleapis.com/maps/api/js?callback=" + payload.initMap + ""
				};
			}

			this.getData(options);
		}
	},

	getData: function(options) {
		request(options, (error, response, body) => {
			if (response.statusCode === 200) {
				this.sendSocketNotification("DATA", JSON.parse(body)); 
			} else {
				console.log("Error "+response.statusCode)
			}
		});
	}
});

I guess i really need async and defer for this… but i have no idea what i am doing…

@MichMich I have got a sample from pyrasied.nl and it looks really nice! a 24inch size glass cost less then 25 euro.
But i still consider glass. Any recommendations for me?

@MichMich it depend on the budget of course. Glas is more expensive or am i wrong?

anyone know how to get googlemapsv3 displayed in nodejs?

json parse didn’t work.
I try to use the dependeties already in magicmirror like request.
Can i do it only with request? Anyone knows this?
The only thing i learned was MS frontpage on school. So i am really n00b in this…

var NodeHelper = require('node_helper');
var request = require('request');

module.exports = NodeHelper.create({
  start: function () {
  },
  
  geturl: function (api_url) {
  request({url: api_url, method: 'GET'}, function (error, response, body) {
  if (!error && response.statusCode === 200) {
    console.log(body); // Show the HTML for the Google homepage.
	var maps = JSON.parse(body);
	self.sendSocketNotification('GET_MAPS', {'maps':maps, 'url':api_url});
  }
  
});	
  },
  
  socketNotificationReceived: function(notification, payload) {
    // console.log(notification);
    if (notification === 'SEND_URL') {
      this.geturl(payload);
    }
  }
  
});

ok new code, but still not working. how can i get this url loaded?

Module.register("trafficmaps",{

	// Default module config.
	defaults: {
		text: "",
		animationSpeed: 500,
		apibase : "https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap",
	},

var mapOptions = {
     zoom: 13,
    center: {lat: 34.04924594193164, lng: -118.24104309082031},
    styles:[
  {
    "featureType": "administrative",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "transit",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "saturation": -100 },
      { "visibility": "on" },
      { "invert_lightness": true }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "road.arterial",
    "stylers": [
      { "invert_lightness": true },
      { "saturation": -100 },
      { "visibility": "off" }
    ]
  },{
    "featureType": "road.local",
    "stylers": [
      { "visibility": "off" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      { "saturation": -100 },
      { "gamma": 0.48 },
      { "visibility": "on" }
    ]
  },{
    "featureType": "traffic",
    "stylers": [
      { "saturation": -100 },
      { "gamma": 0.48 },
      { "visibility": "on" }
    ]
  }
]
},

  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    

  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);


	// Override dom generator.
	getDom: function() {
		var wrapper = document.createElement("div");
		wrapper.id = 'map';
		wrapper.innerHTML = this.config.text;
		return wrapper;
	}
});

I thought i could easily turn a js script into a node module. But i find out that isn’t so easy.

I created a trafficmap on the maps api page and from there i created this. I pasted the straightforward code.
I tried many thing but honestly i don’t know where to start.
Anyone can help me make this work? After that i could create the config options like api key and location.
Finally i want it to open and close with the voice control module ^^. To open the map of location from home to work. And another voice command for my girlfriends home to work.

Here is my trafficmaps.js

Module.register("trafficmaps",{

	// Default module config.
	defaults: {
		text: "",
		animationSpeed: 500,
	},
	start: function() { 
        this.sendSocketNotification("CONNECT", {});
    },
	
	<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

	
	function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 34.04924594193164, lng: -118.24104309082031},
    styles:[
  {
    "featureType": "administrative",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "transit",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "saturation": -100 },
      { "visibility": "on" },
      { "invert_lightness": true }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "road.arterial",
    "stylers": [
      { "invert_lightness": true },
      { "saturation": -100 },
      { "visibility": "off" }
    ]
  },{
    "featureType": "road.local",
    "stylers": [
      { "visibility": "off" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      { "saturation": -100 },
      { "gamma": 0.48 },
      { "visibility": "on" }
    ]
  },{
    "featureType": "traffic",
    "stylers": [
      { "saturation": -100 },
      { "gamma": 0.48 },
      { "visibility": "on" }
    ]
  }
]
  });

  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
}

	// Override dom generator.
	getDom: function() {
		var wrapper = document.createElement("div");
		wrapper.innerHTML = this.config.text;
		return wrapper;
	}
});

@zach @Mitchfarino @alexyak

Yea the voice module is working very well!
https://forum.magicmirror.builders/topic/425/voicecontrol-module

I made a notification module that notify when i said something in the voicecontrol module. The notification module then runs the command.

I have it working to turn off and on my monitor so far. The next thing i will try is to make a GPIO pin to switch on a led strip behind the mirror.

The only exception in this voice module is that it doens’t work with dictornary text. Only preprogrammed words.
So we can’t call things like: Show me a map of “cityname”. Cuz cityname can be anything.

Maybe someone get the knowledge to expand the voice module to activate freetext. Like use Snowboy for “Show me the map of” and then use modules like annyang for the last word(s).

@alexyak i can’t get it to work. it tested:
It sends sockets notifications from notifications.js to node_helper.js. But not from node_helper.js back to notifications.js.

Even if i put it in the start function of the node_helper.js:

start: function() { 
  this.sendSocketNotification("autosleep", {});
  }, 

it won’t get received it my notification.js:

socketNotificationReceived: function(notification) {
   if (notification === "autosleep") {
	  alert("autosleep received");
		awake = 0;
        		}
   	},

any idea? is it even possible to use it backwards?