I’m trying to code a basic ‘display a map from KML’ website, and am getting an opaque failure. I was hoping someone could have a look at the code below, and tell me if there are any novice errors.
The malfunction is that when I run it, the map goes fully zoomed in on (0,0), rather than displaying all my pointers encoded in the KML. The KML it points to ought to be valid. It was working some time ago, and I’m not sure what I changed, if anything. It’s based very strongly on a Google example.
Apologies for the generality of the question — I really am just starting out. Many thanks in advance.
Mark
<html>
<head>
<meta name="viewport" content="initial-scale=0.5, user-scalable=yes" />
<meta http-equiv="refresh" content="1800">
<style type="text/css">
html { height: 100% }
body { height: 100%; width: 500px; margin: 0px auto; text-align:center; padding: 0 }
map_canvas { height: 65% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAQylgnaeGmmExmZio2e2zixSRHOaWUj2I&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(55, 2);
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var trip_layer = new google.maps.KmlLayer('http://mc711.user.srcf.net/vacation/trip.1339139845.kml');
trip_layer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="Notes" style="width: 75%; font-size:48; font-family:sans-serif; text-align:center; margin:0px auto;">Mark's location</div>
<div id="map_canvas" style="width: 100%; height: 480px;"></div>
</body>
</html>
The problem is that your KML file is not there, so it returns a 404 – Not found:
http://mc711.user.srcf.net/vacation/trip.1339139845.kml