/
google-maps.html
57 lines (53 loc) · 2.49 KB
/
google-maps.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Google Maps</title>
<link rel="stylesheet" type="text/css" href="files/style.css">
<link rel="stylesheet" type="text/css" href="build/shadowbox.css">
<script type="text/javascript" src="build/shadowbox.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAl9cpfw69cLkrXP2Twqd_WRTrhRABKE-Dyy--LEnL4tBuvgisYhTwJwM8vamMnN5m7lVaSNbK6hbmHA"></script>
<script type="text/javascript">
function openGoogleMaps() {
if (GBrowserIsCompatible()) {
Shadowbox.open({
player: "html",
content: "",
height: 300,
width: 500,
options: {
onFinish: function(item) {
var body = document.getElementById(Shadowbox.playerId);
var map = new GMap2(body);
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}
// add some simple controls
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
}
}
});
} else {
alert("Your browser is not compatible with Google Maps!");
}
}
Shadowbox.init();
</script>
</head>
<body>
<p>This example demonstrates how to use <a href="http://maps.google.com/">Google Maps</a> with Shadowbox. Note: If you use this example from your own domain, you will first need to <a href="http://code.google.com/apis/maps/signup.html">get your own API key</a>.</p>
<p><a href="#" onclick="openGoogleMaps();">Click Here</a></p>
<p id="foot">This file is part of <a href="http://shadowbox-js.com/">Shadowbox.js</a>.</p>
</body>
</html>