GoogleWebComponents / google-map

Google Maps web components

Home Page:https://elements.polymer-project.org/elements/google-map

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Losing Infowindow and/or Click Event on Map Update

northeastintegration opened this issue · comments

Hello All --

Using google-map v1.1.10 against git://github.com/GoogleWebComponents/google-map.git#*

I build up my markers like so:

<template>
   <site-data sites="{{sites}}"> </site-data>
   <google-map fit-to-markers >
      <template is="dom-repeat" items="{{sites}}">
        <template is="dom-repeat" items="{{item}}">
          <google-map-marker latitude={{item.latitude}}
                             longitude={{item.longitude}}
                             title="{{item.project_name}}"
                             >
            <h1>{{item.project_name}}</h1>
            <p style="margin: 0;">Location: <b>{{item.town}}, {{item.country}}</b></p>
            <p style="margin: 0;">Tech Description: <b>{{item.tech_desc}}</b></p>
          </google-map-marker>
        </template>
      </template>
    </google-map>
</template>

Upon initial loading of the webapp, things work really well. I can click on a marker and the infowindow shows the content. However, if I change any values in my sites array, I seem to lose the infowindow and/or the click event. I have to refresh the browser to get back to my initial condition.

Also, The marker locations will update perfectly if I change lat/long and hovering shows tooltip aka. title, appropriately as well.

I've also added a click event which calls a console.log to validate that it functions.. It works well until a value is changed in the {{sites}} binding, so it seem I am losing click events when the google-map updates itself?

There are no scripts in this element.

If I can provide more information, please let me know.

Thanks in Advance,
Scott

Can you post jsbin that repos the problem?

On Wed, Feb 10, 2016, 8:23 AM Scott R Carlson notifications@github.com
wrote:

Hello All --

Using google-map v1.1.10 against git://
github.com/GoogleWebComponents/google-map.git#*

I build up my markers like so:

{{item.project_name}}

Location: {{item.town}}, {{item.country}}

Tech Description: {{item.tech_desc}}

Upon initial loading of the webapp, things work really well. I can click
on a marker and the infowindow shows the content. However, if I change any
values in my sites array, I seem to lose the infowindow and/or the click
event. I have to refresh the browser to get back to my initial condition.

Also, The marker locations will update perfectly if I change lat/long and
hovering shows tooltip aka. title, appropriately as well.

I've also added a click event which calls a console.log to validate that
it functions.. It works well until a value is changed in the {{sites}}
binding, so it seem I am losing click events when the google-map updates
itself?

There are no scripts in this element.

If I can provide more information, please let me know.

Thanks in Advance,
Scott


Reply to this email directly or view it on GitHub
#257.

Sure can, in fact, Scott Miles responded to this issue on stackoverflow. Here is his response + jsbin with workaround. He was able to elaborate on my observations more coherently.

http://stackoverflow.com/questions/35318751/generating-google-map-markers-via-iterating-over-an-array-using-data-binding-wh

and his jsbin with workaround.

http://jsbin.com/hobixi/edit?html

Thanks for looking into this!