placing a sandboxed googlemap
parent
644c8da1cf
commit
03252dd8c4
|
@ -18,7 +18,12 @@
|
|||
}
|
||||
},
|
||||
|
||||
"permissions": [
|
||||
"sandbox": {
|
||||
"pages": [
|
||||
"tabs/map.html"]
|
||||
},
|
||||
|
||||
"permissions": [
|
||||
"https://www.google-analytics.com/",
|
||||
"https://*.github.com/",
|
||||
"https://*.githubusercontent.com/",
|
||||
|
|
15
tabs/gps.css
15
tabs/gps.css
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
Loading…
Reference in New Issue