-
Notifications
You must be signed in to change notification settings - Fork 2
/
googlemaps.html
85 lines (84 loc) · 3.06 KB
/
googlemaps.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
<head>
<title>swissimage</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { overflow: hidden; }
body { overflow: hidden; padding: 0; margin: 0;
width: 100%; height: 100%; font-family: Trebuchet MS, Trebuchet, Arial, sans-serif; }
#map { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 15px; overflow: auto; }
#footer { position: absolute; bottom: 0px; left: 0px; width:100%; height: 12px; overflow: hidden; }
@media screen and (max-width: 600px) {
#map { top:0px; left:0px; width:100%; height:100%;}
}
body { background: #f4f4f4;}
#header { background: #fff; box-shadow: 0 1px 3px #CCC; border: 1px solid #ccc; }
#header h1 { padding:7px 10px; margin:0; font-size: 28px; }
#map { border: 1px solid #ccc; box-shadow: 0 1px 3px #CCC; background-color: #DEDCD7;}
#footer { text-align:center; font-size:9px; color:#606060; }
</style>
<!--[if lte IE 6]>
<style type="text/css">
#map {
height:expression(document.body.clientHeight-35); /* 10+10+15=35 */
width:expression(document.body.clientWidth-20); /* 10+10=20 */
}
</style>
<![endif]-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var mapBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(46.929649, 9.539910),
new google.maps.LatLng(46.985765, 9.656996));
var mapMinZoom = 11;
var mapMaxZoom = 16;
var maptiler = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
var proj = map.getProjection();
var z2 = Math.pow(2, zoom);
var tileXSize = 256 / z2;
var tileYSize = 256 / z2;
var tileBounds = new google.maps.LatLngBounds(
proj.fromPointToLatLng(new google.maps.Point(coord.x * tileXSize, (coord.y + 1) * tileYSize)),
proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * tileXSize, coord.y * tileYSize))
);
var y = coord.y;
if (mapBounds.intersects(tileBounds) && (mapMinZoom <= zoom) && (zoom <= mapMaxZoom))
return zoom + "/" + coord.x + "/" + y + ".jpg";
else
return "http://www.maptiler.org/img/none.png";
},
tileSize: new google.maps.Size(256, 256),
isPng: false,
name: "MapTiler",
alt: "MapTiler",
minZoom: mapMinZoom,
maxZoom: mapMaxZoom
});
function init() {
var opts = {
streetViewControl: false,
mapTypeId: 'maptiler',
backgroundColor: "rgb(255,255,255)",
center: new google.maps.LatLng(46.957707, 9.598453),
zoom: 11,
mapTypeControlOptions: {
mapTypeIds: [
'maptiler',
google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN
]
},
}
map = new google.maps.Map(document.getElementById("map"), opts);
map.mapTypes.set('maptiler', maptiler);
}
</script>
</head>
<body onload="init()">
<div id="footer">Generated with <a href="http://www.maptiler.com/">MapTiler</a></div>
<div id="map"></div>
</body>
</html>