mattmcw
/
these-3-words
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add overlay for information.

This commit is contained in:
Kevin Dungs 2014-11-17 19:33:38 +01:00
parent ff5d158a4e
commit 97b6dd6dbb
1 changed files with 34 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
views/map.html
View File

@ -6,12 +6,45 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>These3Words Map</title> <title>These3Words Map</title>
<!-- Style --> <!-- Style -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css"> <style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;} html, body, #map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
#overlay {
background: rgba(255, 255, 255, .5);
border-radius: 10px;
padding: 0;
position: absolute;
left: 10px;
bottom: 30px;
max-width: 300px;
}
#overlay h4 {
background: rgba(255, 255, 255, .75);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 10px;
margin: 0;
}
#overlay p {
padding: 10px;
margin: 0;
}
</style> </style>
</head> </head>
<body> <body>
<div id="map-canvas"></div> <div id="map-canvas"></div>
<div id="overlay">
<h4>{{ threewords }}</h4>
<p><strong>Lat:</strong> {{ lat }}</p>
<p><strong>Long:</strong> {{ lng }}</p>
</div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript"> <script type="text/javascript">
function initialize() { function initialize() {