A more complete example of the Oblivion map with additional features. Contains source code obtained from the excellent Goggle Maps API Tutorial.
<!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>Oblivion Test Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAdCxcZPL1FlURx_ZuWGDXPBQgXfZEq_9lK90U8L4elbuzKplcARR3-FuKzQZL-QHw0_mnLYqOXQ7VxA"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width:800px; height:600px;"></div>
<script type="text/javascript">
//<![CDATA[
var OorImage = "outofrange.jpg";
if (GBrowserIsCompatible()) {
function CustomGetTileUrl(a,z) {
if (z >= 9 && z <= 16) {
var MaxX = Math.floor(133/Math.pow(2, 16-z));
var MaxY = Math.floor(129/Math.pow(2, 16-z));
if (a.x < MaxX && a.y < MaxY && a.x >= 0 && a.y >= 0) {
return "zoom" + z + "/tamriel-"+a.x+"-"+a.y+"-"+z+".jpg";
}
}
return OorImage;
};
// ===== The Mercator map, exactly like that in the "custommaptile" example =====
var tilelayers = [new GTileLayer(new GCopyrightCollection("Tamriel: uesp.net"),9,16)];
tilelayers[0].getCopyright = function(a,b) {
return {prefix:"Tamriel: ", copyrightTexts:["uesp.net"]};
}
tilelayers[0].getTileUrl = CustomGetTileUrl;
var custommap = new GMapType(tilelayers, G_NORMAL_MAP.getProjection(), "Mercator",{errorMessage:"No Data Available"});
// ====== Create the Euclidean Projection for the flat map ======
// == Constructor ==
function EuclideanProjection(a){
this.pixelsPerLonDegree=[];
this.pixelsPerLonRadian=[];
this.pixelOrigo=[];
this.tileBounds=[];
var b=256;
var c=1;
for(var d=0;d<a;d++){
var e=b/2;
this.pixelsPerLonDegree.push(b/360);
this.pixelsPerLonRadian.push(b/(2*Math.PI));
this.pixelOrigo.push(new GPoint(e,e));
this.tileBounds.push(c);
b*=2;
c*=2
}
}
// == Attach it to the GProjection() class ==
EuclideanProjection.prototype=new GProjection();
// == A method for converting latitudes and longitudes to pixel coordinates ==
EuclideanProjection.prototype.fromLatLngToPixel=function(a,b){
var c=Math.round(this.pixelOrigo[b].x+a.lng()*this.pixelsPerLonDegree[b]);
var d=Math.round(this.pixelOrigo[b].y+(-2*a.lat())*this.pixelsPerLonDegree[b]);
return new GPoint(c,d)
};
// == a method for converting pixel coordinates to latitudes and longitudes ==
EuclideanProjection.prototype.fromPixelToLatLng=function(a,b,c){
var d=(a.x-this.pixelOrigo[b].x)/this.pixelsPerLonDegree[b];
var e=-0.5*(a.y-this.pixelOrigo[b].y)/this.pixelsPerLonDegree[b];
return new GLatLng(e,d,c)
};
// == a method that checks if the y value is in range, and wraps the x value ==
EuclideanProjection.prototype.tileCheckRange=function(a,b,c){
var d=this.tileBounds[b];
if (a.y<0||a.y>=d) {
return false;
}
if(a.x<0||a.x>=d){
a.x=a.x%d;
if(a.x<0){
a.x+=d;
}
}
return true
}
// == a method that returns the width of the tilespace ==
EuclideanProjection.prototype.getWrapWidth=function(zoom) {
return this.tileBounds[zoom]*256;
}
// ===== Create a Map Type that uses the Euclidean projection =====
var tilelayers2 = [new GTileLayer(new GCopyrightCollection("Tamriel: uesp.net"),9,16)];
tilelayers2[0].getCopyright = function(a,b) {return {prefix:"Tamriel: ©", copyrightTexts:["uesp.net"]}; }
tilelayers2[0].getTileUrl = CustomGetTileUrl;
var custommap2 = new GMapType(tilelayers2, new EuclideanProjection(17), "Euclidean", {errorMessage:"No Data Available"});
// == Open a map with these two custom map types ==
var map = new GMap2(document.getElementById("map"), {mapTypes:[custommap2]});
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(89.85, -179.63), 11, custommap2);
// Add a move listener to restrict the bounds range
GEvent.addListener(map, "move", function() {
checkBounds();
});
// The allowed region which the whole map must be within
var allowedBounds = new GLatLngBounds(new GLatLng(89.62,-179.9999), new GLatLng(89.9999, -179.25));
// If the map position is out of range, move it back
function checkBounds() {
// Perform the check and return if OK
if (allowedBounds.contains(map.getCenter())) {
return;
}
// It`s not OK, so find the nearest allowed point and move there
var C = map.getCenter();
var X = C.lng();
var Y = C.lat();
var AmaxX = allowedBounds.getNorthEast().lng();
var AmaxY = allowedBounds.getNorthEast().lat();
var AminX = allowedBounds.getSouthWest().lng();
var AminY = allowedBounds.getSouthWest().lat();
if (X > 0.0) {X = AminX;} //Avoid wrapping
if (Y < 0.0) {Y = AmaxY;}
if (X < AminX) {X = AminX;}
if (X > AmaxX) {X = AmaxX;}
if (Y < AminY) {Y = AminY;}
if (Y > AmaxY) {Y = AmaxY;}
map.setCenter(new GLatLng(Y,X));
}
// ======== Add a map overview ==========
map.addControl(new GOverviewMapControl(new GSize(200,200)));
// ======== A function to adjust the positioning of the overview ========
function positionOverview(x,y) {
var omap=document.getElementById("map_overview");
omap.style.left = x+"px";
omap.style.top = y+"px";
// == restyling ==
omap.firstChild.style.border = "1px solid gray";
omap.firstChild.firstChild.style.left="4px";
omap.firstChild.firstChild.style.top="4px";
omap.firstChild.firstChild.style.width="190px";
omap.firstChild.firstChild.style.height="190px";
}
// ======== Cause the overview to be positioned AFTER IE sets its initial position ========
setTimeout("positionOverview(800,0)",1);
}
// display a warning if the browser was not compatible
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>
</script>
</body></html>