placing a sandboxed googlemap

10.3.x-maintenance
skaman82 2015-11-17 03:27:44 +01:00
parent 644c8da1cf
commit 03252dd8c4
4 changed files with 85 additions and 5 deletions

View File

@ -18,7 +18,12 @@
}
},
"permissions": [
"sandbox": {
"pages": [
"tabs/map.html"]
},
"permissions": [
"https://www.google-analytics.com/",
"https://*.github.com/",
"https://*.githubusercontent.com/",

View File

@ -18,13 +18,24 @@
.tab-gps a {
font-weight: bold;
te
}
#map-canvas {
height: 100%;
background: #ccc;
width: 100%;
float: left;
}
#map {
display:none;
height: 100%;
width: 100%;
}
.tab-gps iframe {
height: 100%;
width: 100%;
}
progress[value]::-webkit-progress-bar {

View File

@ -146,13 +146,15 @@
</div>
</div>
<div class="cf_column half">
<div class="gui_box grey">
<div class="gui_box grey" style="height: 444px;">
<div id="connect" style="display:none; text-align:center;">
please check your internet connection
<div class="default_btn" style="width:50px; margin-left:auto; margin-right:auto; float:none;"><a id="check">retry</a></div>
</div>
<div id="map" style="margin-top:10px;" style="display:none;">
<div id="map" style="margin-top:0px; display:none;">
Online check success! Map can be loaded here!
<iframe src="tabs/map.html"></iframe>
</div>
</div>

62
tabs/map.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<title>Asynchronous Loading</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script>
function loadMapScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&callback=initialize';
document.head.appendChild(script);
}
window.onload = loadMapScript;
var map;
function initialize() {
var mapOptions = {
zoom: 17,
streetViewControl: false,
// mapTypeId: google.maps.MapTypeId.SATELLITE,
center: {lat: 53.570645, lng: 10.001362}
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
// The below line is equivalent to writing:
// position: new google.maps.LatLng(-34.397, 150.644)
position: {lat: 53.570645, lng: 10.001362},
map: map
});
// You can use a LatLng literal in place of a google.maps.LatLng object when
// creating the Marker object. Once the Marker object is instantiated, its
// position will be available as a google.maps.LatLng object. In this case,
// we retrieve the marker's position using the
// google.maps.LatLng.getPosition() method.
var infowindow = new google.maps.InfoWindow({
content: '<p>Marker Location:' + marker.getPosition() + '</p>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
// sandbox docs1: https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/sandbox
// sandbox docs1: https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/sandboxed-content
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>