googlewebcomponents / google-map

Google Maps web components

google-map

If you are seeking a smaller, simplified version of google-map, we recommend using good-map

<google-map fit-to-markers api-key="AIzaSyD3E1D9b-Z7ekrT3tbhl_dy8DCXuIuDDRc">
  <google-map-marker latitude="37.78" longitude="-122.4" draggable="true"></google-map-marker>
</google-map>

Breaking changes:

• Markers added to <google-map> must now specify slot="markers" to be added correctly.

google-map's Issues

My Location features

In many situations knowing your current location on the map (aka "My Location") is essential in making sense/use of the map being shown but the current implementation of the google-map web component is missing:

• an option to toggle the display of My Location as a marker
• an option to toggle the display of a corresponding UI element which centers & zooms the map on My Location when clicked/tapped

Tests need to be upgraded to Polymer 0.5.1

Although demo.html and index.html import webcomponentsjs.min.js the tests still import platform.js.

google-map doesn't appear unless display: block style is applied

I'm fairly new to Polymer and there may be a design principle I'm unaware of, but...

I'm not entirely sure why google-map doesn't have its display property set to bock by default. Without applying this style I was unable to get the component to show up at all (even when explicitly setting the control's width and height to 300px), and it seems odd that the style wouldn't simply be specified within the component's CSS.

showCenterMarker attribute doesn't work with single marker

The following code results in a map that loads with the default location showing instead of the the map being centered on the marker (marker is visible if you zoom out)

<google-map showCenterMarker>
        <google-map-marker longitude="-80.1417572" latitude="25.985486"></google-map-marker>
</google-map>

Marker animation doesn't work

I was fiddling with google-map-marker to get the animation working but got nowhere so I tried using Google Maps API with Polymer's google-map but still no luck.

  <polymer-element name="my-map">
    <template>
      <style>
        google-map {
          display: block;
          height: 100%;
          width: 100%;
        }
      </style>
      <google-map id="map" zoom="3" latitude="0" longitude="0" on-google-map-ready="{{mapReady}}">
      </google-map>
    </template>
    <script>
      Polymer('my-map', {
        mapReady: function() {
          var marker = new google.maps.Marker({
            map: this.$.map.map,
            position: new google.maps.LatLng(0, 0),
            animation: google.maps.Animation.BOUNCE
          });
        }
      });
    </script>
  </polymer-element>

Add support for marker events

What is the best way to handle google-map-marker click (or any other) event?

I can customize google-map-marker.html easily.

mapReady: function() {
    this.marker = new google.maps.Marker(...);
    this.contentChanged();
    setupDragHandler_.bind(this)();
    setupClickHandler_.bind(this)();
  },

function setupClickHandler_() {
  this.clickHandler_ = google.maps.event.addListener(this.marker, 'click', function() {
    this.fire('marker-click');
  }.bind(this));
}

Then I can do

<google-map-marker
        on-marker-click="{{markerClick}}"
        title="{{loc.name}}"
        latitude="{{loc.lat}}"
        longitude="{{loc.lng}}"
        icon="/images/markers/{{loc.types[0].type}}.png">
</google-map-marker>

But of course customizing google-map-marker.html is not an option. If I try to extend the marker I have a problem with google-map template having the wrong content selector.

<content id="markers" select="google-map-marker"></content>

Please add/show a way to handle click and other events.

EDIT: so I ended up copy-pasting and editing both google-map and google-map-marker because I need some custom attributes on the marker and it was just easier than trying to extend them. It's ok for now, but please we need a way to easily extend map and markers.

Thanks and keep up the good work

Support multiple markers

It would be useful to define markers within the google-map element, like

<google-map latitude="-33" longitude="151" zoom="4">
  <marker latitude="-25.363882" longitude="131.044922" title="Hello World!" />
</google-map>

Is google-map-directions.startAddress supposed to take an object literal or only a latlng object?

I've passed object literals to the element but it raises an error. I've tried to create ltlng objects from within my element but google isn't available and if I include the api in my document root I get the multiple api error.

Do you have an example of passing something other than a string?

google-map does not render to its size when used in core-animated-pages when it is in secion 1+

using in a just works right on index=0. When i try using or styling it on index 1-x the box is as i defined it, but the redered map just shows about 200px in the left upper corner of the map box.
.
Might this me a bug, or am I too stupid? I hope it is the second one.

Question: How are we supposed to setup tests?

I'm not sure what the directory structure setup is supposed to look like for testing.

I currently clone this component to my local machine then run bower install. However, the test files are referring to files that aren't in bower_components and don't exist within this component's directory (e.g. https://github.com/GoogleWebComponents/google-map/blob/master/test/google-map-basic.html#L7). The html files themselves refer to files that aren't in this component's directory (https://github.com/GoogleWebComponents/google-map/blob/master/google-map.html#L3).

I understand that the ../pathto/file.html is written that way because it expects to be in the same directory (e.g. /bower_components/).

This makes testing a bit odd and results in a noisy dev console when these files aren't found. What's the strategy supposed to be here?

fitToMarkers resists dragging

This is pretty weird: when I drag, the screen shakes wildly, because the viewport is moved by a bit, then reset back. If it really IS supposed to resist the drag, then I'd recommend to include in the implementation setOptions({ draggable: false }) to prevent the shaking. I'd also suggest the addition of a fitToMarkers method that resets the view once, and can be called again at a later time to reset the view after the user has navigated away.

Zoom value doesn't update when zooming in/out

This issue is similar to #44 but this time the component doesn't listen for zoom_changed event.

I'll work on this and will submit a PR.

Prevent from capturing mouse scroll

I have a google-map as a position: fixed "background" for a list of cards. I want to keep user interactions from map, but I need the scroll wheel behaviour to scroll the list.

Is there any way to do that? I tried to set zoomable="false" on google-map element. It works with position: absolute, but as fixed it only prevents the zoom, I can't scroll the cards.

Accessing current latitude and longitude?

I see no way to access the current latitude, longitude, or zoom properties - they are not published, and see no update events for them.

I was only able to do this via manually adding to google-map.html:

publish: {
  latitude: {reflect: true},
  longitude: {reflect: true},
  zoom: {reflect: true}
}

Am I missing something or is this intentional?

Integrating laravel blade syntax with polymer

hi,
im currently having trouble with your data binding syntax with laravel (PHP Framework) blade syntax it both use the '{{ }}' syntax, do you have any alternative to change the syntax?

Thank You,

Support Info windows

There should be some way to create a google.maps.InfoWindow associated with a marker.

Options:

1. info property
2. as markup children elements of google-map-marker
3. both

Latitude and longitude values don't update when panning the map with a mouse

Setting values on latitude/longitude updates the center of the map, however, panning the map with a mouse doesn't update the set value.

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

Note the paper-icon-button's on-tap handler inside the google-map-marker. If you move it outside of the google-map-marker, the binding works. But it does not work inside the google-map-marker. I'm hoping there's a quick fix.

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <title>Google Map demo</title>
  <script src="bower_components/platform/platform.js"></script>
  <link rel="import" href="bower_components/polymer/polymer.html">
  <link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
  <link rel="import" href="bower_components/core-icons/core-icons.html">
  <link rel="import" href="bower_components/core-icons/maps-icons.html">
  <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
  <link rel="import" href="bower_components/google-map/google-map.html">
  <link rel="import" href="bower_components/google-map/google-map-directions.html">
  <style>
    #controlsToggle {
      position: absolute;
      left: 10%;
      bottom: 10%;
    }
  </style>
</head>
<body fullbleed unresolved>
<polymer-element name="my-app">
  <template>
    <google-map latitude="37.779" longitude="-122.3892" minZoom="9" maxZoom="11" fit>
      <google-map-marker latitude="37.779" longitude="-122.3892"
                         title="Go Giants!" draggable="true">
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/49/San_Francisco_Giants_Cap_Insignia.svg/200px-San_Francisco_Giants_Cap_Insignia.svg.png" />
      <paper-icon-button icon="folder" on-tap="{{tapped}}"></paper-icon-button>  
      </google-map-marker>
    </google-map>

    <google-map-directions startAddress="San Francisco" endAddress="Mountain View"></google-map-directions>
  </template>
  <script>
      Polymer('my-app', {
              tapped : function() {
                window.alert("hello world");
              }
            });
  </script>
</polymer-element>

    <my-app></my-app>

</body>
</html>

I think that line 144 in google-map.html may the the culprit. I'm guessing there's some additional initialization that has to happen in the InfoWindow object for it to recognize the polymer elements completely.

this.info.setContent(content);

But, the paper-icon-button does display...The event binding just doesn't work.

Google Map keeps old markers when binding with template repeat

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>

Add event listener for google-map-search

Hi, I've been playing around with the google map components and they're super awesome.

It would be nice if there were an event listener for when the google-map-search is done searching (basically a promise/future or something like a promise).

Suppose you have a google-map, a google-map-search, and an input. As is, you could bind the input to the search query and bind the result to the map. So, if you search for "Paris" for example, the map goes directly to Paris.

The question is, what if you don't do these bindings (cuz for example there are multiple ways to input a location and feed it to the map and you don't want these bindings to pollute each other). The current hacky way I found (there may be others I dunno) is to manually do Node.bind() and Node.unbind() but it's kinda inelegant, tedious, and doesn't generalize.

It would be nicer to be able to say in javascript something like, "oh, and when you're done searching, set the map's latitude and longitude to the result's latitude and longitude" like so...

var mapSearch = document.querySelector("google-map-search");
var map = document.querySelector("google-map");

mapSearch.addEventListener("search-completed", function(e){
  map.latitude = mapSearch.result.latitude;
  map.longitude = mapSearch.result.longitude;
});

Multiple libraries fails

Specifying more than one library in the libraries parameter of the google-map component results in receiving a 400 error from the Maps API service. Using the component:
<google-map latitude="40.7310666" longitude="-73.9909639" zoom="13" id="google_map" libraries="visualization,places" apiKey="xxx"> </google-map>
I received
Failed to load resource: the server responded with a status of 400 (Bad Request) https://maps.googleapis.com/maps/api/js?callback=https___maps_googleapis_co…libraries=visualization,places&key=xxx

Plugging in the full URL (below) into a browser returns:
https://maps.googleapis.com/maps/api/js?callback=https___maps_googleapis_com_maps_api_js_callback___callback___v_3_exp_libraries_visualization,places_key_xxx_api_loaded&v=3.exp&libraries=visualization,places&key=xxx

The Google Maps API server rejected your request. The 'callback' parameter specified in the request is invalid.

I think the "%%callback%%" macro in google-maps-api doesn't handle commas or spaces well. I tried different services -- even invalid ones -- and it behaved as expected. However, if I list more than one with a space or a comma, it fails.

The `sensor` parameter is no longer required when loading the Maps API

It's ignored--so it's won't break anything that continues to include it--but it now isn't required and does nothing, so sensor can be removed from all of the current Maps elements.

https://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog (see 26 May 2014 entry)

google-map should import google-maps-api.html, not all of google-apis

https://github.com/GoogleWebComponents/google-map/blob/master/google-map.html#L4

Unable to load google heat map!

I have used the google maps element something like this :

<google-map id="myMap" zoom="17" libraries="places,visualization" disableDefaultUI fitToMarkers>
</google-map>

and i followed the tutorial from here : https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap

But i get this error

Without heatmap it works fine i.e., normal plotting of markers works fine.

Can you guys please fix this asap. We have a demo to one of our customers tomorrow evening and we need to heat maps for one of the use case. Atleast some workaround or temporary fix would be great.

Thanks a lot,
Vinay

Add `signedIn` attribute for new `signed_in=true` feature

https://developers.google.com/maps/documentation/javascript/signedin#enable_sign_in

Testing Todos

• Add test for info window content.
• Test draggable, hidden, title properties.
• Add test for drag and drop marker.
• test setting an invalid latitude/longitude value. See if throws.
• check toggling showCenterMarker to see if marker is added/removed from map.
• test draggable attribute.
• test fitToMarkers actually contains all markers
• test panning map and changing it's zoom updates .latitude/longitude/.zoom properties.

Getting error when using apiKey in 'google-map' element

Getting the following error when apiKey attribute is used in 'google-map' element.
Uncaught TypeError: undefined is not a function{main,places}.js:54 (anonymous function){main,places}.js:55 (anonymous function)

Here are my imports
`

`

And here how i used it in my code
<google-map map="{{map}}" zoom="13" apiKey="abc123" version="3.exp"></google-map>

google-map-search only returns 1 pseudo result

google-map-search only returns 1 result, and it only contains the latlng and a boolean, users can't access the place name or any of the other exciting PlaceResult fields they might want to use.

Alternatively, google-map-search could stay as is to support current users and a google-map-places element could be built that's a bit more robust.

Map size and center issues with google-map when used with core-animated-pages

First of all let me say I absolutely love the concept of web components. I think it's the future of web development and I am really excited about it.

Now to the issue ... I have problems with google-map inside core-animated-pages. I am able to fix all of them, just wanted to post here for others and maybe to find a better solution.

Also see this issue

This is my main component using core-scaffold with core-animated-pages:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../cb-home/cb-home.html">
<link rel="import" href="../cb-locations/cb-locations.html">
<link rel="import" href="../cb-paper/cb-paper.html">
<link rel="import" href="../cb-map/cb-map.html">

<polymer-element name="cb-app" attributes="route locations">
  <template>
    <link rel="stylesheet" href="cb-app.css">

    <flatiron-director route="{{route}}" autoHash></flatiron-director>

    <core-scaffold id="scaffold">

      <core-header-panel navigation mode="seamed" flex>
        <core-toolbar>
          <span>Climbuddy</span>
        </core-toolbar>
        <core-menu selected="{{route}}" valueattr="hash">
          <paper-item hash="home" noink><a href="/#home">Home</a></paper-item>
          <paper-item hash="map" noink><a href="/#map">Map</a></paper-item>
          <paper-item hash="locations" noink><a href="/#locations">Locations</a></paper-item>
        </core-menu>
      </core-header-panel>

      <core-toolbar tool flex>
        <span flex>Page</span>
        <core-icon-button icon="perm-identity"></core-icon-button>
      </core-toolbar>

      <core-animated-pages id="pages" selected="{{route}}" valueattr="id" transitions="slide-from-right" layout fit>

        <!-- home -->
        <cb-home id="home"></cb-home>

        <!-- map -->
        <cb-map id="map" locations="{{locations}}" fit></cb-map>

        <!-- locations -->
        <cb-locations id="locations" locations="{{locations}}"></cb-locations>

        <!-- location -->
        <cb-location id="location"></cb-location>

      </core-animated-pages>

    </core-scaffold>

  </template>
  <script>
    (function () {

      Polymer('cb-app', {
        ready: function() {
          var pages = this.$.pages;
          var map = this.$.map;
          if (pages.selected !== 'map') {
            // fix map size because of core-animated-pages on first
            pages.addEventListener('core-animated-pages-transition-prepare', function() {
              setTimeout(function() {
                map.fixMap();
              },0);
            });
          }
        }
      });

    })();
  </script>
</polymer-element>

Where looks like

<polymer-element name="cb-map" attributes="locations">
    <template>
        <google-map fit id="map" zoom="4" latitude="45.63" longitude="16.16">
            <template repeat="{{loc in locations}}">
                <google-map-marker title="{{loc.name}}" latitude="{{loc.lat}}" longitude="{{loc.lng}}" icon="/images/markers/marker.png"></google-map-marker>
            </template>
        </google-map>
    </template>
    <script>
        (function () {
          Polymer('cb-map', {
            // just a helper function
            fixMap: function() {
                var map = this.$.map; // google map web component
                var gmap = map.map;   // google.maps.Map instance
                var lat = gmap.getCenter().lat();
                var lng = gmap.getCenter().lng();

                // at this point, everything is ok
                // before resize latitude 45.63 longitude 16.159999999999968
                console.log('before resize', 'latitude', lat, 'longitude', lng);

                // fix size for core-animated-pages
                map.resize();

                // at this point latitude and longitude ar wrong
                // after resize latitude 19.16672805677583 longitude 42.878749999999954
                console.log('after resize', 'latitude', gmap.getCenter().lat(), 'longitude', gmap.getCenter().lng());

                // fix center because of resize
                map.latitude = lat;
                map.longitude = lng;

                setTimeout(function(){
                    // after fixing center is ok again of course
                    // after fix latitude 45.62999999999999 longitude 16.15999999999995
                    console.log('after fix', 'latitude', gmap.getCenter().lat(), 'longitude', gmap.getCenter().lng());
                },10);
            }
          });
        })();
    </script>
</polymer-element>

As you can see, map center is off after map.resize(), so I have to manually reset it, which causes a slight flicker in animation. I'm not sure if this is a bug or I'm doing something wrong. It appears as if latitude and longitude values are switched after resize.

Anyway, keep up the good work ;)

on-click attribute for map markers

For convenience-sake, there should be an on-click attribute on the map marker components.

<google-map-marker on-click="{{onClickMarker}}" latitude="37.779" longitude="-122.3892" title="Go Giants!"></google-map-marker>

Cross-Origin Error

I keep getting this on trying to load.

Imported resource from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Received an invalid response. Origin 'null' is therefore not allowed access.

Address support?

Surprised there is no support for passing in a string based address to be geocoded. Is there a reason for that? It isn't terribly difficult to find the long/lat of an address, but it would be nice if the component supported it out of the box.

empty map tag is not working

itself does not work. it works fine when adding the fit attribute just like . it think it may be set by default?!

Move to "GoogleWebComponents" org and mark as public

Hey guys,

I was wondering why this element isn't under GoogleWebComponents and is marked as private?
https://github.com/PolymerLabs/google-map/blob/master/bower.json#L3

Marker info window not showing up

I just played around with the component and ran into an issue.
I added this code into my HTML:

<google-map latitude="47.0765384" longitude="15.446556600000001">
  <google-map-marker latitude="47.0765384" longitude="15.446556600000001">
    <img src="location_icon.png">
  </google-map-marker>
</google-map>

I can see the marker but whenever I click on it nothing happens. I also tried adding the marker dynamically using JS but get the same behavior.
The console shows no errors.

Setting latitude/longitude to not a Number type causes RangeError: Maximum call stack size exceeded

<google-map latitude="NaN" longitude="NaN"></google-map>

Causes the call stack overflow.

Exception caught during observer callback: RangeError: Maximum call stack size exceeded
    at Be (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/4/%7Bmain,places%7D.js:13:479)
    at Object.S.trigger (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/4/%7Bmain,places%7D.js:15:145)
    at Ly (eval at <anonymous> (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/4/%7Bmain,places%7D.js:56:919), <anonymous>:112:288)
    at Iy.K.la (eval at <anonymous> (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/4/%7Bmain,places%7D.js:56:919), <anonymous>:110:280)
    at Iy.Qm.(anonymous function).H (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/4/%7Bmain,places%7D.js:44:1755)
    at cA.K.la (eval at <anonymous> (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/4/%7Bmain,places%7D.js:56:919), <anonymous>:151:416)
    at cA.Qm.(anonymous function).H (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/4/%7Bmain,places%7D.js:44:1755)
    at cA.<anonymous> (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/4/%7Bmain,places%7D.js:13:335)
    at Object.S.trigger (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/4/%7Bmain,places%7D.js:15:206)
    at cA.K.la (eval at <anonymous> (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/4/%7Bmain,places%7D.js:56:919), <anonymous>:152:183) 

This looks like a Google Maps API issue however google-map component can prevent this from happening by checking that latitude and longitude are numbers.

google-map-search: google is not defined

Is the link to missing?

Wrong dependency

Polymer/google-apis#master should be PolymerLabs/google-apis#master

Place Autocomplete component/service

It would be nice to have a place autocomplete component which can be styled by a user or a service which can be bound to an input textfield.

Panning the map across Pacific Ocean causes infinite loop

Caused by #45 (issue does not exist with previous commit)

Panning the map fires 'center_changed' event, which updates this.latitude and this.longitude which are observed and calls this.updateCenter(), which pans to this.latitude and this.longitude, and so on.

add support for trip

Add possbility to create a map with mutiple destination.

Ideally the map should support multiple destination my coordinate and by name

Add language attribute

To pass through to the google-maps-api

adding/editing polylines

I would love to see full polyline support with this component.

fire 'map-marker-added'?

I'm new to using polymer - thanks for the great work. Regarding the google-map-marker element. I was wondering if it would make sense to add an event that gets fired when the marker is added to the DOM. It would be nice to be able to add a listener to catch new markers as they are added to set up handlers, etc. Maybe even pass the marker as part of the event.

 this.fire('map-marker-added', {'marker': this.marker});

I experimented with adding the above call at the end of the contentChanged() function in "google-map-marker" and it seemed to work nicely. Maybe there is a performance issue in the case of lots of markers, not sure. Is there a better way to know when the google-map-marker element has added its marker to the DOM? Or a better way to get hold of the element when it is created. What event might I be looking for?

Name conversions and component modularity

I need an autocomplete component so I was thinking about pulling @bamnet's work and add on to it, but I'm curious about your conventions. Do you prefer keeping components in files that reflect Google Maps API namespaces such as google-map.html and google-map-places.html? Or is it good practice to separate components into their own files i.e. google-map.html, google-map-marker.html, google-places-autocomplete.html?

google-map-search v0.4.0 google-map-search-result firing with undefined result var

https://github.com/GoogleWebComponents/google-map/blob/0.4.0/google-map-search.html#L90

I can see this is fixed in master , probably worth a cherry-pick & tag v0.4.1 ?

5438a6e

google-map-directions shouldn't require map

<google-map-directions> should work without a map, the results would just be accessed via response so people can parse the results and build their own displays. If a map does exist, the existing logic should kick in to use the DirectionsRenderer.

Not compatible with dart based polymer webapps

I would love to see these components available to the dart community via a 'pub' package, instead of only a bower package.

Considering cutting a new tag that doesn't depend on google-apis#master

The 0.3.1 tag of google-map seems to have accidentally depended on google-apis#master instead of 0.3.2. I have to add a bower resolution for this, but I'm worried that I'll forget about the resolution and it will introduce bit rot. If it's possible to cut a new tag with the current dependency that would be awesome.

google-map-marker does not work when latitude and longitude are provided by AngularJS

Given the following example:

<google-map fitToMarkers>
    <google-map-marker latitude="{{ selectedAddress.coordinates.latitude }}"
                       longitude="{{ selectedAddress.coordinates.longitude }}">
    </google-map-marker>
</google-map>

where selectedAddress.coordinates is {latitude: 20, longitude: 20} breaks with an error in Google Maps API because this.latitude and this.longitude in updatePosition are strings, not numbers. It'd be very useful if the assumption that these values are numbers were not there.

This seems to happen because setAttribute converts its second argument to a string, and Polymer's misfeature of guessing the expected type and automatically converting does not work when an attribute is set with setAttribute.