Toon meerdere markers in Google Maps
Als er op submit geklikt wordt kan ik de latitude en longitude meegeven zodat die gebruikt kunnen worden. Dan worden de coordinaten meegenomen van het stadion van het thuis spelende team.
Voorbeeld:
Code (php)
1
2
3
4
2
3
4
$lat_d = $row['lat'];
$lon_d = $row['lng'];
$coords = $lat_d." ".$lon_d."<br>";
echo $coords;
$lon_d = $row['lng'];
$coords = $lat_d." ".$lon_d."<br>";
echo $coords;
result: 51.553551 -0.109772 51.481663 -0.190956 51.560192 -0.012714 51.486687 0.035847 51.397713 -0.085264 51.488178 -0.302524 51.405396 -0.282424 51.367615 -0.204393 51.569420 -0.417483
Deze coordinaten wil ik per stuk met een marker gaan tonen in google maps op mijn website.
Hiervoor heb ik het volgende stukje code toegevoegd aan mijn PHP script die de zoekresultaten genereert.
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
echo "
<script type=\"text/javascript\">
var locations = [];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng($lat, $lng),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// var infowindow = new google.maps.InfoWindow();
var i;
for (i = 0; i < $row.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map
});
}
</script>
";
<script type=\"text/javascript\">
var locations = [];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng($lat, $lng),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// var infowindow = new google.maps.InfoWindow();
var i;
for (i = 0; i < $row.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map
});
}
</script>
";
Op plek van var locations moeten de coordination geplaatst worden zodat verderop in het script de markers aangemaakt kunnen worden. Al heel veel verschillende dingen geprobeerd.
Resultaat: helemaal geen marker in Google Maps of alleen de laatste coördinaat.
Wie kan mij hiermee helpen om dit voor elkaar te krijgen?
Gewijzigd op 09/03/2020 21:39:23 door John Break
Daarnaast is het niet aan te raden het hele script gedeelte te echo'en. Als je php in javascript wilt gebruiken kun je dit prima alleen op de plek doen door php te openen en te sluiten.
Komt $row uit de database? En is dus een php-variabele? Dan zal $row.length in ieder geval niet werken. De functie voor php is count($row)
Probeer variabelen in een alert of console.log te zetten om te zien of en waarmee die gevuld zijn, zo kom je erachter waar het mogelijk mis gaat.
Gewijzigd op 09/03/2020 21:39:00 door Michael -
Wat wel zou kunnen is de php variabele aan een var (is javascript) toekennen, maar ik zal eerst je javascript en php eens wat beter scheiden.
maar dan kun je evengoed of zelfs beter
gebruiken.
Gewijzigd op 09/03/2020 21:46:07 door Michael -
voor mij is nu denk ik stap 1 om de coordinaten in var locations te krijgen en dan als dat werkt de code te fine tunen. :)
Probeer dit eens.
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
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
<?php
$lat_d = $row['lat'];
$lon_d = $row['lng'];
$coords = $lat_d." ".$lon_d."<br>";
echo $coords;
?>
<script>
var locations = [];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $lng; ?>),
// Waar komt $lat en $lng vandaan? Moet dit niet $lat_d en $lon_d zijn?
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// var infowindow = new google.maps.InfoWindow();
var i;
for (i = 0; i < <?php echo count($rows); ?>; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
// Waar komt locations vandaan? Deze array is nog leeg?
map: map
});
}
</script>
$lat_d = $row['lat'];
$lon_d = $row['lng'];
$coords = $lat_d." ".$lon_d."<br>";
echo $coords;
?>
<script>
var locations = [];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $lng; ?>),
// Waar komt $lat en $lng vandaan? Moet dit niet $lat_d en $lon_d zijn?
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// var infowindow = new google.maps.InfoWindow();
var i;
for (i = 0; i < <?php echo count($rows); ?>; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
// Waar komt locations vandaan? Deze array is nog leeg?
map: map
});
}
</script>
Zie ook de commentaar regels.
Gewijzigd op 09/03/2020 21:58:02 door Michael -
Op dit moment werkt het stukje dat de locatie waar op gezocht wordt getoond word:
Code (php)
1
center: new google.maps.LatLng($lat, $lng),
Dit geeft als je bijvoorbeeld op London zoekt de coordinaten van London en dat wordt daar de focus op gelegd in Google Maps.
// Waar komt $lat en $lng vandaan? Moet dit niet $lat_d en $lon_d zijn?
Dit zijn de coordination waar de gebruiker op zoekt.
// Waar komt locations vandaan? Deze array is nog leeg?
Dat is waar ik mee bezig ben en waar ik niet uit kom. var locaties []; moet gevuld worden met de coordinaten die uit het zoekresultaat komen.
Code (php)
1
2
2
$lat_d = $row['lat'];
$lon_d = $row['lng'];
$lon_d = $row['lng'];
Hier zou dan een array van gemaakt moeten worden en geplaatst worden in var locaties.
Gewijzigd op 09/03/2020 22:03:45 door John Break
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<?php
$locations_array = array(
array('Plaatsnaam', -33.890542, 151.274856),
array('Plaatsnaam', -33.923036, 151.259052),
array('Plaatsnaam', -34.028249, 151.157507),
array('Plaatsnaam', -33.80010128657071, 151.28747820854187),
array('Plaatsnaam', -33.950198, 151.259302),
);
?>
<script>
var locations = <?php echo json_encode($locations_array); ?>
// en de rest van de code..
$locations_array = array(
array('Plaatsnaam', -33.890542, 151.274856),
array('Plaatsnaam', -33.923036, 151.259052),
array('Plaatsnaam', -34.028249, 151.157507),
array('Plaatsnaam', -33.80010128657071, 151.28747820854187),
array('Plaatsnaam', -33.950198, 151.259302),
);
?>
<script>
var locations = <?php echo json_encode($locations_array); ?>
// en de rest van de code..
Getest en werkt hier. Zijn btw niet jouw locaties ;)
Gewijzigd op 09/03/2020 22:15:01 door Michael -
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var locations = [
[51.553551, -0.109772], [51.481663, -0.190956], [51.560192, -0.012714], [51.486687, 0.035847]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng($lat, $lng),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// var infowindow = new google.maps.InfoWindow();
var i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map
});
}
[51.553551, -0.109772], [51.481663, -0.190956], [51.560192, -0.012714], [51.486687, 0.035847]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng($lat, $lng),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// var infowindow = new google.maps.InfoWindow();
var i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map
});
}
Nu komen de 4 locaties netjes in Google Maps te staan maar dit is statisch. Als iemand zoekt op Amsterdam komen er andere coordinaten uit. Die moeten dan getoond worden.
ik krijg dat niet voor elkaar waarschijnlijk zie ik het gewoon niet meer omdat ik hier te lang mee loop te klooien ;)
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php
// $result = SELECT plaatsnaam,lan,lng FROM tabel
// while ($row = mysql_fetch_assoc($result)) {
// $locations_array[] = array($row['plaatsnaam'],$row['lan'],$row['lng']);
// }
?>
<script>
var locations = <?php echo json_encode($locations_array); ?>;
// etc...
// $result = SELECT plaatsnaam,lan,lng FROM tabel
// while ($row = mysql_fetch_assoc($result)) {
// $locations_array[] = array($row['plaatsnaam'],$row['lan'],$row['lng']);
// }
?>
<script>
var locations = <?php echo json_encode($locations_array); ?>;
// etc...
Moet wel heel erg worden voorgekauwd ;)
maar de output hiervan is:
Code (php)
1
2
2
$locations_array[] = array($row['lat'],$row['lng']);
echo json_encode($locations_array); // ff om te testen wat de output is.
echo json_encode($locations_array); // ff om te testen wat de output is.
[["51.553551","-0.109772"]] [["51.553551","-0.109772"],["51.481663","-0.190956"]] [["51.553551","-0.109772"],["51.481663","-0.190956"],["51.560192","-0.012714"]] [["51.553551","-0.109772"],["51.481663","-0.190956"],["51.560192","-0.012714"],["51.486687","0.035847"]] [["51.553551","-0.109772"],["51.481663","-0.190956"],["51.560192","-0.012714"],["51.486687","0.035847"],["51.397713","-0.085264"]] [["51.553551","-0.109772"],["51.481663","-0.190956"],["51.560192","-0.012714"],["51.486687","0.035847"],["51.397713","-0.085264"],["51.488178","-0.302524"]] [["51.553551","-0.109772"],["51.481663","-0.190956"],["51.560192","-0.012714"],["51.486687","0.035847"],["51.397713","-0.085264"],["51.488178","-0.302524"],["51.405396","-0.282424"]] [["51.553551","-0.109772"],["51.481663","-0.190956"],["51.560192","-0.012714"],["51.486687","0.035847"],["51.397713","-0.085264"],["51.488178","-0.302524"],["51.405396","-0.282424"],["51.367615","-0.204393"]] [["51.553551","-0.109772"],["51.481663","-0.190956"],["51.560192","-0.012714"],["51.486687","0.035847"],["51.397713","-0.085264"],["51.488178","-0.302524"],["51.405396","-0.282424"],["51.367615","-0.204393"],["51.569420","-0.417483"]]
Gaat nog niet helemaal zoals het zou moeten. Maar ga wel even verder puzzelen. Bedankt voor je hulp so far!
Wat is er mis met die output? Die geef je dus aan javascript mee zoals in m'n voorbeeld.
Code (php)
1
2
2
$locations_array[] = array($row['plaatsnaam'],$row['lat'],$row['lng']);
echo json_encode($locations_array);
echo json_encode($locations_array);
[[null,"51.553551","-0.109772"]] [[null,"51.553551","-0.109772"],[null,"51.481663","-0.190956"]] [[null,"51.553551","-0.109772"],[null,"51.481663","-0.190956"],[null,"51.560192","-0.012714"]] [[null,"51.553551","-0.109772"],[null,"51.481663","-0.190956"],[null,"51.560192","-0.012714"],[null,"51.486687","0.035847"]] [[null,"51.553551","-0.109772"],[null,"51.481663","-0.190956"],[null,"51.560192","-0.012714"],[null,"51.486687","0.035847"],[null,"51.397713","-0.085264"]] [[null,"51.553551","-0.109772"],[null,"51.481663","-0.190956"],[null,"51.560192","-0.012714"],[null,"51.486687","0.035847"],[null,"51.397713","-0.085264"],[null,"51.488178","-0.302524"]] [[null,"51.553551","-0.109772"],[null,"51.481663","-0.190956"],[null,"51.560192","-0.012714"],[null,"51.486687","0.035847"],[null,"51.397713","-0.085264"],[null,"51.488178","-0.302524"],[null,"51.405396","-0.282424"]] [[null,"51.553551","-0.109772"],[null,"51.481663","-0.190956"],[null,"51.560192","-0.012714"],[null,"51.486687","0.035847"],[null,"51.397713","-0.085264"],[null,"51.488178","-0.302524"],[null,"51.405396","-0.282424"],[null,"51.367615","-0.204393"]] [[null,"51.553551","-0.109772"],[null,"51.481663","-0.190956"],[null,"51.560192","-0.012714"],[null,"51.486687","0.035847"],[null,"51.397713","-0.085264"],[null,"51.488178","-0.302524"],[null,"51.405396","-0.282424"],[null,"51.367615","-0.204393"],[null,"51.569420","-0.417483"]]
Zet je echo er dus buiten.
Nu werkt het :)
Michael - op 09/03/2020 23:07:59:
Top!
Bedankt voor je hulp!