This repository has been archived by the owner on Jun 30, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathStreetHub.html
116 lines (110 loc) · 3.04 KB
/
StreetHub.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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIaVPGtc8YiM_n7ru9lHsyfr_50SBg2uU&sensor=false"></script>
<script>
var map;
var geocoder;
var markerBounds;
$(function() { // On load
// Create map
initialize();
//
// Will NOT work unless allow Access-Control-Allow-Origin is set, JSONP enabled or use a proxy
// (can bypass in browser for development e.g. https://addons.mozilla.org/en-us/firefox/addon/forcecors/)
//
url = 'http://www.streethub.com/api/challenge';
$.getJSON(url).done(function(data){
callback(data.response.data);
}).fail(function(){
$.ajax({
url: url,
dataType: 'jsonp'
}).done(function(data){
callback(data.response.data);
}).fail(function(){
console.log('AJAX Failed');
});
});
});
function callback(shops) {
/*
Stagger google geocodes due to usage limits.
Ideally would cache geocode on server.
Loop through data.
*/
$.each(shops, function(index, value) {
var val = value;
setTimeout(function(){
geocode(val);
}, index*500)
});
}
function geocode(value) {
// Get full address
var addr = value.address + " " + value.postcode + " UK";
var oh = value.oh;
var shopName = value.name;
// Filter - Not really sure what I'm looking for
if (shopName && oh && value.address) {
// Geocode
geocoder.geocode( {'address': addr}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
pos = results[0].geometry.location;
// Create map marker
var marker = new google.maps.Marker({
map: map,
position: pos,
clickable: true
});
// On marker click
google.maps.event.addListener(marker, 'click', function() {
// Move to position
map.panTo(marker.getPosition());
// Change info window data
infowindow.setContent(shopName + "<br /><strong>Opening Hours</strong><br />" + oh);
// Open info window
infowindow.open(map, marker);
});
// Add position to bounds
markerBounds.extend(pos);
// Zoom to bounds
map.fitBounds(markerBounds);
console.log("Geocode successful");
} else {
console.log("Geocode not successful: " + status);
}
});
}
}
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.53095, -0.112817),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Create map
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Create infowindow
infowindow = new google.maps.InfoWindow({
content: ""
});
// Create geocoder and markerBounds
geocoder = new google.maps.Geocoder();
markerBounds = new google.maps.LatLngBounds();
}
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>