Device tracker map for Home Assistant (similar to the Google Maps Timeline)

github
Tags: #<Tag:0x00007f1ba6137928>

#1

Tracking and mapping one or more devices using Home Assistant, Google Sheets, Google Maps Api, and IFTTT. Similar to Google Maps Timeline feature.

Displays the history of a Home Assistant device tracker (e.g. phones) on a Google map. Uses Google Sheets as data storage.
I am aware, that all this could be done a lot easier with a small python script and a local file or sending a PUT REST to Google Sheets or even using the local history. I prepared this as a small training project that goes through a lot of stuff.
You can also ignore most of the stuff in the git and just feed a local CSV file to the map.

Features:

  • Now with multiple devices!
  • Date filters: day, period (you can go back in time as long as you want);
  • Markers: on/off;
  • Polylines: on/off;
  • Distance traveled;
  • Heatmap: +/- radius, +/- intensity, opacity, gradient color;
  • Auto resize, recenter;
  • Code can be easily customized to add/remove features (e.g. add filter for multiple devices);
  • Can be used as a panel iframe or as a custom state card iframe - using my custom iframe state card (it’s a html file);
  • Disabled more-info card.
  • Terrible setup procedure!:grinning:



#2

Will this work for multiple devices? i.e. our phones


#3

For now it’s one device per map (any type of device that feeds coordinates). If you send data without any device tag (like now), from multiple devices to the same Google sheets file it will be a bit of a mess.
You either: create a different map for each device or send a device tag together with the other data and create a filter in the html to organize it a little. If there is enough interest I will implement proper multiple device support. Myself, i don’t need it (for now).
--
It supports multiple devices now.


#4

Hey, just implemented your setup for the panel iframe, but no map shows up on the front end, there are three entries in the google sheet, and I get the following in console.

I went over the configuration a couple times.


#5

Do you see the map? See if the html works in jsbin.


#6

No map on frontend or jsbin


#7
  1. It could be something small. Are you sure you did’t have an extra : in your html?
  2. It could be that you don’t have a good Google Maps API key. Does this work: https://jsbin.com/zejuxih/edit?html,output? <- Insert your API key.
  3. If yes, do you see the line?

#8

Hi,

this is a cool solution. :clap:

Here is a small, dirty, not-final adjustment with direct integration in the HA history API.

var URL = 'https://YOURHAURL/api/history/period/2018-02-06T07:41:28.321Z?api_password=YOURPASSWORD&filter_entity_id=device_tracker.YOURDEVICEID&end_time=2018-02-12T07:41:28.321Z';
        d3.json(URL, function(error, data) {
            csv = data[0]
            //csv = data.filter(function(row) {
            //    return (row['last_changed'] >= document.getElementById("date").value && row['last_changed'] <= document.getElementById("date2").value);
            //});
            var bounds = new google.maps.LatLngBounds();
            var location2 = [];
            csv.forEach(function(d) {
                var location = new google.maps.LatLng(d['attributes'].latitude, d['attributes'].longitude);
                //For debug uncomment the following line:
                //console.log(d['attributes'].latitude)
                path.push(location);
                heatmapData.push(location);
                var marker = new google.maps.Marker({
                    position: location,
                    map: map,
                    title: 'test',//d.Title,
                    icon: URLMarker,
                });
                //bounds.extend(location);
                //map.fitBounds(bounds);
                marker.infowindow = new google.maps.InfoWindow({
                    content: 'test',//d.Title
                });
                marker.addListener('click', function() {
                    this.infowindow.open(map, this);
                });
            });
        });

If you would like to test this in tools like JSBIN you need to add “CORS” header. Sample script for NGINX


#9

Excellent! If everything works fine, and you agree I would like to add it to the git (crediting you).

Something to consider when using this approach is that you can’t go back in time too much (limited by your database purge). Also the URL should be edited to allow dynamic dates.


#10

https://jsbin.com/zejuxih/edit?html,output2? <- Insert your API key.

I get the following with any key used from different accounts:

"Google Maps API error: InvalidKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error"
"TypeError: Cannot read property 'push' of undefined
    at https://null.jsbin.com/runner:96:22
    at Array.forEach (<anonymous>)
    at https://null.jsbin.com/runner:91:17
    at Object.<anonymous> (https://d3js.org/d3.v4.min.js:2:64779)
    at k.call (https://d3js.org/d3.v4.min.js:2:99927)
    at XMLHttpRequest.e (https://d3js.org/d3.v4.min.js:2:63355)"
"Google Maps API warning: InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key"

"Google Maps API error: InvalidKeyMapError =
The API key included in the script element that loads the API is not found. Please make sure you are using a correct API key. You can generate a new API key on the Google API Console.


#11

As you just written you have a bad API key. Go to the Google Api Console and create a new one. Before that enable the Google Maps Api. It takes a few minutes for the Api key to activate once created.


#12

That error was with the new and old API keys:
image

The API is enabled:
image


#13

Am I limited to the amount of times I can use the above link?

I’m getting “invalid-key-map-error” with six different API keys???


#14

Maybe you have a cache problem or you need to wait a bit longer for the key to activate.


#15

Well it has now been 6hrs since,and I’m still getting the same error.

I’m truly baffled, would really like to implement this.

image

image


#16

I have tried 8 different keys so far, from different dates as far back as Jan 2017, all giving the same error.


#17

No idea how to help you. Google might help you more than me here (or not). Read a bit about the keys, maybe you are not getting or activating the right one or placing it correctly in the URL.


#18

Can I PM you a key to test?


#19

Okay, not sure what on earth was wrong, cleared my cache and all browsing data, still didn’t work.

Went back to the spreadsheet, stop publishing, then publish again, and it now works.

Thanks for all your patience and assistance, and of-course, for the great share.


#20

Hello

I have a SmartHome system would like to track again SmartHome system my location of the mobile phone to control various things.
Is there a possibility to get the data only with a request of course with the Abi key.
I just need the coordinates everything else I can do in large format in Json format.

https://www.googleapis.com/geolocation/v1/geolocate?key=YOUR_API_KEY” ???

I ask a tip.