MMM-GoogleMapsTraffic

[blue2monster]

@vicmora : I’ve been trying all night long: just cant get the map to be shown.
I can see that the module is started in the dev logs.

Funny thing: If I add some different HTML Output in the module.js It is printed on my screen, the only thing missing is the map.
Same thing is happening on MMM-fuel and MMM-googlemap. Modules are working but the map itself is not shown.
Different one for iFrame: This one is working.

Interesting fact: If I check on the google dashboard for the traffic of this specific api key, I do not see any traffic. Is there anything special in the google api that I need to enable, or any additional module that needs to be installed.

Any ideas: Thanks a lot for the help.

[blue2monster]

@blue2monster: found now a workaround with the iframe module: This one works… but I haven’t made to switch the traffic layer on

[vicmora]

@blue2monster Have you tried adding position: ‘top_left’ to your config? I missed this in the docs but will update them.

[blue2monster]

@vicmora : yes, I added position to various spots(e.g top_left; bottom_center,…) and tried various width and heights but still frame not visible.
Tried as well a complete empty config with only this module loaded-> no sucess.
I guess it might be an Google api key issue: Could you please show you google api devboard: Which service needs to be activated in google api? An which is showing traffic on your google api?
Thanks.

[vicmora]

@blue2monster This is where I grabbed the api key: https://developers.google.com/maps/documentation/javascript/

[sprior]

I created a pull request that I’d like merged. I added a config parameter that allows you to specify the type of map to display, my favorite is the hybrid which shows a satellite image with the roads on top. I left the default to display just the road maps as before.

[vicmora]

@sprior Thanks! I merged it today.

[sprior]

I’m familiar with git, but not github as much. Since I forked your repository to make my change, then did a pull request which you accepted, I now show my repo as being one commit behind yours. How do I tell github to pull that commit, or do I just delete my repo and fork again when/if needed?

[cruunnerr]

Hey,

cool module but got some issues when trying to select a dark mode style.
I wanted to look the map like in this example: https://developers.google.com/maps/documentation/javascript/styling

well, i have tried to use your code and modify the colors. also i have tried to use the code from here: https://mapstyle.withgoogle.com

the module always starts, but i just got the standard view on it.

maybe you could explain a little bit more detailed how to do it. that would be great. thx

[knubbl]

@Osyris said in MMM-GoogleMapsTraffic:

Hey guys, I figured it’s easy enough to style the map by editing the JS file. So in order to get the night mode as shown in pflodo’s post (and to disable the UI buttons) I added the following to the JS code:

//original code
        script.onload = function () {
            var map = new google.maps.Map(document.getElementById("map"), {
            	zoom: 10,
            	center: {
            		lat: lat,
            		lng: lng
            	},
//add a comma after the } above
//new code:
		disableDefaultUI: true,
		styles: [
			{elementType: 'geometry', stylers: [{color: '#242f3e'}]},
			{elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
			{elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
			{
			    featureType: 'administrative.locality',
			    elementType: 'labels.text.fill',
			    stylers: [{color: '#d59563'}]
			},
			{
				featureType: 'poi',
				elementType: 'labels.text.fill',
				stylers: [{color: '#d59563'}]
			},
			{
				featureType: 'poi.park',
			        elementType: 'geometry',
			        stylers: [{color: '#263c3f'}]
			},
			{
				featureType: 'poi.park',
				elementType: 'labels.text.fill',
				stylers: [{color: '#6b9a76'}]
			},
			{
				featureType: 'road',
				elementType: 'geometry',
				stylers: [{color: '#38414e'}]
			},
			{
				featureType: 'road',
				elementType: 'geometry.stroke',
					  stylers: [{color: '#212a37'}]
			},
			{
				featureType: 'road',
				elementType: 'labels.text.fill',
					  stylers: [{color: '#9ca5b3'}]
			},
			{
				featureType: 'road.highway',
				elementType: 'geometry',
				stylers: [{color: '#746855'}]
			},
			{
				featureType: 'road.highway',
				elementType: 'geometry.stroke',
				stylers: [{color: '#1f2835'}]
			},
			{
				featureType: 'road.highway',
				elementType: 'labels.text.fill',
				stylers: [{color: '#f3d19c'}]
			},
			{
				featureType: 'transit',
				elementType: 'geometry',
				stylers: [{color: '#2f3948'}]
			},
			{
			        featureType: 'transit.station',
				elementType: 'labels.text.fill',
				stylers: [{color: '#d59563'}]
			},
			{
			        featureType: 'water',
			        elementType: 'geometry',
				stylers: [{color: '#17263c'}]
			},
			{
				featureType: 'water',
				elementType: 'labels.text.fill',
				stylers: [{color: '#515c6d'}]
			},
			{
				featureType: 'water',
				elementType: 'labels.text.stroke',
				stylers: [{color: '#17263c'}]
			}
		]
//old code again
            });

Have fun!

Also, if you want to make the background black (so it looks cool on the mirror), set the first attribute ‘geometry’ to ‘#000000’.

Try this…works 4 me