Polymer Google Map - Drawing Shapes

Question

I've been working with Polymer's Google Map for a while now and have been very happy with the results. Recently I've come across a few use cases where it would be useful to draw lines and shapes between map markers on the map. Google's documentation on this is great for the Maps Javascript API, but after doing some research, I haven't been able to find any references to drawing shapes within a Polymer Google Map without mish-mashing Polymer and non-Polymer Google Map functions. Is there a "pure Polymer" way of drawing these shapes?

I'm still using Polymer 1.x but am willing to upgrade to 2.x.

Thank you!

score 1 · Accepted Answer · answered May 09 '17 at 09:39

There are currently no Polymer Elements that will enable you to draw shapes on Google Maps. You can however use JavaScript to access the map object and draw shapes. For instance you can include your google-map element:

<google-map
  id="map"
  zoom="3"
  latitude="25"
  longitude="0"
  map-type="hybrid"></google-map>

and then some JavaScript to draw on the map by accessing the map object on the map element in the DOM:

function drawCircle(center, radius) {
  new google.maps.Circle({
    strokeColor: '#FFFFFF',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFFFFF',
    fillOpacity: 0.3,
    map: document.querySelector('#map').map,
    center: center,
    radius: radius
  });
}

You could even take this JavaScript and convert it into a Polymer Component if you want.

Thank you! This kind of solution is much simpler than the others I found. I'll give it a try! — Geoffrey Huntoon, May 10 '17 at 14:23

score 0 · Answer 2 · answered Jun 03 '17 at 10:10

You can bind "map" property -> add observer to it -> do what you want.

This is to make sure that javascript is trying to draw shapes on google map only when google map is created.

"map" property is null at first. After the map is created observer calls your function.

Like this:

<google-map map={{myMapObject}} id="mymapid" zoom="3" latitude="25" longitude="0" map-type="hybrid"></google-map>
<script>
Polymer({
    is: 'mytemplatename',
    properties: {
        myMapObject: {
            observer: 'drawCircles'
        }
    },
    drawCircles: function(){
       new google.maps.Circle({
         strokeColor: '#FFFFFF',
         strokeOpacity: 0.8,
         strokeWeight: 2,
         fillColor: '#FFFFFF',
         fillOpacity: 0.3,
         map: document.querySelector('#mymapid').map,
         center: center,
         radius: radius
       });
    }
});
</script>

Polymer Google Map - Drawing Shapes

2 Answers2