2015-11-17 02:27:44 +00:00
|
|
|
<!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;
|
2015-11-19 22:22:34 +00:00
|
|
|
padding: 0px;
|
2015-11-17 02:27:44 +00:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script>
|
2015-11-30 22:41:24 +00:00
|
|
|
|
|
|
|
|
window.addEventListener('message', function (e) {
|
|
|
|
|
var mainWindow = e.source;
|
|
|
|
|
var result = '';
|
|
|
|
|
try {
|
|
|
|
|
switch(e.data.action){
|
|
|
|
|
case 'zoom_in':
|
|
|
|
|
var zoom = map.getZoom();
|
|
|
|
|
zoom++;
|
|
|
|
|
map.setZoom(zoom);
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case 'zoom_out':
|
|
|
|
|
var zoom = map.getZoom();
|
|
|
|
|
zoom--;
|
|
|
|
|
map.setZoom(zoom);
|
|
|
|
|
break;
|
2015-12-01 21:00:37 +00:00
|
|
|
case 'center':
|
|
|
|
|
map.setCenter(new google.maps.LatLng(e.data.lat, e.data.lon));
|
2015-12-02 20:38:39 +00:00
|
|
|
marker.setPosition( new google.maps.LatLng( e.data.lat, e.data.lon ) );
|
|
|
|
|
map.panTo( new google.maps.LatLng( e.data.lat, e.data.lon ) );
|
2015-11-30 22:41:24 +00:00
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.log('message error');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2015-12-02 20:38:39 +00:00
|
|
|
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);
|
|
|
|
|
}
|
2015-11-17 02:27:44 +00:00
|
|
|
|
2015-12-02 20:38:39 +00:00
|
|
|
window.onload = loadMapScript;
|
2015-11-17 02:27:44 +00:00
|
|
|
|
2015-12-02 20:38:39 +00:00
|
|
|
var map;
|
|
|
|
|
var marker;
|
2015-11-30 22:41:24 +00:00
|
|
|
|
2015-12-02 20:38:39 +00:00
|
|
|
function initialize() {
|
2015-11-17 02:27:44 +00:00
|
|
|
|
2015-12-02 20:38:39 +00:00
|
|
|
var mapOptions = {
|
|
|
|
|
zoom: 17,
|
|
|
|
|
zoomControl: false,
|
|
|
|
|
streetViewControl: false,
|
|
|
|
|
center: {lat: 53.570645, lng: 10.001362}
|
|
|
|
|
};
|
|
|
|
|
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
|
|
|
|
|
|
|
|
|
|
var image = {
|
|
|
|
|
url: '../images/icons/cf_icon_position.png',
|
|
|
|
|
scaledSize: new google.maps.Size(70, 70)
|
|
|
|
|
};
|
2015-11-25 22:45:52 +00:00
|
|
|
|
2015-12-02 20:38:39 +00:00
|
|
|
marker = new google.maps.Marker({
|
|
|
|
|
icon : image,
|
|
|
|
|
position: new google.maps.LatLng(53.570645, 10.001362),
|
|
|
|
|
map:map
|
|
|
|
|
});
|
2015-11-25 01:53:05 +00:00
|
|
|
|
2015-11-17 02:27:44 +00:00
|
|
|
|
|
|
|
|
// 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.
|
2015-12-02 20:38:39 +00:00
|
|
|
var infowindow = new google.maps.InfoWindow({
|
|
|
|
|
content: '<p>Your Location: ' + marker.getPosition() + '</p>'
|
|
|
|
|
});
|
2015-11-17 02:27:44 +00:00
|
|
|
|
2015-12-02 20:38:39 +00:00
|
|
|
google.maps.event.addListener(marker, 'click', function() {
|
|
|
|
|
infowindow.open(map, marker);
|
|
|
|
|
});
|
2015-11-30 22:41:24 +00:00
|
|
|
|
2015-12-02 20:38:39 +00:00
|
|
|
window.addEventListener('message', function(e) {
|
|
|
|
|
var data = e.data;
|
|
|
|
|
var origin = e.origin;
|
|
|
|
|
});
|
2015-11-17 02:27:44 +00:00
|
|
|
}
|
2015-11-25 01:53:05 +00:00
|
|
|
|
2015-11-17 02:27:44 +00:00
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="map-canvas"></div>
|
|
|
|
|
</body>
|
