how to include google-map in polymer#^2.0 as it was working in polymer 1.7

I have included api, before everything were working perfect in polymer 1.7, after upgraded to polymer ^2.0 google map does not renders. here is my code in main app page written polymer class base:

<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">  
  <jj-maps name="maps"  user="{{user}}" sprof="{{sprof}}"></jj-maps>
  <jj-list name="list" >    Jobs   </jj-list>  
  <jj-infos name="infos">    infos      </jj-infos>
  <jj-contacts name="contacts" >  Contacts  </jj-contacts>
  <jj-messages name="messages">  Messages  </jj-messages>
  <jj-404 name="404" > 404          </jj-404>
</iron-pages>

at jj-maps.html code sample is :

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/google-map/google-map.html">
<link rel="import" href="../bower_components/google-map/google-map-marker.html">

style codes in template tag:

<dom-module id="jj-maps">
  <template>
    <style  include="iron-flex iron-flex-alignment">
      :host {
       .....
       google-map, #mapResults {
           margin-top: 10px;
           position: relative;
           height: 100vh;
           width: 100vh%; 
           z-index: 1;
       }

....

       <div id="mapResults"> 
         <google-map 
                  id="map" 
                  map="{{map}}" 
                  latitude="[[latitude]]" 
                  longitude="[[longitude]]" 
                  zoom="10"
                  api-key="[[myApiKey]]"  
                  on-google-map-ready= '_mapLoaded' 
                  additional-map-options='{"gestureHandling" : "greedy"}'
                  >
                 <google-map-marker map="{{map}}" slot="marker" latitude="{{latitude}}" longitude="{{longitude}}"
                      title="You are here !" icon="./src/image/gpslocc.png" draggable="true">
                 </google-map-marker>
                 <template is="dom-repeat" items="{{sprof}}" as="item">
                        <google-map-marker map="[[map]]" slot="marker" latitude="[[item.myLat]]" longitude="[[item.myLng]]" animation="DROP"  click-events  title="{{item.prof}}" icon="{{calculateIconType(item.isFree)}}" on-google-map-marker-click='showUserDetail' userid="[[item.uid]]" isFree="{{item.isFree}}" >
                        </google-map-marker>

                 </template>
                 <paper-fab icon="maps:my-location" on-tap="updateCurrentPosition"></paper-fab>
                </google-map>
        </div>

  </template>

this code works perfect in previous polymer. And Another point when I bower install the dependencies as bower install --save GoogleWebComponents/google-map

bower asks me for two as :

 - Unable to find a suitable version for polymer, please choose one by typing one of the numbers below: 
 I chose :  7) polymer#^2.0.0 which resolved to 2.0.1 and is required by myApp
    - Unable to find a suitable version for webcomponentsjs, please choose one by typing one of the numbers below:
I chose : 2) webcomponentsjs#^1.0.0 which resolved to 1.0.1 and is required by myApp

Sorry in advance that I ve written detailed codes. Meanwhile I have tried many options but could not able to render map in my jj-maps elements (class base template, even I have tried legacy template (as same as polymer 1.7 ver)

Here is is console warning :

dom-module.html:24 dom-module google-map has style outside template
dom-module google-map-marker has style outside template

Maps are not rendering...

So, how to solve ? Thanks in advance. (previous polymer ver. working at jobijoy.com

1 answer

  • answered 2017-06-17 17:54 Yao Liu

    I'm having exactly same issue. Tried to add slot="marker" to google-map-marker as someone suggested Polymer 2.0 issue in github but doesn't work for me. It looks like the google-map component's size is set to 0 by 0 thus does not display at all. Since the google components are not updated to be compatible with Polymer 2.0. I've manually updated my local google-map.html and google-map-marker.html files under bower_component folder and moved the style tags into the template tags. The warnings are gone and the map displays now. I guess we have to wait for the update of the google components for things to work properly. I hope this helps.