intended purpose of google-maps-api?

[jjkaelin]

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.

[jjkaelin]

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>