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

Does anyone know if someone has already created an App/Driver that can take the latitude and longitude attributes from some other HE device and then show a pin drop on a google map that can be displayed as a tile on a dashboard. For example the Tesla Connect app is able to return the lat/log of where is my car lets say Tesla HQ. If I could then take those attributes and pass to another app/driver that could produce a google map attribute to load a tile is what I woudl like to accomplish. What is on this page is the end result I would like to see as a Dashboard tile

http://maps.google.com/maps?q=37.4924685,-121.9468857&spn=0.004250,0.011579&t=h&iwloc=A&hl=en

2 Likes

To bring this back to the original conversation from the iFrame Advanced thread, it would be very easy to add a custom command to that driver to allow the setting of the url preference setting, which you could call from within an RM rule.

I know I suggested you setup a separate thread, which I still agree with, but it may be a simple thing for @mbarone to all to the iFrame driver...?

Getting more into the developer side of things...

Perhaps in addition to updates for the iFrame Advanced driver, it may also be an interesting project (for someone else :slight_smile: ) to create a driver / app to cover the broader feature of device tracking. I'm thinking you could have an app that could cater for a number of devices being tracked, with parent HE devices for each, with component devices to cover tracking plus visualising these including using Google Maps, or potentially other display options.

The challenge with the iFrame driver pulling a Google Maps is you have to first query Google Maps to get the specific iFrame URL

That is easy for a static location but in this case my goal is to have a dynamic map that puts a pin drop based on the lat/log of attribute from another driver. I know I can create a rule to populate one driver based on attributes from another driver the question is how to query Google to get the iframe URL. I'm guessing there is probably a way to obtain all this using the Google Maps API but before I try and code all that I wanted to see if someone in the community has already done this.

1 Like

Leveraging @mbarone iframe driver code I created a new version of the driver dedicated to displaying Google Maps based on latitude and longitude attributes. With this driver I was able to create a Hubitat Rule that triggers anytime the latitude or longitude attributes changes for my Tesla driver and then updates this new Google Maps Iframe driver with the current map location where my car is located. I'm also using this for other devices I have in HE that also contain Lat/Lon attributes to display map locations for those devices.

I've been attempting to create a Google Maps ifame advanced driver version based on @mbarone Iframe Advance code but as I'm new to Groovy Programming I stuck figuring out how to pass the values obtained from the commands into the "launcher" section of the code that are currently reading the values from the parameters section. If someone can point me to an example how to pass command values will be much appreciated.

Anyway, the code for the Google Maps iFrame driver is available at:

1 Like

thanks also now integrating this to my husqvarna mower dashboard.. any way to change the iframe options or css to show it in satellite mode?

1 Like

Great idea, I've updated driver to now included a parameter to define the type of map you want to be displayed in the tile.

i've also made some changes if you want to take a look. and combine.. i added some functions so you can set the attributes with rules without needed extra variables. and then a fx to update the frame.. there were also some changes to the html as it wasnt honoring the zoom level and the language was in spanish instead of english

zoom level should proabably be an option as well.

here is my current version.. thanks for this..


2 Likes

Thanks this is very helpful as I'm learning how to code with Groovy.

I will combine your code with mine and publish on Monday including adding Zoom Level as a parameter

2 Likes

You could improve the map type selection with an enum.

Eg.

input "mapType", "enum", title: "Select your desired map type", options: ["h":"Hybrid","k":"Satellite","n":"Normal"], defaultValue: "h"

2 Likes

New version of the driver has been posted to GitHub that contains code contributions from @kahn-hubitat and @Baz2473 along with a new Parameter to set the Zoom level of Map.

1 Like

@kahn-hubitat Can you please provide a screen shot of your action parameter types? Using your version of the driver using the %value% for the parameter is not pulling the value of the attribute using the 5.1 rule engine e.g.

Regarding the zoom level. if you include range: "1..21", this will prevent anyone from putting an out of range number in the input field. :+1:t3:

eg

input "MapZoomLevel", "number", range: "1..21", title: "Enter a value between 1-21 (default is 14) to set Zoom Level for Google Maps", defaultValue:14

1 Like

Need to fill in %value% then turn on variable parameter value toggle.

Great work btw guys.... Great to see this feature and dev's working well together...

2 Likes

Thanks, I've added the range to the code and posted to Github

@kahn-hubitat you lost me on this one. Can you please provide screen shots how to get %value% to work or point me to where I can read how to do it. Thanks!

Everything is.fine in your screen shots above...
Just make sure to turn on the toggle circled in red
In this screen shot.

Also the rule.will not work via testing
It needs an actual value to come in through
The trigger. That.is why it shows zero

1 Like

Thanks the trigger was the issue. As soon as I moved my car and the attribute changed the rule updated. Maybe someday the HE documentation will cover all this.

1 Like

Hi @gomce62.web
Is it possible to present multiple locations on the same map?
The request is to use this driver with the Life 360 integration (that expose the latitude and longitude for each member into a dedicated device) and see all my family members on the same map.
Thanks,

This would require a lot of custom coding of the driver to pass all the required attributes to Google Maps to display multiple waypoints. The current version just accepts one waypoint.

As your goal is to use Life360 I recommend you check out this thread https://community.hubitat.com/t/maps-to-show-location-of-users/74162

Good luck

Download the Hubitat app