Very basic map-card for HomeAssistant/lovelace

map-card.js

import {
  LitElement, html
} from 'https://unpkg.com/@polymer/lit-element@^0.5.2/lit-element.js?module';

class MappingCard extends LitElement {
  static get properties() {
    return {
      hass: Object,
      config: Object,
    }
  }

  _render({ hass, config }) {
    var markers=  this.config.entities.map(ent => hass.states[ent]).filter(entity => 'latitude' in entity.attributes).map((state) =>
           `&markers=color:blue%7Clabel:${ state.attributes.friendly_name }%7C${ state.attributes.latitude },${state.attributes.longitude}`
       
   ).join('');

  


    var htmlStr = html`
      <style>
        :host {
          box-shadow: var(--paper-material-elevation-1_-_box-shadow);
          display:block;
          border-radius:2px;
          transition: all 0.30s ease-out;
          background-color: var(--paper-card-background-color, white);
          font-family: var(--paper-font-body1_-_font-family);
        }
        mapping-card {
          padding: 0px;
          display: block;
          font-size: 18px;
        }
        .state {
          display: flex;
          justify-content: space-between;
          padding: 0px;
          align-items: center;
        }
      </style>
      <mapping-card elevation="2">
        <div class="state">
          <img src="https://maps.googleapis.com/maps/api/staticmap?size=400x400&maptype=roadmap${markers}"/> 
        </div>
      </mapping-card>
    `;
    return htmlStr;
  }


  // The height of your card. Home Assistant uses this to automatically
  // distribute all cards over the available columns.
  getCardSize() {
    return this.config.entities.length + 1;
  }
}
customElements.define('map-card', MappingCard);

This is a very simplistic custom card to display device trackers on a Google map. It can be added to the lovelace view with the following yaml

      - type: "custom:map-card"
        entities:
          - device_tracker.my_phone
          - binary_sensor.fd_sensor
          - zone.work

I only have one device tracker that logs with GPS, so I added the zone.work in order to see it show multiple trackers. The binary_sensor of course doesn't have a latitude attribute, so it doesn't show up at all.

I would like to figure out how to add optional attributes to each entity so that I can specify color and label to show up, I figure it should be something like this

      - device_tracker.my_phone
          color: red
          label: Me
      - device_tracker.your_phone
          color: green
          label: You

If anyone has any tips on how to parse the color and label entries, that would be great

I don't want to include a Google Map card as an official card in Home Assistant, however, this is a great custom card that we can share 👍 For an official card, it should use Leaflet and the same tile provider as we do for the map panel.

btw, please add some enters in your code, you're not a cave man 😉

const markers =  this.config.entities
  .map(ent => hass.states[ent])
  .filter(entity => 'latitude' in entity.attributes);

Instead of mapping-card, use ha-card. And remove the CSS for the shadow.

Thanks @balloob, I'll take a look at the map panel and see if I can adapt the code.

Hi I tried your custom component, but I get an error saying "custom element doesn't exist: map-card. the javascript console says: "Uncaught SyntaxError: Unexpected token {
So I think the js code has an error.

@lweberru same here