Ok, did not add ID to key url so that part is correct now.
So here we go…I had enabled:
Geocoding API
Geolocation API
Maps Embed API
Maps Static API
and only thing that is needed is:
Maps JavaScript API
…and now it works. Did I get it right that I just need JavaScript API and can disable those other 4 APIs?
EDIT: disabled all other APis and it is still working.
You did notice that avatar image is showing just a tiny part. Did you had any idea what and where to look to fix this?
The sample code uses 48x48 for the maker imager, and you can change it in the setMarker() function in the code.
And you can find more details about this in the Google Map document below:
https://developers.google.com/maps/documentation/javascript/markers#complex_icons
Thanks, that explains. One more thing. Is there a possibility in SharpTools to open custom tile from hyperlink? My dashboard includes tiles to show location info of family members. It would be cool to open life360 map view (this custom tile) when Action (tap) is done.
Or you can create a dedicated dashboard for this Life360 custom tile, and use the Dashboard Tile to navigate to this dashboard when tapped?
I’d like to get this working on my dashboards but I’m struggling. I’ve followed the instructions but just get a blank tile on the dashboard (on both my MacBook Pro with Safari and Fire HD with Fully). It’s doing something as when I touch the tile I get the prompt “use two fingers to move the map” - there’s just no map visible.
Although I followed the instructions, there are a couple of bits that aren’t clear:
1 - Which Google API do I need? - there are several listed and the instructions do not indicate which to use in the project. I have just used “Maps Javascript API” - Is that correct?
2 - Although I set up the billing/activated the trial - I cannot seem to confirm it is enabled for the sample project. I clicked on the link within the docs and it doesn’t confirm whether it is enabled or not (for the project).
3 - After creating the API key. There’s a prompt to “Remember to configure the OAuth consent screen” Do I need to do anything?
4 - Finally. If I want to set up tiles for 2 people on my dashboards (my wife and myself) - can I do this with a single Maker API instance (just editing the relevant device ID in the tile) or do I need to set one up for each individual and likewise with the Google Maps API key - 1 or 2?
Thanks for any assistance.
EDIT: Oops I think I’ve got the wrong Life 360 app on Hubitat (the built in rather than the community app)
Hi @John_Williamson, it sounds like the Google Map is initiated correctly in your tile, and I would hesitate to guess the tile is not able to get the latitude and longitude from your Life360 device. (As you identified, you will need to make sure you can see the latitude and longitude attributes in your Hubitat device page first.)
You don’t need a separate Google Map API key nor the Hubitat Maker API instance, you simply just need to use a different Life360 device id in another tile with the same Google API key and Hubitat maker API info.
I played with an alternative mapping service, OpenStreetMap, that doesn’t require all the complicated setup steps of Google Maps… let me take a look at what it would take to port James’ demo over to that. 
@James - I must be missing a driver or something? I have the Hubitat Life 360 Connector installed and logged in to my account. I’ve just installed the community Life360 tracker and child apps for the two people, but I’m only seeing devices created by the built in Connector app which does not expose Lat & Lon info as they have the Hubitat built in Virtual Presence device driver selected.
@John_Williamson, make sure you have added this device driver in your Hubitat, so when setting up the Life360(Connect) smartapp as shown below, it should create the device(s) based on the Life360 members selected for you automatically.
https://github.com/bptworld/Hubitat/blob/master/Ported/Life360/L-driver.groovy
I might have the wrong app - again! There’s very little install information on the users GitHub that a novice like myself can make sense of. I installed the Life 360 Tracker app and now have the driver you linked but not Life360 with States app. Do I need both the “Tracker” app and “with States” app, or just the latter?
You’ll want both the ‘Life360 with States’ and ‘Life360 Tracker’. Here’s the description from the Life360 with States release thread:
Differences in Apps…
- Life360 (phone app) - https://www.life360.com/
- Life360 with States - Pulls all the data into Hubitat from the phone app
- Life360 Tracker - Uses the data in Life360 with States to do some cool stuff!
HE Life360 Connector should be at the least disabled, if not removed as it is not needed.
PS. Have you looked into Hubitat Package Manager? It’s only one ‘app’ (one file) to install and a lot of the Hubitat community developers use it which makes installing their packages easier.
@Josh Yeah just downloaded the “with states” and deleted the Hubitat Connector one. I can see that it’s now created the additional “Devices” for my wife and myself…watch this space, I’ll be back 
Right - finally getting somewhere. I’ve got a map up and showing in the tile, the centre of which is where I’m located. I put an image on my google drive and set it so that anyone with the url could view it, but there is no avatar visible on the map at all. Are there specific dimensions needed for that avatar, or is there a way of just using a marker icon perhaps?
Edit: All sorted. I just had to search the web for how to modify the Google Drive shareable link to a direct download link for the jpeg.
Thanks for sharing the fix!
PS. I pushed an update to James’ repository yesterday that swaps out Google Maps with OpenStreetMap so it’s easier to get started with this tile. The avatar URL is also optional now too.
It sounds like you got things working, so there’s no strong reason for you to update, but for anyone else, you can update by following these steps:
I made a few more tweaks to improve the look and feel with the OpenStreetMap version. There’s now an optional Map Source setting.
The setting can accept a few different types of values:
<empty>: Renders the default OpenStreetMap look:
bright: Modern bright colored map (CartoDB Voyager)
light: Light colored, neutral tone map (CartoDB Positron)
dark: Dark colored, neutral tone map (CartoDB Dark)
XYZ Basemap Format
There’s a number of different map providers out there like HERE, Stamen, Jawg, and more. Many of these require signing up for an API key and can then be used in this custom tile using the XYZ map format.
For example, here’s what the OpenStreetMap HOT source would look like
https://{a-c}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png
I’ve imported the new version and titled it “v2” so I could try both the Google and OpenStreetMaps to differentiate between the two versions when adding to a dashboard.
My thoughts are that the OpenStreetMap trumps the Google Maps version for several reasons:
1 - Easier setup without the need to setup the Google Cloud billing, API key etc.
2 - I’m finding it much snappier. With the Google version there’s a slight lag before the map loads when switching dashboards and another slight delay while the Avatar loads. It’s instant with OpenStreetMaps.
3 - The map is much cleaner - not covered with businesses names etc. Selecting one of the Map Source options is better still, as it removes the copyright banner from the bottom of the map.
4 - Zooming and scrolling to adjust the view in the tile is much more intuitive - single finger drag and simple zoom control.
As ever fantastic work and support from the SharpTools team. Many thanks.
Just a thought…Is there any way of modifying the zoom level/scale of the map when it first loads (without manually adjusting it)? The OpenStreetMaps version, when the tile first loads, covers roughly 100 square miles whereas the Google Maps one started much tighter. I was wondering whether there is anything in the code that would adjust that initial view - line 188 zoom 12? If I were to alter that figure and re import it would that achieve a tighter (street level) view? Thanks
Yes. When the map first loads, it’s zoomed out (zoom 5) to a roughly centered view of the US. It immediately tries to grab your location from Life 360 and then zooms in to 12 on that new point.
That first zoomed out view of the US is the variables around line 46-48 right after the <script> open tag.
The second zoomed in level is in the setMapCenter() method around line 184.
Edit: Also just wanted to note that you can open up your SharpTools Developer Tools → Custom Tiles and modify your existing tile. Once you’ve made the tweak, be sure to scroll down and press Update. Then you may need to refresh your dashboard to see the changes take effect.
Cool I’ll have a play with the one on line 184 until I get the scale I’m looking for. Thanks again.
Hi folks, we have create another Custom Tile - Life360 Live Map, which does the same thing but doesn’t need the Life360 device in SmartThings/Hubitat, and is much easier to setup. Take a look of the post below for more details.