Playing around w/ Google Maps API
Just fiddling around with a few functionalities of Google Maps api v3 and the usage of KML layers. This particular simple example loads KML layers based on user selection, and allows user to zoom to selected layers.
by Alex Azuero
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: KmlLayer KML Features</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=&sensor=false"></script>
<script type="text/javascript">
$(document).ready(function() {
//clear all layer selections when document loads
$('#controls input:checkbox').removeAttr ('checked');
});
var map;
var layer;
var layer2;
var layer3;
function init() {
var myLatlng = new google.maps.LatLng(36.65, -100.95);
var myOptions = {
zoom : 4,
center : myLatlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
//declare new instance of map to display in #map_canvas div
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//declare instances of each layer to disp on map (could put this in an array also)
layer = new google.maps.KmlLayer('http://dl.dropbox.com/u/65175471/GeoApps/oldskooldistricts.kml', {preserveViewport : true});
layer2 = new google.maps.KmlLayer('http://dl.dropbox.com/u/65175471/GeoApps/sfpost_offices.kml', {preserveViewport : true});
layer3 = new google.maps.KmlLayer('http://dl.dropbox.com/u/65175471/GeoApps/cta.kml', {preserveViewport : true});
}
...