I am using Google Maps API. I want to assign colors to some countries.
To do that, i have to get each country boundaries to be able to draw polygon. So, i'm using FusionTables. For every countries, I do FusionTables query to get the layer and then set the map. Here what i have done.
var countryArray = new Array();
var nodeArray = new Array();
var companyArray = new Array();
var locationsArray = new Array();
function plotMarker() {
var rootMarker = locationsArray[companyArray.indexOf(rootCompany)];
var latlng = new google.maps.LatLng(0, 0);
var myStyle = [
{
featureType: "all",
elementType: "labels",
stylers: [
{
visibility: "off" }
]
}
];
map = new google.maps.Map(document.getElementById("map_canvas"), {
mapTypeControlOptions: {
mapTypeIds: ['mystyle', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN]
},
center: latlng,
zoom: 2,
mapTypeId: 'mystyle'
});
map.mapTypes.set('mystyle', new google.maps.StyledMapType(myStyle, { name: 'My Style' }));
for (var i = 0; i < locationsArray.length; i++) {
if (locationsArray[i] != undefined) {
var latitude = locationsArray[i].lat() + verDiff;
var longitude = locationsArray[i].lng() + horDiff;
var newLatlng = new google.maps.LatLng(latitude, longitude);
var ftoptions = {
query: {
from: '419167',
select: 'kml_4326',
where: "sovereignt = '"+countryArray[i]+"'"
},
suppressInfoWindows:true,
styles: [
{
polygonOptions: {
fillColor:'#0040FF',
fillOpacity:0.7
}
}
]
};
var layer = new google.maps.FusionTablesLayer(ftoptions);
layer.setMap(map);
}
}
}
But, why does the style only work for the first country? I wonder if the queries are not successfully performed for all countries or just there's something wrong with the style? Any helps would be appreciated.
A map can only have 1 styled FusionTablesLayer, the styles of the other layers will be ignored.
Create a single FusionTablesLayer and select multiple sovereignt's via a IN()
-condition