69 lines
2.0 KiB
HTML
69 lines
2.0 KiB
HTML
<!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,
|
|
zoomControl: true,
|
|
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 image = {
|
|
url: '../images/icons/cf_icon_position.png',
|
|
scaledSize: new google.maps.Size(70, 70)
|
|
};
|
|
|
|
var marker = new google.maps.Marker({
|
|
icon : image,
|
|
position: new google.maps.LatLng(53.570645, 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>Your 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> |