62 lines
1.9 KiB
HTML
62 lines
1.9 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,
|
||
|
|
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>
|