Trouble with javascript/php passing to show data on info window

[Tom De Boeck]

All,

Explanation of my idea:

I have a google maps with marker clusters on it. The markers are generated by coordinates being selected from a table from a database. If a marker is clicked it should show an info window with information that I specify in the code (for example: a name, address, etc.) That information should also be retrieved from the database. To do this, I decided to go with getting the coordinates from the clicked marker, store them in a variable(s) and use them to retrieve the right information from the database > store them also in one or different variables and add them to the infowindow with infowindow.setContent.

What got I working so far?

• generating the google maps
• adding the markers/cluster markers
• info window being shown if a marker has been clicked

Where is the issue?

=> Passing the coordinates from the clicked marker (Javascript to PHP) where my database connection is being made and query to retrieve the info, pass it back to javascript to shown it in the info window. All this without refreshing the page and should work for each marker that is being clicked. Ofcourse each marker is going to give other information.

I first try to do this with passing the coordinates from the clicked marker in the url (without refreshing) but it only added the coordinates to the url and once I refreshed and clicked a marker it would show the information of the clicked marker before the refresh. So now trying with AJAX.

My question(s)

I read up and looks like this should be done with AJAX. First time using AJAX on this project. So still getting used to it. But is my general way of doing it good or can it be done another way? So passing Javascript to PHP and back to Javascript without refreshing the page. I'm also doing this in 1 PHP file (woninggespot.php). Should I work with different files?

Code - Javascript

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>

Code - PHP

FYI: I left out the database connection code because it's not relevant here

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

    }    
?>

Last update: (based on this found post: Link)

Javascript

 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

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

};

?>