Beste

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):

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>

PHP code:

<?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'];

    }    
?>


Andere poging die ik ook geprobeerd heb:

Javascript code:

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;
        });

PHP code:

<?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'];

};

?>

En wat is het probleem precies? Een AJAX-call (dat $.post-gedoe wat je doet) is asynchroon, oftewel, het is onbekend wanneer de resultaten terugkomen. Daartoe hebben AJAX-calls zelf een functie die wordt aangeroepen wanneer de resultaten beschikbaar zijn. Je kunt dus niet eerst vrolijk $.post() uitvoeren en achter deze functie net doen alsof de resultaten daar direct beschikbaar zijn, dit moet je doen in de callback-functie van de AJAX-call zelf. Dit doe je doorgaans in het .success() deel, waarin je de geretourneerde data (meestal in JSON-vorm) terug het document in kunt schieten. Zie ook de documentatie.

Reageren