Google Maps JavaScript API с подсветкой

Question

Я пытаюсь создать пользовательский элемент с lit-html, который использует API Карт Google.Как можно заставить его работать вместе?Вот что у меня есть:

map-element.css:

#map {
    height: 400px;  /* The height is 400 pixels */
    width: 100%;  /* The width is the width of the web page */
    background-color: grey;
}

map-element.js:

import {
    LitElement,
    html
} from '@polymer/lit-element';

class MapElement extends LitElement {
    render() {
        return html `

        <link rel="stylesheet" href="map-element.css">

        <div id="map"></div>

        <script>
            function initMap() {
                // The location of Uluru
                  var uluru = {lat: -25.344, lng: 131.036};
                // The map, centered at Uluru
                var map = new google.maps.Map(
                    this.shadowRoot.querySelector('#map'), {zoom: 14, center: uluru});
                // The marker, positioned at Uluru
                var marker = new google.maps.Marker({position: uluru, map: map});
            }
        </script>
        <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initmap">
        </script>
    `;
    }


}
customElements.define('map-element', MapElement);

Вывод - это просто заполнитель для div с идентификатором карты, и я не получаю никаких ошибок.

Вот ссылка на код, который я пытаюсь использовать в своем элементе: https://developers.google.com/maps/documentation/javascript/adding-a-google-map

Answer 1

Вы можете добавить сценарий в методе connectedCallback, чтобы убедиться, что он включен, когда компонент включен в DOM

constructor() {
  this.callbackName = 'initMap';
  this.mapsUrl = https://maps.googleapis.com/maps/api/js?key=MYAPIKEY
}
connectedCallback() {
  window[this.callbackName] = this._initMap.bind(this)
  this._addMapScript() // This
}

addScript: function() {
  var script = document.createElement('script');
  script.src = `${this.mapsUrl}&callback=${this.callbackName}`;
  var s = document.querySelector('script') || document.body;
  s.parentNode.insertBefore(script, s);
}

_initMap() {
  // To be we have shadow DOM ready.
  this.updateCompleted.then(this.initMap);
}

initMap() {
  // Your code here
}

Что-то подобное должно работать