mirror of
https://github.com/thebaer/tildes.git
synced 2018-07-20 07:15:21 +00:00
41 lines
1.0 KiB
HTML
41 lines
1.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<style type="text/css">
|
||
|
|
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key="></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
function initialize() {
|
||
|
|
var mapOptions = {
|
||
|
|
center: { lat: 30, lng: 0},
|
||
|
|
zoom: 3
|
||
|
|
};
|
||
|
|
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
|
||
|
|
(function() {
|
||
|
|
var xhr = new XMLHttpRequest();
|
||
|
|
xhr.onload = function() {
|
||
|
|
var users = JSON.parse(xhr.response);
|
||
|
|
for (var prop in users) {
|
||
|
|
if (users.hasOwnProperty(prop)) {
|
||
|
|
user = users[prop];
|
||
|
|
var marker = new google.maps.Marker({
|
||
|
|
position: new google.maps.LatLng(user.lat, user.lng),
|
||
|
|
map: map,
|
||
|
|
title: user.name
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
xhr.open('get', 'where.json');
|
||
|
|
xhr.send();
|
||
|
|
})();
|
||
|
|
}
|
||
|
|
google.maps.event.addDomListener(window, 'load', initialize);
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="map-canvas"></div>
|
||
|
|
</body>
|
||
|
|
</html>
|