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);

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