I am trying to directly integrate Geoserver with a web page containing a
Google Maps control. However serving a KML from Geoserver into a Google Maps
control seems to fail. Is there a way to overcome this? Sample code below.
Should Geoserver be able to server KMLs into a Google Maps control?
Thanks in advance.
Clark
CODE SAMPLE
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API Example: GGeoXml KML Overlay</title>
<script
src="http://maps.google.com/maps?file=api&v=2&key=ABQAAAy0fUqYNFQ7C7
xz9H-dbIbhSon-XbW9m4z5cwANTjRUXLA7vUPRSOY2gMtU3bW1bIeFuDmoexenB8QA"
type="text/javascript"></script>
<script type="text/javascript">
var map;
var geoXml;
var toggleState = 1;
function initialize() {
if (GBrowserIsCompatible()) {
geoXml = new
GGeoXml("http://localhost:8080/geoserver/wms/kml_reflect?layers=tiger:tiger_
roads");
map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GLargeMapControl());
map.addControl(new GLargeMapControl());
map.addOverlay(geoXml);
}
}
function toggleMyKml() {
if (toggleState == 1) {
map.removeOverlay(geoXml);
toggleState = 0;
} else {
map.addOverlay(geoXml);
toggleState = 1;
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 640px; height: 480px; float:left;
border: 1px solid black;"></div>
</div>
<br clear="all"/>
<br/>
<input type="button" value="Toggle KML" onClick="toggleMyKml();"/>
</body>
</html>