-
Notifications
You must be signed in to change notification settings - Fork 0
/
map.html
77 lines (74 loc) · 2.72 KB
/
map.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Facebook Friend Map 0.7</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<script type="text/javascript" src="friend_places.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.min.js"></script>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: 30.000, lng: -100.000};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
place_name_markers(friend_data, map)
}
function place_name_markers(list, map) {
var oms = new OverlappingMarkerSpiderfier(map, {
markersWontMove: true,
markersWontHide: true,
basicFormatEvents: true
});
// Iterate through each person in the list.
for (var i = 0, len = list.length; i < len; i++) {
var places = list[i]["verbose_places"]
// Each person can be associated with multiple locations. Create a marker for each.
for (var j = 0; j < places.length; j++) {
marker = new google.maps.Marker({
position: places[j]["lat_lng"],
url: list[i]["url"],
can_open: false,
text: "<a href= " + list[i]["url"] + ">" + list[i]["name"] + "</a>\n" + places[j]["reasons"].join() + places[j]["name"]
});
var iw = new google.maps.InfoWindow();
// Add listeners
// On mousover, markers show name, facebook link, and what the person did there
marker.addListener('mouseover', function() {
iw.setContent(this.text)
iw.open(map, this);
});
marker.addListener('mouseout', function() {
iw.close();
});
// Righclicking a marker links to the associated FB page
google.maps.event.addListener(marker, "rightclick", function(e) {
window.open(this.url, '_blank');
});
// Add spiderclicking to deal with densely packed (or directly stacked) markers
oms.addMarker(marker);
google.maps.event.addListener(marker, 'spider_click', function(e) { // 'spider_click', not plain 'click'
});
}
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0WPE6N1f71Cdi_Z913fzATGeWvpaIP4Y&callback=initMap">
</script>
</body>
</html>