Question

I have this implementation with fusion table layers where I try to use the pre-defined marker icons with letters A-Z to show the result of a search query on map (much like the original google maps does).

The way I achieve this is by first creating a layer, with a generic icon for all markers..

var layer = new google.maps.FusionTablesLayer({
    query: {
        select: 'Geometry',
        from: 0000000
    },
    map: map,
    options: {
        suppressInfoWindows: true
    },
    styles: [{
        markerOptions: {
            iconName: "measle_white"
        }
    }]
});

Meanwhile, I query the same table for 25 results with a ST_DISTANCE ordering based on where my map is centered (geopositioned),

var queryUrlHead = 'http://www.google.com/fusiontables/api/query?sql=',
    queryUrlTail = '&jsonCallback=success',
    query = 'SELECT+ID+FROM+0000000+ORDER+BY+ST_DISTANCE(Geometry,LATLNG('+position.coords.latitude+','+position.coords.longitude+'))+LIMIT+25';

var queryurl = queryUrlHead + query + queryUrlTail;

The returned JSON object is an array of unique ID’s which I call ‘ids’. I then use some trigger (zoomchanged) to redraw the 25 nearest icons with the letter icons (insprired by this).

    google.maps.event.addListener(map, 'zoom_changed', function () {

layer.setOptions({
    styles: [{
            markerOptions: {
                iconName: "measle_white"
            }
        }, //fallback
        {
            where: "'ID' = " + ids.table.rows[0][0],
            markerOptions: {
                iconName: "a_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[1][0],
            markerOptions: {
                iconName: "b_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[2][0],
            markerOptions: {
                iconName: "c_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[3][0],
            markerOptions: {
                iconName: "d_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[4][0],
            markerOptions: {
                iconName: "e_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[5][0],
            markerOptions: {
                iconName: "f_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[6][0],
            markerOptions: {
                iconName: "g_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[7][0],
            markerOptions: {
                iconName: "h_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[8][0],
            markerOptions: {
                iconName: "i_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[9][0],
            markerOptions: {
                iconName: "j_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[10][0],
            markerOptions: {
                iconName: "k_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[11][0],
            markerOptions: {
                iconName: "l_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[12][0],
            markerOptions: {
                iconName: "m_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[13][0],
            markerOptions: {
                iconName: "n_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[14][0],
            markerOptions: {
                iconName: "o_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[15][0],
            markerOptions: {
                iconName: "p_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[16][0],
            markerOptions: {
                iconName: "q_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[17][0],
            markerOptions: {
                iconName: "r_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[18][0],
            markerOptions: {
                iconName: "s_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[19][0],
            markerOptions: {
                iconName: "t_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[20][0],
            markerOptions: {
                iconName: "u_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[21][0],
            markerOptions: {
                iconName: "v_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[22][0],
            markerOptions: {
                iconName: "w_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[23][0],
            markerOptions: {
                iconName: "x_blue"
            }
        }, {
            where: "'ID' = " + ids.table.rows[24][0],
            markerOptions: {
                iconName: "z_blue"
            }
        }
    ]
});

Now, this actually works brilliantly except only for the top 5 results A-D (+1 for the fallback icon). What went wrong here? Did I hit some limit (markerOptions only takes 5 values??) or did I mess up the code?

Sidenote: This example appears to have more than 5 icons per layer, but Google made it and I don’t understand any of it.

Answer 1

Sorry, but only 5 styles can be set via the Maps API. This limit is mentioned in the developers guide.
I suspect that the map displaying all possible icons is not a FT layer. You can have many more styles if it’s done via the FT UI, but that is not dynamic and probably won’t work for your situation.