-
Notifications
You must be signed in to change notification settings - Fork 0
/
map.php
96 lines (89 loc) · 3.34 KB
/
map.php
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
<?php
header('Access-Control-Allow-Origin: *');
require('dbconfig.php');
$query = 'SELECT `id`, `lat`, `long`, `photo_name` FROM items WHERE available = 1;';
$result = mysql_query($query) ;
if (!$result) {
die('Invalid query: ' . mysql_error());
}
mysql_close($link);
$items = array();
while ($row = mysql_fetch_row($result)) {
$items[] = array('lng' => $row[2], 'lat' => $row[1], 'id' => $row[0], 'photo_name' => $row[3]);
}
?>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CurbCycle</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="css/main.css">
</head>
<body onload="init()">
<div class="content">
<h1>CurbCycle</h1>
<div class="toggle-view">
<a href="#" class="show-map">Map</a> |
<a href="#" class="show-grid">Grid</a>
</div>
<div id="grid">
<?php foreach ($items as $item): ?>
<img data-item-id="<?= $item['id'] ?>" src="http://www.mtv.com/shared/droplets/media/normalize_jpeg.jhtml?width=95&height=95&matte=true&matteColor=000000&image=<?= urlencode('http://knitspiring.com/freecyclestoop/images/' . $item['photo_name']); ?>" width="95px">
<?php endforeach ?>
</div>
<div id="map"></div>
<div id="item-details"></div>
<div class="footer">
<a href="index.php"><img src="files/icon_01.png" alt="Add an Item" /></a>
<a href="map.php"><img src="files/icon_02.png" alt="Look Around" /></a>
<a href=""><img src="files/icon_03.png" alt="Settings" /></a>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyDodcEzMmV3xGrDcbtiZUI3tZnvupyHSyI&sensor=true"></script>
<script type="text/javascript">
var map;
var markers = {};
function init() {
navigator.geolocation.getCurrentPosition(function(location) {
var opts = {
center: new google.maps.LatLng(location.coords.latitude, location.coords.longitude),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), opts);
<?php foreach ($items as $item): ?>
addMarker(<?= $item['id'] ?>, <?= $item['lng'] ?>, <?= $item['lat'] ?>);
<?php endforeach ?>
},
function(error) {
console.log('Error displaying map');
});
}
function addMarker(id, lng, lat) {
var position = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({position: position, title: "Curb Stuff"});
//marker.setIcon();
google.maps.event.addListener(marker, 'click', function() {
map.panTo(marker.getPosition());
events._grab_item(id);
});
markers[id] = marker;
marker.setMap(map);
}
function delMarker(id) {
marker = markers[id];
marker.setMap(null);
}
</script>
</body>
</html>