I'm trying to gather several coordinates from a php file and draw them to a google map making several markers. The data are gathered using the .ajax method of the jquery library. Here is my attempt:
allCoordinates.php:
$db_host = "localhost";
$db_user = "root";
$db_password = "root";
$db_database = "googlemapsdemo";
$connection = new mysqli($db_host, $db_user, $db_password, $db_database);
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$selectvalue = mysqli_real_escape_string($connection, $_GET['svalue']);
mysqli_select_db($connection, $db_database);
$result = mysqli_query($connection, "SELECT latitude, longitude FROM googlemapsdemo.vtiger_geocoding", MYSQLI_USE_RESULT);
$rows = array();
while ($allCoordinates = mysqli_fetch_array($result)){
$rows[] = array('latitude' => $allCoordinates[0], 'longitude' => $allCoordinates[1]);
}
$json = json_encode($rows);
print $json;
mysqli_free_result($result);
mysqli_close($connection);
?>
index.php:
<html>
<head>
<title>Google Maps Demo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"><script type="text/javascript">
$(document).ready(function(){
var coordinates, parsedCoordinates;
var mapCenter = new google.maps.LatLng(51.508742,-0.120850); //Google map Coordinates
var map;
map_initialize(); // load map
function map_initialize(){
//Google map option
var googleMapOptions =
{
center: mapCenter, // map center
zoom: 17, //zoom level, 0 = earth view to higher value
panControl: true, //enable pan Control
zoomControl: true, //enable zoom control
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL //zoom control size
},
scaleControl: true, // enable scale control
mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
};
map = new google.maps.Map(document.getElementById("map_container"), googleMapOptions);
var marker = new google.maps.Marker({
position: mapCenter,
map: map
});
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);
}
$(':submit').on('click', function() { // This event fires when a button is clicked
$.ajax({ // ajax call starts
url: 'allCoordinates.php', // JQuery loads allCoordinates.php
dataType: 'json', // Choosing a JSON datatype
success: function(data) // Variable data contains the data we get from serverside
{
alert(data[0].latitude + " " + data[0].longitude);
coordinates = data;
parsedCoordinates = JSON.parse(coordinates);
update(parsedCoordinates);
}
});
return false; // keeps the page from not refreshing
});
function update(markers){
var infowindow = new google.maps.InfoWindow(), marker, i;
google.maps.event.addListener(map, 'center_changed', function(event){
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i].latitude, markers[i].longitude),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i].latitude + " " + markers[i].longitude);
infowindow.open(map, marker);
}
})(marker, i));
}
});
}
});
</script>
</head>
<body>
<div class="container">
<div id="filters_container">
<fieldset>
<legend>Zona</legend>
<form id="submitForm" method="post" action="">
<select>.......</select>
<button type="submit">Cerca</button>
</form>
</fieldset>
</div>
<div id="map_container"></div>
</div>
</body>
</html>
the JSON returned is this:
[{"latitude":"45.648110","longitude":"11.497398"},
{"latitude":"45.511180","longitude":"11.511070"},
{"latitude":"45.649630","longitude":"12.304064"},
{"latitude":"45.722110","longitude":"11.435023"},
{"latitude":"45.391083","longitude":"11.276997"},
{"latitude":"45.691465","longitude":"11.483223"},
{"latitude":"45.659787","longitude":"11.795147"},
{"latitude":"45.720608","longitude":"11.453950"},
{"latitude":"45.718757","longitude":"11.333138"},
{"latitude":"45.607387","longitude":"11.497138"},
{"latitude":"46.099075","longitude":"12.160999"},
{"latitude":"45.523017","longitude":"10.152080"},
{"latitude":"45.408520","longitude":"10.838590"},
{"latitude":"45.717608","longitude":"11.462909"},
{"latitude":"45.395371","longitude":"11.274200"},
{"latitude":"45.555142","longitude":"11.543407"},
{"latitude":"45.693428","longitude":"11.446203"},
{"latitude":"44.661260","longitude":"10.886416"},
{"latitude":"45.530448","longitude":"11.499496"},
{"latitude":"45.530448","longitude":"11.499496"},
{"latitude":"22.318567","longitude":"114.179606"},
{"latitude":"45.443304","longitude":"10.952222"},
{"latitude":"45.836699","longitude":"12.014122"},
{"latitude":"45.803245","longitude":"11.355629"},
{"latitude":"45.722110","longitude":"11.435023"},
{"latitude":"45.803245","longitude":"11.355629"},
{"latitude":"45.836699","longitude":"12.014122"},
{"latitude":"45.779430","longitude":"11.429520"},
{"latitude":"45.803245","longitude":"11.355629"}]
The problem is that nothing changes; what am I doing wrong? Thanks!
