-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathuser-map.php
209 lines (185 loc) · 8.82 KB
/
user-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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<?php
include_once 'header.php';
include 'locations_model.php';
//get_unconfirmed_locations();exit;
?>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?language=en&key=AIzaSyA-AB-9XZd-iQby-bNLYPFyb0pR2Qw3orw">
</script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<div id="map"></div>
<script>
/**
* Create new map
*/
var infowindow;
var map;
var red_icon = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png' ;
var purple_icon = 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png' ;
var locations = <?php get_confirmed_locations() ?>;
var myOptions = {
zoom: 11,
center: new google.maps.LatLng(6.8602, 80.0535),
mapTypeId: 'roadmap'
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
/**
* Global marker object that holds all markers.
* @type {Object.<string, google.maps.LatLng>}
*/
var markers = {};
/**
* Concatenates given lat and lng with an underscore and returns it.
* This id will be used as a key of marker to cache the marker in markers object.
* @param {!number} lat Latitude.
* @param {!number} lng Longitude.
* @return {string} Concatenated marker id.
*/
var getMarkerUniqueId= function(lat, lng) {
return lat + '_' + lng;
};
/**
* Creates an instance of google.maps.LatLng by given lat and lng values and returns it.
* This function can be useful for getting new coordinates quickly.
* @param {!number} lat Latitude.
* @param {!number} lng Longitude.
* @return {google.maps.LatLng} An instance of google.maps.LatLng object
*/
var getLatLng = function(lat, lng) {
return new google.maps.LatLng(lat, lng);
};
/**
* Binds click event to given map and invokes a callback that appends a new marker to clicked location.
*/
var addMarker = google.maps.event.addListener(map, 'click', function(e) {
var lat = e.latLng.lat(); // lat of clicked point
var lng = e.latLng.lng(); // lng of clicked point
var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
var marker = new google.maps.Marker({
position: getLatLng(lat, lng),
map: map,
animation: google.maps.Animation.DROP,
id: 'marker_' + markerId,
html: " <div id='info_"+markerId+"'>\n" +
" <table class=\"map1\">\n" +
" <tr>\n" +
" <td><a>Description:</a></td>\n" +
" <td><textarea id='manual_description' placeholder='Description'></textarea></td></tr>\n" +
" <td><a>Image:</a></td>\n" +
" <td><input type='file' id='image' name='image'></td></tr>\n" +
" <tr><td></td><td><input type='button' value='Save' onclick='saveData("+lat+","+lng+")'/></td></tr>\n" +
" </table>\n" +
" </div>"
});
markers[markerId] = marker; // cache marker in markers object
bindMarkerEvents(marker); // bind right click event to marker
bindMarkerinfo(marker); // bind infowindow with click event to marker
});
/**
* Binds click event to given marker and invokes a callback function that will remove the marker from map.
* @param {!google.maps.Marker} marker A google.maps.Marker instance that the handler will binded.
*/
var bindMarkerinfo = function(marker) {
google.maps.event.addListener(marker, "click", function (point) {
var markerId = getMarkerUniqueId(point.latLng.lat(), point.latLng.lng()); // get marker id by using clicked point's coordinate
var marker = markers[markerId]; // find marker
infowindow = new google.maps.InfoWindow();
infowindow.setContent(marker.html);
infowindow.open(map, marker);
// removeMarker(marker, markerId); // remove it
});
};
/**
* Binds right click event to given marker and invokes a callback function that will remove the marker from map.
* @param {!google.maps.Marker} marker A google.maps.Marker instance that the handler will binded.
*/
var bindMarkerEvents = function(marker) {
google.maps.event.addListener(marker, "rightclick", function (point) {
var markerId = getMarkerUniqueId(point.latLng.lat(), point.latLng.lng()); // get marker id by using clicked point's coordinate
var marker = markers[markerId]; // find marker
removeMarker(marker, markerId); // remove it
});
};
/**
* Removes given marker from map.
* @param {!google.maps.Marker} marker A google.maps.Marker instance that will be removed.
* @param {!string} markerId Id of marker.
*/
var removeMarker = function(marker, markerId) {
marker.setMap(null); // set markers setMap to null to remove it from map
delete markers[markerId]; // delete marker instance from markers object
};
/**
* loop through (Mysql) dynamic locations to add markers to map.
*/
var i ; var confirmed = 0;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon : locations[i][5] === '1' ? red_icon : purple_icon,
html: "<div>\n" +
"<table class=\"map1\">\n" +
"<tr>\n" +
"<td><a>Description:</a></td>\n" +
"<td><textarea disabled id='manual_description' placeholder='Description'>"+locations[i][3]+"</textarea></td></tr>\n" +
"<td><a>Image:</a></td>\n" +
"<td><img src="+locations[i][4]+" style='width: 250px; height: auto;'></td></tr>\n" +
"</table>\n" +
"</div>"
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow = new google.maps.InfoWindow();
confirmed = locations[i][4] === '1' ? 'checked' : 0;
$("#confirmed").prop(confirmed,locations[i][4]);
$("#id").val(locations[i][0]);
$("#description").val(locations[i][3]);
$("#image").val(locations[i][4]);
$("#form").show();
infowindow.setContent(marker.html);
infowindow.open(map, marker);
}
})(marker, i));
}
/**
* SAVE save marker from map.
* @param lat A latitude of marker.
* @param lng A longitude of marker.
*/
function saveData(lat,lng) {
var description = document.getElementById('manual_description').value;
var file = document.getElementById('image');
var fd = new FormData();
fd.append('lat', lat);
fd.append('lng', lng);
fd.append('description', description);
fd.append('image', file.files[0]);
$.ajax({
url : 'add_location.php',
type : 'POST',
data : fd,
processData: false,
contentType: false,
success : function(data) {
alert(data);
var markerId = getMarkerUniqueId(lat,lng); // get marker id by using clicked point's coordinate
var manual_marker = markers[markerId]; // find marker
manual_marker.setIcon(purple_icon);
infowindow.close();
infowindow.setContent("<div style=' color: purple; font-size: 25px;'> Waiting for admin confirm!!</div>");
infowindow.open(map, manual_marker);
},
error : function(request,error)
{
alert(error);
}
});
}
</script>
<?php
include_once 'footer.php';
?>