forked from thejanRajapaksha/SW-Tools-and-Practices
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmap.php
118 lines (104 loc) · 4.17 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<?php
// Database connection
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "accommodationfinder";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Query to fetch property details from the advertisements table
$sql = "SELECT * FROM advertisements";
$result = $conn->query($sql);
// Create an array to store property details including longitude and latitude data
$properties = array();
if ($result->num_rows > 0) {
// Fetching data from the result set
while($row = $result->fetch_assoc()) {
$property = array(
'title' => $row['title'],
'rent' => $row['rent'],
'beds' => $row['beds'],
'rooms' => $row['rooms'],
'latitude' => $row['latitude'],
'longitude' => $row['longitude'],
'image' => $row['image_data'] // Assuming 'image_data' contains the file path
);
array_push($properties, $property);
}
}
// Close database connection
$conn->close();
?>
<!DOCTYPE html>
<html>
<head>
<title>Display Markers on Map</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
/* Set map height */
#map {
height: 400px;
width: 60%;
border: 3px solid #ccc; /* Add border style */
border-radius: 8px; /* Optional: Add border radius for a rounded border */
}
/* Customize InfoWindow size */
.custom-info-window {
width: 300px;
height: auto;
max-width: 100%;
}
/* Adjust image size within the InfoWindow */
.custom-info-window img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Markers on Map</h1>
<div id="map"></div>
<script>
function initMap() {
// Initialize map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {lat: 7.2, lng: 80.2} // Center of the map
});
// Loop through properties and add markers with InfoWindows
<?php foreach ($properties as $property): ?>
// Create a function closure to encapsulate the marker and infowindow creation
(function(property) {
var marker = new google.maps.Marker({
position: {lat: <?php echo $property['latitude']; ?>, lng: <?php echo $property['longitude']; ?>},
map: map,
title: '<?php echo $property['title']; ?>'
});
var contentString = '<div class="custom-info-window">'+
'<h2><?php echo $property['title']; ?></h2>'+
'<img src="<?php echo $property['image']; ?>" alt="<?php echo $property['title']; ?>">' +
'<p>Rent: $<?php echo $property['rent']; ?>/month</p>' +
'<p>No. of Rooms: <?php echo $property['rooms']; ?></p>' +
'<p>No. of Beds: <?php echo $property['beds']; ?></p>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
})(<?php echo json_encode($property); ?>); // Pass property data as argument to the closure
<?php endforeach; ?>
}
</script>
<!-- Load Google Maps API with your API key -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4aALIcTM4P2lgfD15h4lEjng6H-7fgKQ&callback=initMap"></script>
</body>
</html>