I am trying to overlay the layers that are rendered using map server over google maps.I am pretty much new to this whole thing. So I tried to go through this example here here http://mapserver.org/output/tile_mode.html.
Below is the code which I am using. Could someone let me know where I could be wrong or if there is any other way to configure this.
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google/MapServer Tile Example</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"> </script>
<script>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var urlTemplate = 'http://localhost:8080/cgi-bin/mapserv.exe?';
urlTemplate += 'map=C:/ms4w/Apache/htdocs/xyz/map/map.map&';
urlTemplate += 'layers=layer1 layer2&';
urlTemplate += 'mode=tile&';
urlTemplate += 'tilemode=gmap&';
urlTemplate += 'tile={X}+{Y}+{Z}';
var myLayer = new GTileLayer(null,0,18,{
tileUrlTemplate:urlTemplate,
isPng:true,
opacity:1.0 });
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.35, -80.55), 15);
map.addOverlay(new GTileLayerOverlay(myLayer));
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 500px"></div>
</body>
</html>
Ok the main purpose here is that I already have a basic map server application. Now I want the google map street layers as a the basemap on top of which my map server layers would get rendered.