[Go to Part I, Part II, Part III, Part IV, Part V, Part VI]
Great, so you’ve already got your KML. How do you toss it into a google map?
This part’s pretty easy. I picked up nearly everything below here:
http://code.google.com/apis/maps/documentation/javascript/basics.html
Create a DIV and use CSS to set the width and height, and give it the ID of “map_canvas”.
Create a javascript function called initialize that slaps a google map in there and adds your KML Layer. Then call this function (I did so on the Body using Onload).
Also, since my data is dynamic, I had to do something to convince Google not to cache my KML file the first time it loaded. Otherwise, if I changed my data, Google may not reflect the changes. We did this by using Javascript to add the current date and time to the URL. That’s my dontcache variable.
Here’s my Page:
<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/>
<style type=”text/css”>
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<title>
Studyabroad Map
<%IF Request.QueryString(“Semester”)<>”” THEN
Response.Write(” for “&Request.QueryString(“Semester”))
END IF%>
</title>
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>
<script type=”text/javascript”>
function initialize() {
var centerLatLng = new google.maps.LatLng(39.677595, -75.753662);
var myOptions = {
zoom: 2,
center: centerLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
var dontcache = new Date().getTime();
var Studyabroad_Layer = new google.maps.KmlLayer(“http://test.aip.udel.edu/gmap/kml.asp?dontcache=”+dontcache,{preserveViewport:false});
Studyabroad_Layer.setMap(map);
}
</script>
</head>
<body onload=”initialize()”>
<div id=”map_canvas”></div>
</body>
</html>
