This little 'bug' is driving me mad. A 1,000 blessings to any one who can solve it.
When i paste the html from a simple fusion table wizard into blogger site [1] the base map appears for a split second then disappears. Only a 'white' base-map and map frame, zoom bar and marker icons remain. A useless map.
here's my html
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:500px; height:400px; }
.layer-wizard-search-label { font-family: sans-serif };
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layer_0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(21.15533458599919, 106.11318745800781),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "col1",
from: "1ah3uh2UaH-z4PCVJ4gJr3nww3qBg3oBFd_ZeB0VD"
},
map: map,
styleId: 2,
templateId: 2
});
}
function changeMap_0() {
var whereClause;
var searchString = document.getElementById('search-string_0').value.replace(/'/g, "\\'");
if (searchString != '--Select--') {
whereClause = "'Treatment' = '" + searchString + "'";
}
layer_0.setOptions({
query: {
select: "col1",
from: "1ah3uh2UaH-z4PCVJ4gJr3nww3qBg3oBFd_ZeB0VD",
where: whereClause
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<label class="layer-wizard-search-label">
Edit map view >
<select id="search-string_0" onchange="changeMap_0(this.value);">
<option value="--Select--">--Select--</option>
<option value="Active">Active</option>
<option value="Building">Building</option>
<option value="None">None</option>
</select>
</label>
</div>
</body>
</html>