How to create Dashboard Tile with Google Map that shows a device location

So these posts are a little old and I hope people are still using this map function. It has a lot of uses in the Dashboard.

I'm trying to get to a point where I can simply look at my dashboard in the morning on my way out the door and see the traffic from google maps on my route to work. Is there any good way of doing this with the current driver, or would that require more coding?

The google maps iframe does not look like there's a 'traffic' layer to be enabled. Although, if you have any programming ability you could take the Google iframe driver and make your own and use the Waze traffic iFrame (I didn't do a search here, there may already be one). From a cursory view the structure is similar (provide lat/long/zoom) so converting google iframe driver should be straightforward.

@user3209 Sorry for the delay in responding. Yes it is possible to create a Dashboard that shows Google Maps traffic for a route using the iFrame Advanced community driver. All the steps are documented at: [RELEASE] iFrameAdvanced - #18 by sburke781

1 Like

@gomce62.web

Thanks for this, seems very useful.

Can anyone suggest how to use this within a sharptools dash?

image

Copying over some of our discussion from the SharpTools Community regarding this topic...


On the SharpTools side, you can use the Hubitat HTML Attribute Custom Tile to display attributes that are stuffed with HTML. The linked thread explains the what and why. :slight_smile:

While the original Hubitat Map SharpTools Custom Tile was designed around a Life360 driver, it should work with any driver which reports a latitude and longitude attribute. So I suspect you should be able to use that custom tile with this driver or any other driver which has latitude and longitude attributes.

1 Like

I'm absolutely useless with this kind of thing, I just end up flopping around in the dark.

I did take a crack at this:

image

That was using:

However, if my hubitat device's lat/long changes, I can't see this reflected in the sharptools tile unless I do a screen refresh.

Additionally, the zoom is a problem and the tile isn't clickable.

Since the questions are about the SharpTools Custom Map Tile, I responded over in the SharpTools community thread with some options so as not to hijack this thread. :slight_smile:

2 Likes

Is anyone using a virtual Image device to display a google map on a dashboard? If yes, what is the URL string you are using?

I’d probably look at using the Virtual URL device with the type set to iframe instead.

2 Likes

def updateIFrame() {

    def lon = device.currentValue('longitude')
    def lat = device.currentValue('latitude')
    
    if (lon == null) lon = 0.0
    if (lat == null) lat = 0.0
    
   sendEvent(name: "zzziFrame", value: "<div style='height: 100%; width: 100%'><iframe src='https://maps.google.com/maps?q=${lat},${lon}&hl=en&z=19&t=k&output=embed&' style='height: 100%; width:100%; frameborder:0 marginheight:0 marginwidth:0 border: none;'></iframe><div>")       

}

1 Like

That format will work with the Virtual URL device

1 Like

I'm still struggling to getting a google traffic map displayed in a dashboard tile. Is there a step-by-step that I could use that works using today's APIs?

1 Like

Looks like the Virtual URL device is meant for use in the EZ Dash, if you want something for the Classic Dashboard you’ll need to use a custom iFrame driver (one at https://raw.githubusercontent.com/thebearmay/hubitat/refs/heads/main/tileIframe.groovy if you need it), and then use the attribute template on the dashboard to display the HTML.

2 Likes

I'm still struggling. I used your driver, and created a device using it. If I put a google map URL in the device's URL field, I get yellow triangle with an ! in the view window of that device. If I look at the dashboard tile, it displays this message:

Firefox Can’t Open This Page

To protect your security, www.google.com will not allow Firefox to display the page if another site has embedded it. To see this page, you need to open it in a new window.

I've tried various Google map URLs but with the same results.

Is there a How-To write somewhere on using one of the iFrame drivers to display a map?

Thanks.

Can you try it under Chrome? The message above sounds like a FireFox restriction.

What Google Maps URL are you inputting into the iframe parameter for the driver?