Fun with Polymer Google maps

1

Hello,

I just tried to use Polymer google map and add google map markers yelding it directly to HTML and update on mouseup after moving.
In element inspector you can see all these markers as elements.
Or add/remove from console, MapMarker collection :smiley:

Have fun!

http://polymermap.meteor.com/

<template name="mapMarkers">
	{{#each mapMarker}}
		<google-map-marker id={{_id}} latitude={{latitude}} longitude={{longitude}} title={{title}} draggable={{draggable}} mouseEvents="true">
		</google-map-marker>
	{{/each}}
</template>

Template.mapMarkers.events({
      "google-map-marker-mouseup google-map-marker": _.debounce(function(event,template) {
            //MapMarker
            MapMarker.update({_id: event.currentTarget.id},{
                latitude: event.target.latitude,
                longitude: event.target.longitude,
                title: event.target.title,
                draggable: event.target.draggable
            });
        console.log(event.target.latitude);
        console.log(event.target.longitude);

      },50)
  });
2 Likes
2

Hey ,

I landed on this page because of some error I meet with Meteor and Polymer’s Google Maps.

You should actually have a {{else}} between you {{#each}}…{{/each}} to avoid that Exception caught during observer callback error.

However, I came up to the next error that my markers are actually generated in the code, but don’t display. I guess the <google-map> tag is not properly refresh (it works in local however) due to assychnonous call.

Can’t solve it, stuck there for days.