doorgeven van javascript/php
Mijn bedoeling:
Een google maps map met marker clusters. De markers worden geplaatst door coordinaten die ik uit een table haal van een database. Als er op de marker geklikt wordt, dan moet er een info window getoond worden met informatie die ik ook uit mijn database wil halen. Om dit voor elkaar te krijgen, dacht ik om de coordinaten bij te houden van de marker waarop geklikt wordt en die te vergelijken met de coordinaten van mijn tabel en de overeenkomstige dan de nodige info tonen. bv: straat, adres, etc.
Het probleem zit hem in het doorgeven van javascript naar PHP en terug naar javascript.
De coordinaten van de geklikte marker moeten naar PHP voor mijn database en query en resultaten te krijgen.
Resultaten moeten terug naar javascript voor in de info window te tonen, zonder de pagina te refreshen.
En dit moet ook werken voor elke marker en gaat verschillende resultaten weergeven.
Javascript code (met ajax):
Code (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
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
function initMap()
{
//Options for the map
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(50.503887, 4.469936),
clickableIcons: false
};
//generate map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
//image marker
var imagemarker = './images/marker_small.png';
//info window
var infoWindow = new google.maps.InfoWindow();
//fill map with markers
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
icon: imagemarker
});
google.maps.event.addListener(marker, 'click', function(evt) {
//AJAX
function post()
{
var latitude = evt.latLng.lat();
var longitude = evt.latLng.lng();
$.post('woninggespot.php',{latMarker:latitude,lngMarker:longitude});
}
//fill var's with values from database (from php)
var prijs = <?php echo json_encode($prijs); ?>;
var type = <?php echo json_encode($type); ?>;
var slaapkamers = <?php echo json_encode($slaapkamers); ?>;
infoWindow.setContent(prijs + type + slaapkamers);
infoWindow.open(map, marker);
});
return marker;
});
//Marker cluster
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: './googlemaps/markerclusterer/images/m'});
}
var locations = <?php echo "[".$array."]"; ?>;
</script>
{
//Options for the map
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(50.503887, 4.469936),
clickableIcons: false
};
//generate map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
//image marker
var imagemarker = './images/marker_small.png';
//info window
var infoWindow = new google.maps.InfoWindow();
//fill map with markers
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
icon: imagemarker
});
google.maps.event.addListener(marker, 'click', function(evt) {
//AJAX
function post()
{
var latitude = evt.latLng.lat();
var longitude = evt.latLng.lng();
$.post('woninggespot.php',{latMarker:latitude,lngMarker:longitude});
}
//fill var's with values from database (from php)
var prijs = <?php echo json_encode($prijs); ?>;
var type = <?php echo json_encode($type); ?>;
var slaapkamers = <?php echo json_encode($slaapkamers); ?>;
infoWindow.setContent(prijs + type + slaapkamers);
infoWindow.open(map, marker);
});
return marker;
});
//Marker cluster
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: './googlemaps/markerclusterer/images/m'});
}
var locations = <?php echo "[".$array."]"; ?>;
</script>
PHP code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
//get lat and lng javascript when marker has been clicked
$latMarker = $_POST["latmarker"];
$lngMarker = $_POST["lngmarker"];
$clickedMarkerLocation = $latMarker . ", " . $lngMarker;
$query = mysqli_query($conn, "SELECT * FROM spotwoning WHERE coordinaten='$clickedMarkerLocation'");
while ($record = mysqli_fetch_assoc($query))
{
$prijs = $record['prijsklasse'];
$slaapkamers = $record['slaapkamers'];
$type = $record['typewoning'];
}
?>
//get lat and lng javascript when marker has been clicked
$latMarker = $_POST["latmarker"];
$lngMarker = $_POST["lngmarker"];
$clickedMarkerLocation = $latMarker . ", " . $lngMarker;
$query = mysqli_query($conn, "SELECT * FROM spotwoning WHERE coordinaten='$clickedMarkerLocation'");
while ($record = mysqli_fetch_assoc($query))
{
$prijs = $record['prijsklasse'];
$slaapkamers = $record['slaapkamers'];
$type = $record['typewoning'];
}
?>
Andere poging die ik ook geprobeerd heb:
Javascript code:
Code (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
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
function initMap()
{
//Options for the map
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(50.503887, 4.469936),
clickableIcons: false
};
//generate map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
//image marker
var imagemarker = './images/marker_small.png';
//create info window
var infoWindow = new google.maps.InfoWindow();
//fill map with markers
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
icon: imagemarker
});
google.maps.event.addListener(marker, 'click', function(evt) {
//get coordinates from clicked marker
var latitude = evt.latLng.lat();
var longitude = evt.latLng.lng();
var prijs = <?php echo json_encode($prijs); ?>;
var type = <?php echo json_encode($slaapkamers); ?>;
var slaapkamers = <?php echo json_encode($type); ?>;
console.log(prijs + type + slaapkamers + latitude + ", " + longitude);
//var content = prijs + type + slaapkamers;
//set content from info window
infoWindow.setContent();
infoWindow.open(map, marker);
});
return marker;
});
{
//Options for the map
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(50.503887, 4.469936),
clickableIcons: false
};
//generate map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
//image marker
var imagemarker = './images/marker_small.png';
//create info window
var infoWindow = new google.maps.InfoWindow();
//fill map with markers
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
icon: imagemarker
});
google.maps.event.addListener(marker, 'click', function(evt) {
//get coordinates from clicked marker
var latitude = evt.latLng.lat();
var longitude = evt.latLng.lng();
var prijs = <?php echo json_encode($prijs); ?>;
var type = <?php echo json_encode($slaapkamers); ?>;
var slaapkamers = <?php echo json_encode($type); ?>;
console.log(prijs + type + slaapkamers + latitude + ", " + longitude);
//var content = prijs + type + slaapkamers;
//set content from info window
infoWindow.setContent();
infoWindow.open(map, marker);
});
return marker;
});
PHP code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
//get lat and lng javascript when marker has been clicked
$latMarker = $_GET["latitude"];
$lngMarker = $_GET["longitude"];
$clickedMarkerLocation = $latMarker . ", " . $lngMarker;
$query2 = mysqli_query($conn, "SELECT * FROM spotwoning WHERE coordinaten='$clickedMarkerLocation'");
while ($record = mysqli_fetch_assoc($query2)) {
$prijs = $record['prijsklasse'];
$slaapkamers = $record['slaapkamers'];
$type = $record['typewoning'];
};
?>
//get lat and lng javascript when marker has been clicked
$latMarker = $_GET["latitude"];
$lngMarker = $_GET["longitude"];
$clickedMarkerLocation = $latMarker . ", " . $lngMarker;
$query2 = mysqli_query($conn, "SELECT * FROM spotwoning WHERE coordinaten='$clickedMarkerLocation'");
while ($record = mysqli_fetch_assoc($query2)) {
$prijs = $record['prijsklasse'];
$slaapkamers = $record['slaapkamers'];
$type = $record['typewoning'];
};
?>
Edit:
Ik heb code-tags geplaatst. Gelieve dit in het vervolg zelf toe te voegen aan je bericht.
Zie ook: Veel gestelde vragen: Welke UBB-codes kan ik gebruiken.
Zie ook: Veel gestelde vragen: Welke UBB-codes kan ik gebruiken.
Gewijzigd op 29/03/2018 13:19:47 door - Ariën -
