Why the Heck can't I just use Google maps as a card?

shanem · September 7, 2020, 4:38pm

Right now we either have to use open street map, or use the workaround that requests images of google maps as a picture card.

So why the heck can’t Home Assistant just have a Google Maps integration/card?

I believe this is the appropriate API, https://developers.google.com/maps/documentation/javascript/geolocation

Edit: I know you can embed it as an iframe, but that is no good for geolocation sensors (yeah i know i should’ve specified before), the idea is i want to see the location of a person over layed on Google maps.

Steven_Rollason · September 7, 2020, 5:40pm

I think the problem with that is the requirement for an API key. I know there are integrations which require API keys but, as far as I know, there are no cards that require this.

valvex · September 8, 2020, 8:08pm

Actually, you can use Google Maps with an iframe card.
You must have a Google Maps API key and load a local html page with the appropriate code.

Here’s an example of my implementation:

I mostly display this card on a morning routine just to check the current traffic in my city.

If you’re interested in the html code, let me know!

tboyce1 · September 8, 2020, 11:05pm

I’d be interested in the entire config for this page. I like the organization and compactness and I’m starting on a similar page myself.

shanem · September 9, 2020, 12:51am

i know you can do that, i just meant for device trackers, so for example if i want to see my dads location, i have to either have a zone for that location, or figure out “what is on x road?”

valvex · September 9, 2020, 2:28am

@tboyce1 This is actually my “developping” page, where I test different card configurations.
However, the majority of my lovelace configuration is based on the same design, so here’s for example the ‘NAS’ Card configuration so you can get a general idea.

 type: entities
 entities:
      - type: 'custom:multiple-entity-row'
        entities:
          - entity: sensor.nas_cpu_load_total
            name: CPU
          - entity: sensor.nas_memory_usage_real
            name: RAM
          - icon: 'mdi:dots-vertical'
            tap_action:
              action: url
              url_path: 'http://192.168.*.*'
        entity: binary_sensor.nas_security_status
        icon: 'mdi:nas'
        name: NAS
        secondary_info:
          entity: binary_sensor.nas_security_status
          name: ' '
        show_state: false        
      - entities:
          - entity: sensor.nas_network_down
            name: Down
          - entity: sensor.nas_network_up
            name: Up
        entity: binary_sensor.nas_security_status
        icon: ' '
        name: ' '
        show_state: false
        tap_action:
          action: none
        type: 'custom:multiple-entity-row'
      - style:
          background-color: black
          height: 1px
        type: divider
      - entities:
          - entity: sensor.nas_drive_1_temperature
            name: ' '
          - entity: sensor.nas_volume_1_used_space
            name: ' '
          - entity: sensor.nas_volume_1_volume_used
            name: ' '
        entity: sensor.nas_drive_1_status
        icon: 'mdi:harddisk'
        name: Drive
        secondary_info:
          entity: sensor.nas_drive_1_status
          name: ' '
        show_state: false
        type: 'custom:multiple-entity-row'
      - entities:
          - entity: binary_sensor.nas_drive_1_below_min_remaining_life
            name: Life Error
          - entity: binary_sensor.nas_drive_1_exceeded_max_bad_sectors
            name: Sector Error
        entity: binary_sensor.nas_drive_1_below_min_remaining_life
        name: ' '
        show_state: false
        type: 'custom:multiple-entity-row'
      - style:
          background-color: black
          height: 1px
        type: divider
      - entities:
          - entity: sensor.nas_network_down
          - entity: sensor.nas_network_up
        group: true
        hours_to_show: 4
        line_width: 3
        points_per_hour: 5
        show:
          icon: false
          labels: true
          name: false
          state: false
        type: 'custom:mini-graph-card'

mrand · September 11, 2020, 2:32pm

Does the map auto-refresh, or do you have to manually refresh? If you have worked out a way to auto-refresh, LOTS of people (myself included) would be interested in details on how you are doing it.

petro · September 11, 2020, 3:17pm

If you install the HomeAssistant app on his phone, there’s a geocode sensor that’s available with the device tracker.

shanem · September 11, 2020, 8:44pm

I know, but as far as i am aware, all I can do is either view his location from the sensor history, or have it displayed in a map card. My request is an option to use Google Maps instead of Open Street Map. I know the Ariela app does it.

petro · September 11, 2020, 9:41pm

And I was replying to your last post, not the overall thread

If you expand a response with the little reply arrow, you can see who a person was responding to.

valvex · September 11, 2020, 11:40pm

When you refresh Lovelace the map will certainly refresh as well and fetch the latest info.

I have also noticed that the traffic layer is dynamically updated without having to refresh Lovelace.

However, I cannot be 100% sure for the latter, since I only use this card as a popup on my DIY Frame, each morning before leaving for work.

A Lovelace refresh will certainly refresh the map.

*edit: You can of course drag and scroll on the map as expected. I mean it is not a static image.