fusion table map style/color inconsistencies

Question

I have a Google fusion table that has a map based off a column of coordinates. The map and fusion table work fine for my application, but I'm noticing inconsistencies between the map view through Google fusion tables, and the map in my application which uses that exact fusion table. I'm wondering if anyone out there has had similar issues and if/how they alleviated them.

Inconsistencies:

• Overlay color. The overlay color is set to green through the Google fusion table map view, but displays red in my map app, no matter what I change it to or how many times I change it.

• Number Formatting: I've formatted the numbers to be displayed with commas (123456 should be 123,456) through Google fusion tables UI. It is displaying like this when I view the column through the fusion table interface but it still displays it as 123456 in my application.

• Google map pop out balloon. The pop-out balloon is not big enough for the text contained within it. So part of the text hangs off the bottom of the balloon. In some browsers/sessions it works fine, in others it hangs off the bottom.

Thank you for reading my question.

Answer 1

I also had run into your pop-out balloon overflow problem. Prior to today, I had just solved it by avoiding use of the <p> tags, favoring instead <br>. Today I searched for a separate solution which led me to an answer I think you'll get much benefit from: Tip: Use dynamic templating

I also ran into your first issue with overlay displaying as red. This is a baffling bug with fusion tables map styles. The only way I resolved it was by setting each style to default, then changing the overlay color to "static for all entries".

About number formatting. using the dynamic formatting link above, you can see that there's a way to deliver the formatted number, which uses a variable property of {$data.formatted.ColumnName}.

I hope that this answers all of your questions.

Answer 2

Ive found a solution to why the overlay colors are inconsistent and also why the pop-out boxes are not large enough for the containers:

You need to add "styleID" and "templateId" properties to the Fusion Tables Layer object:

var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'Address',
      from: 297050
    },
    map: map,
    styleId: 1,
    templateId: 2
 });

The way to find what your ID's are is a little tricky. Open your fusion table, click on the "map" tab and click "publish" in the dropdown from the map tab. Copy that URL and paste it somewhere, look for something like this towards the end of the URL:
"y=2&tmplt=2"
the "y" is the styleID and the "tmplt" is the templateId.

I'm still working on the solution for the number formatting, thanks dwagPDX, im going to try your solution and let you know how that goes.

https://developers.google.com/fusiontables/docs/v1/using#WorkingStyles
https://groups.google.com/forum/#!topic/fusion-tables-users-group/EceabeRWqWc