running a php script from javascript

Question

I am trying to add markers to a google map with coordinates being queried from a mysql database. the script is shown below, within a file named connection.php.

$query = "SELECT site, latitude, longitude, pollution FROM pollution_monitoring.locations";
$result = mysqli_query($conn, $query);

while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) 
{
    $site      = $row['site'];
    $latitude  = $row['latitude'];
    $longitude = $row['longitude'];
    $pollution = $row['pollution'];

    echo ("addMarker($latitude,$longitude,'<b>$site</b><br/>$pollution');\n");     
}

addMarker() is a JavaScript function that has been defined in the below file

var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/red.png",
    new google.maps.Size(32, 32), new google.maps.Point(0, 0),
    new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
google.maps.event.addDomListener(window, 'load', initialize);

function addMarker(lat, lng, info) {
    var pt = new google.maps.LatLng(lat, lng);
    bounds.extend(pt);
    var marker = new google.maps.Marker({
        position: pt,
        icon: icon,
        map: map
    });
    var popup = new google.maps.InfoWindow({
        content: info,
        maxWidth: 500
    });
    google.maps.event.addListener(marker, "click", function() {
        if (currentPopup != null) {
            currentPopup.close();
            currentPopup = null;
        }
        popup.open(map, marker);
        currentPopup = popup;
    });
    google.maps.event.addListener(popup, "closeclick", function() {
        map.panTo(center);
        currentPopup = null;
    });
}

function initialize() {
    var mapProp = {
        center: new google.maps.LatLng(-29.335989, 27.483622999999966),
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        mapTypeControl: true,
        zoomControl: true,
        scaleControl: true,
        streetViewControl: true,
        overviewMapControl: true,
        rotateControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
        },
        navigationControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        }
    };
    $.get('connection.php');

    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    google.maps.event.addDomListener(window, 'load', initialize);

the above script is to be used to load a google map and have to markers added to the map. I had thought the result of the php script (the addMarker function) would be ran with and have the markers added to the map, but that does not happen. the JavaScript is then included in a jsp file. The map loads, but no markers are added.

what am i doing wrong?

Answer 1

You should rewrite your php script to generate JSON data:

header('Content-Type: application/json');

$query = "SELECT site,latitude,longitude,pollution FROM pollution_monitoring.locations";
$result = mysqli_query($conn,$query);

$i = 0;
echo '[';
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) 
{
    if ($i++ != 0) echo ',';
    echo json_encode($row);    
}
echo ']';

Then add the markers using JavaScript:

$.getJSON('connection.php', function(data) {
    for (var i = 0; i < data[i]; i++) {
        addMarker(data[i].latitude, data[i].longitude, "<b>" + data[i].site + "</b><br />" + data[i].pollution);
    }
});