3

I would like to know how to include Google Map in Polymer 3. I have just upgraded to Polymer 3 from Polymer 2. This is my sample that is not working base of the starter-kit

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import '@em-polymer/google-map/google-map.js';
import '@em-polymer/google-map/google-map-marker.js';
import './shared-styles.js';

class MyView1 extends PolymerElement {
  static get template() {
    return html`
      <style include="shared-styles">
        :host {
          display: block;

          padding: 10px;
        }
      google-map {
        height: 600px;
        width: 600px;
      }     
      </style>

      <google-map latitude="37.779" longitude="-122.3892" min-zoom="9" max-zoom="11" language="en" api-key="XYZ">
      </google-map>
      <div class="card">
        <div class="circle">1</div>
        <h1>View One</h1>
        <p>Ut labores minimum atomorum pro. Laudem tibique ut has.</p>
        <p>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Cu mei vide viris gloriatur, at populo eripuit sit.</p>
      </div>

    `;
  }
}

window.customElements.define('my-view1', MyView1);

I get the following 2 errors:

element-mixin.js:322 template getter must return HTMLTemplateElement

and

Uncaught TypeError: Cannot read property 'api' of undefined
    at HTMLElement._initGMap (google-map.js:480)
    at HTMLElement.attached (google-map.js:457)
    at HTMLElement.attached (class.js:262)
    at HTMLElement.connectedCallback (legacy-element-mixin.js:117)
    at HTMLElement._attachDom (element-mixin.js:653)
    at HTMLElement._readyClients (element-mixin.js:620)
    at HTMLElement._flushClients (property-effects.js:1749)
    at HTMLElement.ready (property-effects.js:1853)
    at HTMLElement.ready (element-mixin.js:604)
    at HTMLElement._enableProperties (properties-changed.js:363)
Nolin P
  • 111
  • 4

1 Answers1

7

@em-polymer/google-map/google-map.js was

import { Polymer } from '../../@polymer/polymer/lib/legacy/polymer-fn.js';
import { IronResizableBehavior } from '../../@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
import '../google-apis/google-maps-api.js';
import './google-map-marker.js';
Polymer({
  _template: `
    <style>

and fix is

import { Polymer } from '../../@polymer/polymer/lib/legacy/polymer-fn.js';
import { IronResizableBehavior } from '../../@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
import '../google-apis/google-maps-api.js';
import './google-map-marker.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
Polymer({
  _template: html`
    <style>
Nolin P
  • 111
  • 4
  • Hi, I have done the changes mentioned in your answer. But then Iam getting the following error `Google Maps JavaScript API error: DeletedApiProjectMapError` .. I have followed the npm documentation from this link `https://www.npmjs.com/package/@em-polymer/google-map` ... but no luck... can you help me with any inputs – shabarinath Mar 30 '19 at 16:40