Polymer bindings inside of a google-map-marker don't work. about google-map

[bhinderbaljeet]

Hi is there any solution of the current issue as I also have this case:

<google-map id='my-map' latitude="xx.xxxx" longitude="xx.xxxx" api-key="xxx">
    <template is="dom-repeat" items=[[map_markers]]>
        <google-map-marker latitude="[[item.lat]]" longitude="[[item.long]]">
            <div class="info-swipe">
                <iron-pages selected="{{selectedInfoWindow}}">
                    <template is="dom-repeat" items="[[item.content]]">
                        <div class="info-content">
                            [[item.title]]
                        </div>
                    </template>
               </iron-pages>
                <paper-icon-button on-tap="{{_showNextInfoWindow}}" icon="icons:chevron-right"></paper-icon-button>
            </div>
        </google-map-marker>
    </template>
</google-map>

and _showNextInfoWindow is not getting fired at all.

right now I am doing it like:

<paper-icon-button onclick="_showNextInfoWindowJs()" icon="icons:chevron-right"></paper-icon-button>

//component function 
_showNextInfoWindow: function (){
    console.log('reaching');
    this.set('selectedInfoWindow', this.selectedInfoWindow+1);
}

// simple js function to handle click of infowindow button
function _showNextInfoWindowJs(){
    //trigger elements function from JS
    document.querySelector('x-elt')._showNextInfoWindow();
}

console gets printed but the variable selectedInfoWindow is not getting reflected in infowindow though it does gets updated if I place selectedInfoWindow outside map.

[vedtam]

Hi,

I am facing the same issue as @peterjuras. The map/marker updates just fine but the Latitude and longitude won't change on subsequent updates. When digging down the dom tree, google-map-marker contains the updated coordinates but its not reflecting in the front end.

<paper-input class="city" label="Oras" value="{{city}}"></paper-input>

<google-map-search map="[[map]]" query="{{city}}" results="{{results}}"></google-map-search>

<google-map map="{{map}}" latitude="{{results.0.latitude}}" longitude="{{results.0.longitude}}" api-key="AIzaSyBZMgpsVRmhRHpqALrfQbYgjPFBlWI_nmo" fit-to-markers zoom="6">
     <template is="dom-repeat" items="{{results}}" as="marker">
        <google-map-marker slot="markers" latitude="{{marker.latitude}}" longitude="{{marker.longitude}}">
            <h2>My position</h2>
            <p>Latitude: [[marker.latitude]]</p>
            <p>longitude: [[marker.longitude]]</p>
       </google-map-marker>
     </template>
   </google-map-marker>
</google-map>

[mattjonesorg]

And here it is in the designer: https://www.polymer-project.org/tools/designer/#55c25205142a0d2abf5e

The expected behavior is that when you tap the paper-icon-button in the InfoWindow, a "Hello World" dialog should appear.

[ebidel]

Thanks for the designer link. The problem here, where we use markerElement.innerHTML to pull create the infoWindow content from. That's quite literally:

<paper-icon-button on-tap="{{ tapped }}" ...></paper-icon-button>

and the {{ tapped }} binding is not processed. info.setContent(content); can take a node instead, but it looks like it copies the node from my testing. It would be ideal if setContent(content) could just reference a node.

@brendankenny , I'm not sure of a great way to support this. Any thoughts?

[DrFritzi]

We used juicy html as a very dirty work arround:

<google-map-marker>
      <template is="juicy-html" content='<your-element binding={{example}}></your-element>'>
      </template>
</google-map-marker>

https://github.com/Juicy/juicy-html

[mattjonesorg]

I was hoping that something like this might work in the google-map component.

    var contentDiv = document.createElement('div');
    this.injectBoundHTML(this.innerHTML, contentDiv);
    var content = contentDiv;

This looks promising from: Polymer/old-docs-site#607, but the behavior was the same.

[funkjunky]

I've been mulling over this issue for about 2 hours now...

[ebidel]

Closing as this is pre Polymer 1.0. Please reopen if you can still reproduce or want to see this implemented in the new element.

[peterjuras]

I still have issues with bindings inside a map marker. If you have something like:

<google-map id="map" latitude="[[latitude]]" longitude="[[longitude]]">
  <google-map-marker id="map-marker" latitude="{{latitude}}" longitude="{{longitude}}" draggable="true">
    <h2>My position</h2>
    <p>Latitude: [[latitude]]</p>
    <p>longitude: [[longitude]]</p>
  </google-map-marker>
</google-map>

Then dragging the marker correctly updates the map, but the info window still shows the old content. If you dig down into the DOM tree, you see that the values of the paragraphs have actually been updated, but it is not displayed on the page.

[ebidel]

Hmm, we have code that should handle this case: https://github.com/GoogleWebComponents/google-map/blob/master/google-map-marker.html#L360-L392

Can you file another issue and post a jsbin that repos the problem? Thanks.

[LeongTitanFour]

The google-map-marker is good work but it stucks that cannot work with animation.

<google-map latitude="" longitude="" api-key="[[apiKey]]" zoom="13" fit-to-markers>
          <google-map-marker animation="BOUNCE" slot="markers" id="marker" latitude="" longitude="" api-key="[[apiKey]]"></google-map-marker>
          <template is="dom-repeat" items="[[locations]]">
            <google-map-marker slot="markers" latitude="[[item.lat]]" longitude="[[item.lon]]" api-key="[[apiKey]]" draggable="true"></google-map-marker>
          </template>
      </google-map>