Marker don't display on map

I'm trying to send data from server to website and customize marker on polymer map, using that data. I'm using socket.io and when i try to change marker properties my marker just doesn't display.

Here is a code:

<dom-module id="main-map">
<template>
<style>
google-map {
     display: block;
     width: 100%;
     height:100%;
    }
</style>
<google-map map="{{map}}"
 latitude="52.0535631" 
 longitude="19.5249493" 
 zoom="7" 
 disable-default-ui >
      <template is="dom-repeat" items="{{xMarker}}">
           <google-map-marker map={{map}}
            latitude="{{item.latitudine}}"
            longitude="{{item.longitudine}}" 
            animation="{{item.animation}}">
           </google-map-marker>
      </template>
 </google-map>
 </template>
 <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>

Polymer({
    is: 'main-map', 

    properties: {
    xMarker: {
       type: Object,
       value: function () {
           socket.on("asd", function (data) {
                var obj = {};
                obj = [{
                   latitudine: '52.0535631',
                   longitudine: '19.5249493',
                   animation:'BOUNCE',
                }];
                console.log(obj);
                return obj;
               })
                }
            }
        }
    });
    </script>
    </dom-module>

Answers


I can see two reasons why this is not working. First, xMarker is defined as an object, but then used in dom-repeat, which only takes arrays. So you should set the type to Array. Unless you only have one marker, in that case omit the dom-repeat.

xMarker: {
   type: Array,

Second, you can't assign a value in the socket.io callback by returning it. You could install the socket.io event handler in the ready function and assign the value to xMarker there.

properties: {
    xMarker: {
      type: Array
    }
},

ready: function() {
    socket.on("asd", function(data) {
        this.xMarker = [{
            latitudine: '52.0535631',
            longitudine: '19.5249493',
            animation: 'BOUNCE',
        }];
    }.bind(this)); 
}

Your xMarker property is null. You weren't returning anything when you declared its default value.

Polymer({
  is: 'main-map',

  properties: {
    xMarker: {
      type: Object,
      value: function() {
        socket.on("asd", function(data) {
          var obj = {};
          obj = [{
            latitudine: '52.0535631',
            longitudine: '19.5249493',
            animation: 'BOUNCE',
          }];
          console.log(obj);
          return obj;
        }); 
        // You're not actually returning anything at all. 
      }
    }
  }
});

Need Your Help

Indexing only "readable/parsable" text from pdf

solr solrj solr4 apache-tika

I have to index a list of PDFs(PDF-A) and for some of them there is no problem, but for others when I look the indexed content I only see a lot of diamonds with a question mark in it.

IF statement combined with Chart function in Excel VBA

excel excel-vba excel-formula vba

I am still new to VBA and so far I've managed to complete my tasks with some online help, but this one is too far away for my knowledge.