loading kml and fusion tables layers using JSON

Chops

unread,

May 18, 2011, 11:57:14 AM5/18/11

to Google Maps JavaScript API v3

I'm trying to create a map similar to this one
http://mw1.google.com/mw-earth-vectordb/disaster/gulf_oil_spill/gulf_oil_map.html
that plots a large fusion tables database of historic sites on top of
a large number of kml overlays of satellite images and inundation maps
of the Mississippi River flooding. The original that I'm cloning used
V2 API. I've tried to update to V3 syntax but I can't get the layers
to load. Any help appreciated.

Here's my map: http://edfitz.com/test/flood_map/flood_map2.html

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<link rel="StyleSheet" href="disaster_map.css" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/
js?sensor=false" ></script>
<script type="text/javascript">

var map;
var layers;

function initialize() {

var missouri = new google.maps.LatLng(36.87638, -89.58884);

var myOptions = {
center: missouri,
zoom: 6,
mapTypeId: 'satellite'
}
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
loadJson('flood_map_layers.js');
}
//Begin layer menu
function loadJson(url) {
var s = document.createElement('script');
s.setAttribute('text', 'text/javascript');
s.src = url;
document.body.appendChild(s);
}

function PopulateLayers(json) {
if (json.error !== false) {
return;
}
var navBar = document.getElementById('sidebar');
navBar.innerHTML = '<div id="layerHeader">' + json.headerMessage +
'</div>';
var layerList = document.createElement('dl');
navBar.appendChild(layerList);
for (var i = 0; i < json.layers.length; ++i) {
var layer = json.layers[i];
if (layer == undefined) {
continue;
}
var id = 'disaster_layer_' + i;
var input = addLayer(layer, layerList, id);
if (layer.checked) {
input.checked = true;
toggleLayer(input.overlay, true);
}
}
}

function addLayer(layer, parentElem, id) {
if (layer == undefined) {
return;
}
// Create the input checkbox
var dtElem = document.createElement('dt');
parentElem.appendChild(dtElem);
var input = document.createElement('input');
input.type = 'checkbox';
input.id = id;
if (layer.type == 'kml') {
input.overlay = new google.maps.KmlLayer(layer.url);
}
else if (layer.type = 'fusion') {
input.overlay = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: 'layer.url'
},
});
} else {
return null;
}
input.onclick = function () { toggleLayer(this.overlay,
this.checked) };
dtElem.appendChild(input);

// Add the primary layer name
var layerNameElem = document.createTextNode(layer.name);
var boldElem = document.createElement('b');
boldElem.appendChild(layerNameElem);
dtElem.appendChild(boldElem);
// For KML layers, add a KML href
if (layer.type == 'kml') {
var anchorTag = document.createElement('a');
anchorTag.href = layer.url;
anchorTag.id = 'kml-link';
anchorTag.innerHTML = 'KML';
dtElem.appendChild(anchorTag);
dtElem.appendChild(document.createElement('br'));
}

// Add optional description below the checkbox/layer name
if (layer.desc !== undefined) {
var ddElem = document.createElement('dd');
parentElem.appendChild(ddElem);
var descElem = document.createElement('span');
descElem.className = 'comments';
descElem.innerHTML = layer.desc;
ddElem.appendChild(descElem);
ddElem.appendChild(document.createElement('br'));
}

return input;
}

function toggleLayer(overlay, checked) {
if (checked) {
overlay.setMap(map);
} else {
overlay.setMap(null);
}
}
</script>
</head>

<body onload="initialize()">

<div id="header"></div>
<div id="sidebar"></div>
<div id="map"></div>
<div id="more"></div>
</body>
</html>

Rossko

unread,

May 18, 2011, 2:56:49 PM5/18/11

to Google Maps JavaScript API v3

> var map;

Thats an empty variable called 'map' in global scope

> function initialize() {
...

> var map = new google.maps.Map(document.getElementById('map'),

Thats a map object called 'map' in the scope of initialize(), when
initialize() completes it won't be accessible to other code

> function toggleLayer(overlay, checked) {
...
> overlay.setMap(map);

This attempts to add an overlay to the empty variable in global scope.
No javascript error reported?

Michael Geary

unread,

May 18, 2011, 4:57:05 PM5/18/11

to google-map...@googlegroups.com

On Wed, May 18, 2011 at 11:56 AM, Rossko <ros...@culzean.clara.co.uk> wrote:

> var map;

Thats an empty variable called 'map' in global scope

...

> overlay.setMap(map);

This attempts to add an overlay to the empty variable in global scope.
No javascript error reported?

It may just be a no-op. The code is basically doing this:

overlay.setMap( undefined );

That may (the docs don't say) be treated the same as:

overlay.setMap( null );

So it would remove the overlay from a map if it's on one, or do nothing if it's not. (The docs don't make this clear either, but I suspect this isn't treated as an error.)

Of course, that's not what the OP wants to have happen - and you already showed *why* map is undefined - but it would explain the lack of a JS error.

-Mike

Chris Broadfoot

unread,

May 19, 2011, 2:53:31 AM5/19/11

to google-map...@googlegroups.com

Correct. setMap(undefined) will act the same as setMap(null) even though this is undocumented behaviour.

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

--
http://twitter.com/broady

Reply all

Reply to author

Forward