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!
I have managed to solve. Here is the code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function(){
var coordinates, parsedCoordinates;
var map;
var marker;
var markers = [];
var clusterer;
var bounds = new google.maps.LatLngBounds();
var coords = new google.maps.LatLng(0, 0);
var infowindow = new google.maps.InfoWindow();
map_initialize(); // load map
function map_initialize(){
//Google map option
var googleMapOptions =
{
center: coords,
zoom: 0, //zoom level, 0 = earth view to higher value
panControl: true, //enable pan Control
zoomControl: true, //enable zoom control
scaleControl: true, // enable scale control
mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
};
map = new google.maps.Map(document.getElementById("map_container"), googleMapOptions);
// Fit these bounds to the map
map.fitBounds(bounds);
// Marker Clusterer setup
var mcOptions = {
gridSize : 50,
maxZoom : 15
};
}
$(':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
{
for (i = 0; i < data.length; i++) {
bounds.extend(new google.maps.LatLng(data[i].latitude, data[i].longitude));
marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i].latitude, data[i].longitude),
map: map,
icon: 'http://maps.google.com/mapfiles/ms/icons/red.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("Test");
infowindow.open(map, marker);
}
})(marker, i));
markers.push(marker);
}
// Fit these bounds to the map
map.fitBounds(bounds);
clusterer = new MarkerClusterer(map, markers);
}
});
return false; // keeps the page from not refreshing
});
});
</script>
There are a number of problems I can see:
1) You're defining map within initialize which means that no other function can access and update it. Declare map outside of the functions.
2) You're not accessing the markers array properly; it's an array of objects so you need to use the keys to get the data instead:
3) You need to initialise the map differently (I would use google's own window.load event for this). Don't do it within in the jQuery doc.ready function.
4) When you're adding your markers you're doing so only if the map changes. Why? Get rid of that bit of code and your markers will be added to the map.
Here's a DEMO.
$(function () {
// code for clicking the button.
});
var map;
function update(markers) {
for (var i = 0; i < markers.length; i++) {
var lat = markers[i].latitude;
var lng = markers[i].longitude;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, lat, lng) {
return function() {
infowindow.setContent(lat + " " + lng);
infowindow.open(map, marker);
}
})(marker, lat, lng));
}
}
function initialize(markers) {
// your code
}
google.maps.event.addDomListener(window, 'load', initialize);