-
-
Notifications
You must be signed in to change notification settings - Fork 7
/
mapIsolation.php
105 lines (89 loc) · 3.58 KB
/
mapIsolation.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
<?php
$locations=array();
$uname="root";
$pass="asd32145";
$servername="localhost";
$dbname="Covid_19_dbms";
$db=new mysqli($servername,$uname,$pass,$dbname);
$query = $db->query("SELECT * FROM isolation_ward");
//$number_of_rows = mysql_num_rows($db);
//echo $number_of_rows;
while( $row = $query->fetch_assoc() ){
$name = $row['isolation_ward_name'];
$longitude = $row['lng'];
$latitude = $row['lat'];
/* Each row is added as a new array */
$locations[]=array( 'name'=>$name, 'lat'=>$latitude, 'lng'=>$longitude, );
}
//echo $locations[0]['name'].": In stock: ".$locations[0]['lat'].", sold: ".$locations[0]['lng'].".<br>";
//echo $locations[1]['name'].": In stock: ".$locations[1]['lat'].", sold: ".$locations[1]['lng'].".<br>";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Set the size of the div element that contains the map */
#map-canvas {
margin-top: 30px;
height: 600px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDuP-LuEvb7dDNHAKqFpqMSreiadAlz6PE"></script>
<script type="text/javascript">
var map;
var Markers = {};
var infowindow;
var locations = [
<?php for($i=0;$i<sizeof($locations);$i++){ $j=$i+1;?>
[
'AMC Service',
'<p><a href="<?php echo $locations[0]['name'];?>">Isolation Ward</a></p>',
<?php echo $locations[$i]['lat'];?>,
<?php echo $locations[$i]['lng'];?>,
0
]<?php if($j!=sizeof($locations))echo ","; }?>
];
var origin = new google.maps.LatLng(locations[0][2], locations[0][3]);
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
function initialize() {
var mapOptions = {
zoom: 6,
center: origin
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
infowindow = new google.maps.InfoWindow();
for(i=0; i<locations.length; i++) {
var position = new google.maps.LatLng(locations[i][2], locations[i][3]);
var image_hospital = new google.maps.MarkerImage("https://img.icons8.com/color/48/000000/hospital-2.png", null, null, null, new google.maps.Size(40,52)); // Create a variable for our marker image.
var marker = new google.maps.Marker({
icon:image_hospital,
position: position,
map: map,
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.setOptions({maxWidth: 200});
infowindow.open(map, marker);
}
}) (marker, i));
Markers[locations[i][4]] = marker;
}
locate(0);
}
function locate(marker_id) {
var myMarker = Markers[marker_id];
var markerPosition = myMarker.getPosition();
map.setCenter(markerPosition);
google.maps.event.trigger(myMarker, 'click');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>