Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Google Map keeps old markers when binding with template repeat #63

Closed
MWalid opened this issue Oct 13, 2014 · 3 comments
Closed

Google Map keeps old markers when binding with template repeat #63

MWalid opened this issue Oct 13, 2014 · 3 comments

Comments

@MWalid
Copy link

MWalid commented Oct 13, 2014

Steps to reproduce:

  • Put some markers inside google-map (by template binding).
  • Update markers array.
  • The new markers array appears on the map and also the old markers array still there.

Here is an example.

<!DOCTYPE html>
<html>
<head>
    <link href="bower_components/google-map/google-map.html" rel="import">
    <title></title>
</head>
<body>
<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        width: 100%;
        height: 100%;
        position: absolute;
        box-sizing: border-box;
      }
      google-map {
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        position: absolute;
      }
    </style>
    <google-map fitToMarkers>
        <template repeat="{{marker in markers}}">
            <google-map-marker latitude="{{marker.latitude}}" longitude="{{marker.longitude}}" title="{{marker.name}}"></google-map-marker>
        </template>
    </google-map>
  </template>

  <script>

    Polymer({
      ready: function () {
        this.startUpdateMarkers();
      },
      randomMarkers: function () {
        this.markers = [];
        count = Math.random() * 10;
        for (i = 0; i < count; i ++) {
          this.markers[i] = {
            longitude: Math.random() *50,
            latitude: Math.random() * 50,
            name: 'marker ' + i
          }
        }
      },
      startUpdateMarkers: function () {
        this.randomMarkers();
        this.async(function() {
          this.startUpdateMarkers();
        }, null, 1500);
      }
    });

  </script>

</polymer-element>

<my-element></my-element>
</body>
</html>
@MWalid
Copy link
Author

MWalid commented Oct 13, 2014

I could solve this issue by clearing the map just before updating its markers:

updateMarkers: function() {
  this.clear(); // so the old markers will be removed from the map.
  this.markers = Array.prototype.slice.call(
      this.$.markers.getDistributedNodes());
      .....

@ebidel ebidel closed this as completed in 4e1fa6a Oct 14, 2014
@livtanong
Copy link
Contributor

This seems to still be a problem with google chrome for android.
this.markers is correct, but the excess markers still exist in the shadow DOM anyway. Changing the zoom level clears out the excess markers.

@thatsmydoing
Copy link

The issue can also be replicated with Mobile Mode in Chrome. With developer console open, press ctrl/cmd+shift+m.

We've temporarily fixed the problem by setting optimized: false in the marker. From http://stackoverflow.com/questions/13505692/google-maps-api-v3-in-phonegap-markers-not-drawing-properly-after-move/13512838#13512838

I'm not sure if that's the best solution though.

mbykovskyy pushed a commit to mbykovskyy/google-map that referenced this issue Dec 5, 2014
@ebidel @mbykovskyy
Fixes GoogleWebComponents#63
b91e539
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@thatsmydoing @livtanong @MWalid