I'm creating a heat maps showing counts per county using KML data through the API using PHP. The creation of the tables, styles, and templates work as expected. When viewing the maps from my Google Drive, and opening them using Fusion Tables, they appear correctly. Meaning, the maps show the varying polygon colors for each county depending on the count and buckets I created via the API.
However, I would like to display these maps on different web pages using the embedded iFrame. According to the documentation, the embed uses the default style. Which, happens to be the one I created for it.
However, when viewing the page with the embedded map, the polygons appear but are not colored according to the counts (which show if you click a polygon). It is not until I go into the Map via the web interface, click Publish, that the colors start appearing on the embedded page. I also notice another style being created but its a duplicate of what I already had (below).
So the questions are: Has anyone ran into this issue? Is there a way to set publish via the API using PHP? Any suggestions would be helpful.
First style created by API
Google_Service_Fusiontables_StyleSettingList {#1164
#collection_key: "items"
#itemsType: "Google_Service_Fusiontables_StyleSetting"
#itemsDataType: "array"
+kind: "fusiontables#styleSettingList"
+nextPageToken: null
+totalItems: 1
#internal_gapi_mappings: []
#modelData: array:1 [
"items" => array:1 [
0 => array:4 [
"kind" => "fusiontables#styleSetting"
"tableId" => "1v0Q9grONGtJZAolcaBNLoQh691onorw0GVthYyiL"
"styleId" => 1
"polygonOptions" => array:1 [
"fillColorStyler" => array:3 [
"kind" => "fusiontables#buckets"
"columnName" => "Count"
"buckets" => array:5 [
0 => array:4 [
"min" => 0.0
"max" => 25.0
"color" => "#0000ff"
"opacity" => 0.5
]
1 => array:4 [
"min" => 25.0
"max" => 57.0
"color" => "#33ffff"
"opacity" => 0.5
]
2 => array:4 [
"min" => 57.0
"max" => 161.0
"color" => "#ffff00"
"opacity" => 0.5
]
3 => array:4 [
"min" => 161.0
"max" => 365.0
"color" => "#ff6600"
"opacity" => 0.5
]
4 => array:4 [
"min" => 365.0
"max" => 20000.0
"color" => "#ff0000"
"opacity" => 0.5
]
]
]
]
]
]
]
#processed: []
}
Second style added after using map console and publish
Google_Service_Fusiontables_StyleSettingList {#1164
#collection_key: "items"
#itemsType: "Google_Service_Fusiontables_StyleSetting"
#itemsDataType: "array"
+kind: "fusiontables#styleSettingList"
+nextPageToken: null
+totalItems: 2
#internal_gapi_mappings: []
#modelData: array:1 [
"items" => array:2 [
0 => array:4 [
"kind" => "fusiontables#styleSetting"
"tableId" => "1v0Q9grONGtJZAolcaBNLoQh691onorw0GVthYyiL"
"styleId" => 1
"polygonOptions" => array:1 [
"fillColorStyler" => array:3 [
"kind" => "fusiontables#buckets"
"columnName" => "Count"
"buckets" => array:5 [
0 => array:4 [
"min" => 0.0
"max" => 25.0
"color" => "#0000ff"
"opacity" => 0.5
]
1 => array:4 [
"min" => 25.0
"max" => 57.0
"color" => "#33ffff"
"opacity" => 0.5
]
2 => array:4 [
"min" => 57.0
"max" => 161.0
"color" => "#ffff00"
"opacity" => 0.5
]
3 => array:4 [
"min" => 161.0
"max" => 365.0
"color" => "#ff6600"
"opacity" => 0.5
]
4 => array:4 [
"min" => 365.0
"max" => 20000.0
"color" => "#ff0000"
"opacity" => 0.5
]
]
]
]
]
1 => array:5 [
"kind" => "fusiontables#styleSetting"
"tableId" => "1v0Q9grONGtJZAolcaBNLoQh691onorw0GVthYyiL"
"styleId" => 2
"name" => "Map of Geometry"
"polygonOptions" => array:1 [
"fillColorStyler" => array:3 [
"kind" => "fusiontables#buckets"
"columnName" => "Count"
"buckets" => array:5 [
0 => array:4 [
"min" => 0.0
"max" => 25.0
"color" => "#0000ff"
"opacity" => 0.5
]
1 => array:4 [
"min" => 25.0
"max" => 57.0
"color" => "#33ffff"
"opacity" => 0.5
]
2 => array:4 [
"min" => 57.0
"max" => 161.0
"color" => "#ffff00"
"opacity" => 0.5
]
3 => array:4 [
"min" => 161.0
"max" => 365.0
"color" => "#ff6600"
"opacity" => 0.5
]
4 => array:4 [
"min" => 365.0
"max" => 20000.0
"color" => "#ff0000"
"opacity" => 0.5
]
]
]
]
]
]
]
#processed: []
}
After speaking with a Google tech, I found out the iFrame code uses a variable "y" that represents the style id. So in creating a style via the API and receiving the new id, you can then use this in the iFrame code for the map to make sure the right style is assigned.
<iframe width="700" height="500" scrolling="no" frameborder="no" src="https://fusiontables.google.com/embedviz?q=select+col2+from+{{ $project->fusion_table_id }}&viz=MAP&h=false&lat=34.72404554786575&lng=-93.08009375000002&t=1&z=3&l=col2&y={{ $project->fusion_style_id }}&tmplt={{ $project->fusion_template_id }}&hml=GEOCODE"></iframe>