maps-api-demos/index.html at master · boilerwadding/maps-api-demos · GitHub

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
<html>
<head>
  <title>Google Maps API Demos</title>
  <style type="text/css">
  body{
    font-family: Roboto, Tahoma, Arial;
  }
  h1{
    margin-left: 20%;
    padding: 10px 10px 10px 10px;

    width: 60%;
  }

  .main{
    margin-left: 20%;
    padding: 10px 10px 10px 10px;
    width: 60%;
    font-size:initial;
  }

  .main a{
    font-size: 105%;
    font-weight:bold;
  }
  </style>
</head>
<body>
  <h1>Google Maps API Demos</h1>
  <p class='main'>Some examples of things I've made with the Google Maps API to prove various concepts.</p>
  <h2 class='main'>Clipping map layers with CSS</h2>
  <p class='main'>
    These mainly work in latest/recent versions of Chrome & Firefox,
    but could be made to work in Safari & Opera with a little effort.<br/><br/>
    <a href="http://boilerwadding.github.io/maps-api-demos/spyglass/inset.html">Spyglass effect - traffic layer</a><br/>
    <a href="http://boilerwadding.github.io/maps-api-demos/spyglass/hybrid.html">Spyglass effect - satellite</a><br/>
    <a href="http://boilerwadding.github.io/maps-api-demos/spyglass/traffic-along-route.html">Show traffic along a route</a><br/>
    <a href="http://boilerwadding.github.io/maps-api-demos/spyglass/parks.html">Parks in London</a><br/>
    <a href="http://boilerwadding.github.io/maps-api-demos/spyglass/london.html">Traffic clipped to an admin boundary</a><br/>
  </p>
  </body>
</html>