<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
<script type="text/javascript">
var language = window.sankore ? sankore.locale().substr(0,2) : "en";
function initMap()
{
var map;
var mapType = null;
// Default map type can be ROADMAP, SATELLITE, HYBRID or TERRAIN
var defaultMapType = google.maps.MapTypeId.HYBRID;
var lat = 46.2;
var lng = 6.14;
var zoom = 4;
var position = new google.maps.LatLng(lat, lng);
if (window.sankore) {
lat = parseFloat(window.sankore.preference('latitude', lat));
lng = parseFloat(window.sankore.preference('longitude', lng));
zoom = parseFloat(window.sankore.preference('zoom', zoom));
mapType = window.sankore.preference('mapTypeId', mapType);
position = new google.maps.LatLng(lat, lng);
};
map = new google.maps.Map(document.getElementById('map'), {
center: position,
zoom: zoom,
mapTypeId: mapType ? mapType : defaultMapType
});
if (window.sankore) {
map.addListener('zoom_changed',function()
{
window.sankore.setPreference('zoom', map.getZoom());
});
map.addListener('dragend',function()
{
window.sankore.setPreference('latitude', map.getCenter().lat());
window.sankore.setPreference('longitude', map.getCenter().lng());
});
map.addListener('maptypeid_changed',function()
{
window.sankore.setPreference('mapTypeId', map.getMapTypeId());
});
}
window.onresize();
}
window.onresize = function()
{
document.getElementById('map').style.width = window.innerWidth + 'px';
document.getElementById('map').style.height = window.innerHeight + 'px';
};
</script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px"></div>
</body>
<script>
// language has to be set in the URL, hence this way of loading the API
document.write('\x3Cscript src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjqhXNSem9YdHR2GAb8zx0qHl4S1RsKxE&callback=initMap&language='+language+'">\x3C/script>');
</script>
</html>