Google Maps Integration

Third party integrations
1

So I wanted to see if I could intigrate Google Maps as a replacement for the built in Maps feature.
I was looking for something a little more robust than the built in map, and while the static map cards are cool, they dont offer any of the features the Full Maps api does.
Yes, I do need an API key for this, but I figure 20k requests per day on the free setup is more than enough.

This is basically a simple .html file sitting in the www folder.
Im using the iframe function and pointing to https://mydomain.com/local/gmaps.html.

So he is the rub. I need to be able to pull the information from device tracking for the locations into this HTML, which Im pretty sure is not possible with this method, as the variables below dont actually get anything from HA.

{{ states.device_tracker.myphone.attributes.longitude }}
{{ states.device_tracker.myphone.attributes.latitude }}

Any ideas on getting this to work, or maybe another method to look at?

Here is the simple html file.

<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body> {
	margin: 0;
}
<iframe src="//www.google.com/maps/embed/v1/place?q={{ states.device_tracker.billphone_bill_phone.attributes.latitude }}%2C{{ states.device_tracker.billphone_bill_phone.attributes.longitude }}
    &zoom=13
    &attribution_source=Google+Maps+Embed+API
    &attribution_web_url=https://developers.google.com/maps/documentation/embed/
    &key=MYAPIKEY" allowfullscreen style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
</iframe>
</body>
</html>
2

Try

{{ states.device_tracker.myphone.attributes.longitude }}

3

Crap sorry forgot to add attributes in the text above.
It is already present in html file though.

Can an HTML file hosted in the /www/ directory interpret these HA variables?

4

Probably have to do an API call to your HA instance from the html/js page when it loads and/or on an interval.

$ curl -X GET -H "x-ha-access: YOUR_PASSWORD" \
       -H "Content-Type: application/json" \
       http://localhost:8123/api/states/device_tracker.myphone

check here for more details: https://home-assistant.io/developers/rest_api/

5

quick and dirty and not tested… but try this:

function getLocation() {

	$.ajax({
	  "url": 'https://my.domain.com/api/states/device_tracker.myphone?api_password=PASSWORD',
	  "type": 'post',
	  "contentType": 'application/json',
	  "dataType": 'json',
	  "data": '',
	  "success": function (resp) {
		  //// take response and update google URL
		  return resp;
	  },
	  "error": function (XMLHttpRequest, textStatus, errorThrown) {
		  alert('something went wrong');
	  }
	});
}

add that to the onload and update the success logic and you’re on your way…