Open jjkaelin opened 6 years ago
After looking more into the google-maps-api web component using Polymer 2.0, I have gotten it to work rather well. I am able to display e.g. markers, polylines and ground overlays. I am including the custom-element that I worked on, in case this might be useful to someone else wanting to do the same. Comments and suggestions are welcome.
<!-- my-view2.html testing google-maps-api with simple example-->
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/google-apis/google-maps-api.html">
<dom-module id="my-view2">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
#map {
position: absolute;
width: 95%;
height:calc(85% - 0px);
}
</style>
<div>
<google-maps-api id="map" api-key="YOUR_KEY"
version="3.exp">
</google-maps-api>
</div>
</template>
<script>
class MyView2 extends Polymer.Element {
static get is() { return 'my-view2'; }
ready() {
super.ready();
var mapsAPI = this.shadowRoot.querySelector('google-maps-api');
mapsAPI.addEventListener('api-load', function(e) {
var pos = {lat: 40.7361, lng: -74.1618};
var map = new google.maps.Map(mapsAPI, {
center: pos,
zoom: 13,
});
var marker = new google.maps.Marker({
map: map,
position: pos,
draggable: true,
title: 'Newark',
});
var planCoordinates = [
{lat: 40.73324, lng: -74.12455},
{lat: 40.72699, lng: -74.13142},
{lat: 40.71724, lng: -74.13674},
{lat: 40.71242, lng: -74.14463}
];
var alignment = new google.maps.Polyline({
path: planCoordinates,
geodesic: true,
editable: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
var imageBounds = {
north: 40.773941,
south: 40.712216,
east: -74.12544,
west: -74.22655
};
var historicalOverlay = new google.maps.GroundOverlay(
'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
imageBounds,{
opacity:0.5}
);
historicalOverlay.setMap(map);
});
console.log('ready');
}
}
window.customElements.define(MyView2.is, MyView2);
</script>
</dom-module>
I am trying to understand the intended purpose of google-maps-api. There is only brief information shown on webcomponents.org.
I have made a first test using the google-maps-api web component with Polymer 2.0. I am able to display a map and a marker, but am encountering positioning issues and also need to refresh the screen several times to get an initial render. Maybe these issues are related to Polymer 2.0 or maybe I am using the google-maps-api for the wrong purpose? Are there any examples of using google-maps-api (aside from the basic one on webcomponents.org)?
I have tested the google-maps web components for basic functionality and this works fine for me. However I need additional functionality of the google maps api, which isn't available in the google maps web component.