CODEWITHSUNDEEP
google-mapspolymer
MonkeyBonkey
MonkeyBonkey

Reputation: 47881

how do you programatically add markers to the polymer google map element

Trying out polymer and wanted to know how to add a marker element to the polymer element. I know how to add the marker to a standard google map. Should I just insert a marker object into the google-map elements marker array? If so whats the signature and is there an example? Do I need to call some sort of map init or refresh after I do so, or does it update automatically?

   (function() {
      Polymer({
        is: 'users-map',

        created: function(){
          this.loadMap(this.data[0]);
        },

        loadMap: function(row) {
          var map = document.querySelector('#users-location-map');
          row.users.forEach(function (user) {
            var location = user.location;
            var markerOptions = {
              position: {lat: location[1], lng: location[0]},
              //map: map //can't set this otherwise it throws an error on finding the google library
            };
            if (!user.online) {
              markerOptions.icon = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|666666';
            }

            map.markers.push(something); //how should I instanstiate this something
//            new google.maps.Marker(markerOptions); //normally I would just do this 
          });
        },

The answer below works if I comment out the map assingment.

Upvotes: 1

Views: 2085

Answers (2)

Olexander Yushko
Olexander Yushko

Reputation: 2894

I had same task early and have solution by this question. I hope my example will have in future for solution.

For example we have google-map polymer in our html:

<google-map map="{{map}}" latitude="40.730610" longitude="-73.935242" zoom="5" click-events="true" mouse-events="true" api-key="{{you_api_key}}" disable-default-ui>
</google-map>

And for dynamically create marker on google-map by click and add EventListener for drag event I write script like this:

<script> var map = document.querySelector('google-map');
        map.addEventListener('google-map-click', function (e) {
            let marker = document.createElement('google-map-marker');
            let latLng = e.detail.latLng;
            marker.setAttribute('latitude', latLng.lat());
            marker.setAttribute('longitude', latLng.lng());
            marker.setAttribute('title', "Marker name");
            marker.setAttribute('draggable', true);
            marker.setAttribute('click-events', true);
            marker.setAttribute('mouse-events', true);
            marker.addEventListener('google-map-marker-dragend', function (e) {
                let latLng = e.detail.latLng;
                marker.setAttribute('latitude', latLng.lat());
                marker.setAttribute('longitude', latLng.lng());
            });
            Polymer.dom(map).appendChild(marker);
        });
        </script>

Hope it help in future. Thanks.

Upvotes: 0

&#220;mit
&#220;mit

Reputation: 17489

It depends if you are using the google-map and google-map-marker or the google map API directly.

If you use the google-map and google-map-marker elements this approach should work: 

marker = document.createElement('google-map-marker');
marker.longitude = location[0];
marker.latitude = location[1];
marker.icon = 'ICON_UR'
Polymer.dom(this.$.map).appendChild(marker);

If you use the google map API directly your normal appraoch with new google.maps.Marker(markerOptions); should work fine.

Upvotes: 2

Related Questions