Door
John Break
op 09-03-2020 21:25
gewijzigd op 09-03-2020 21:39
1.762 views
Voor mijn website wil ik de resultaten ook gaan weergeven 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.
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.
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>
";
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?
Graag code tags gebruiken, zie ook de veel gestelde vragen.
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.
maar je combineert het nu wel heel letterlijk. .length is javascript. Volgens mij kan dit nooit op deze manier.
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.
var row = <?php echo $row; ?>
print(row.length);
maar dan kun je evengoed of zelfs beter
<?php
count($row);
?>
gebruiken.
klopt dat dingen nu door elkaar heen staan. Maar dit komt door het testen / proberen om het werkend te krijgen.
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. :)
Het probleem is juist dat het nu mis gaat doordat er dingen door elkaar lopen.
Probeer dit eens.
<?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>
Op dit moment werkt het stukje dat de locatie waar op gezocht wordt getoond word:
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.
$lat_d = $row['lat'];
$lon_d = $row['lng'];
Hier zou dan een array van gemaakt moeten worden en geplaatst worden in var locaties.
Dat werkt ook net zoals ik het op deze manier zou doen:
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
});
}
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.
