en noir : code obligatoire
en rouge : explications
en vert : code personnalisable
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<title>Viewer HTML5 d'une image grande dimension tout écran</title>
<style type="text/css">
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//Construction de la pseudo carte
var centreLat=0.0; // le (0,0) est le centre de l'image
var centreLon=0.0;
var initialZoom=3;
var imageWraps=false; //false : l'image n'est pas répétée
varcadre;
var gmicMapType;
function GMICMapType() {
this.Cache = Array();
this.opacity = 1.0;
}
GMICMapType.prototype.tileSize = new google.maps.Size(256, 256);
GMICMapType.prototype.maxZoom = 19;
GMICMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var c = Math.pow(2, zoom);
var tilex=coord.x,tiley=coord.y;
if (imageWraps) {
if (tilex<0) tilex=c+tilex%c;
if (tilex>=c) tilex=tilex%c;
if (tiley<0) tiley=c+tiley%c;
if (tiley>=c) tiley=tiley%c;
}
else {
if ((tilex<0)||(tilex>=c)||(tiley<0)||(tiley>=c))
{
var blank = ownerDocument.createElement('DIV');
blank.style.width = this.tileSize.width + 'px';
blank.style.height = this.tileSize.height + 'px';
return blank;
}
}
var img = ownerDocument.createElement('IMG');
var d = tilex;
var e = tiley;
var f = "t";
for (var g = 0; g < zoom; g++) {
c /= 2;
if (e < c) {
if (d < c) { f += "q" }
else { f += "r"; d -= c }
}
else {
if (d < c) { f += "t"; e -= c }
else { f += "s"; d -= c; e -= c }
}
}
img.id = "t_" + f;
img.style.width = this.tileSize.width + 'px';
img.style.height = this.tileSize.height + 'px';
img.src = "images/essai-tiles/"+f+".jpg";
this.Cache.push(img);
return img;
}
GMICMapType.prototype.realeaseTile = function(tile) {
var idx = this.Cache.indexOf(tile);
if(idx!=-1) this.Cache.splice(idx, 1);
tile=null;
}
GMICMapType.prototype.name = "Cadastre Toulon en 1827";
GMICMapType.prototype.alt = "2014 Image Lafayette-68";
GMICMapType.prototype.setOpacity = function(newOpacity) {
this.opacity = newOpacity;
for (var i = 0; i < this.Cache.length; i++) {
this.Cache[i].style.opacity = newOpacity; //mozilla
this.Cache[i].style.filter = "alpha(opacity=" + newOpacity * 100 + ")"; //ie
}
}
function getWindowHeight() {
if (window.self&&self.innerHeight) {
return self.innerHeight;
}
if (document.documentElement&&document.documentElement.clientHeight) {
return document.documentElement.clientHeight;
}
return 0;
}
function resizeMapDiv() {
//retaille la hauteur de la div qui contiendra l'image
//le retaillage est fait apres que l'image est été créé.
var d=document.getElementById("cadre");
var offsetTop=0;
for (var elem=d; elem!=null; elem=elem.offsetParent) {
offsetTop+=elem.offsetTop;
}
var height=getWindowHeight()-offsetTop-16;
if (height>=0) {
d.style.height=height+"px";
}
}
function load() {
resizeMapDiv();
var latlng = new google.maps.LatLng(centreLat, centreLon);
var myOptions = {
zoom: initialZoom,
minZoom: 1,
maxZoom: 6,
center: latlng,
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: false,
streetViewControl: false,
overviewMapControl: true,
mapTypeControlOptions: { mapTypeIds: ["ImageCutter"] },
mapTypeId: "ImageCutter"
}
cadre = new google.maps.Map(document.getElementById("cadre"), myOptions);
gmicMapType = new GMICMapType();
cadre.mapTypes.set("ImageCutter",gmicMapType);
/////////////////////////////////////////////////////////////////////////////////////
//Add any markers here e.g.
// var marker = new google.maps.Marker({
// map:map,
// position: new google.maps.LatLng(x,y), (o,o) le centre de l'image
// title: "My Marker"
// }); voir l'exemple ci-après
/////////////////////////////////////////////////////////////////////////////////////
var marqueur = new google.maps.Marker({
map:cadre,
position: new google.maps.LatLng(19,62.5),
title: "68, Cours Lafayette : j'habite là !"
});
}
</script>
</head>
<body onresize="resizeMapDiv()" onload="load()">
<div id="cadre"></div>
<noscript>
<p>Il semble que JavaScript soit désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>