[GIS] Multiple markers on Google Maps using JavaScript, PHP and SQL

google mapsjavascriptmarkersPHPsql

I am trying to query the MySQL database that has a table with firstname, longitude, latitude in it.

I want to get the longitude and latitude and display them as multiple markers with the firstname as a description.

However, when I try to load the HTML page it comes back empty. Any ideas why?

The content of my testmap.html looks as follows

<?php $z = array();
$n=0;
$link= new mysqli('localhost','root','');
    if($link->connect_error){
        die("Connection failed:" .$link->connect_error);
    }
mysqli_select_db($link,"blood_organ_donation");
echo "DB selected successfully";
$sqlperson= "SELECT firstname,latitude,longitude
                    FROM personprofile ";
$person=  mysqli_query($link,$sqlperson);       
while( $row =mysqli_fetch_array($person)){
  $y=array(); 

  $y[]=$row["fistname"];
  $y[]=$row["latitude"];
  $y[]=$row["longitude"];   
  $z[$n]=$y;
  $n++;
 }

 ?>

<html>
<head>
<script type="text/javascript">
//var locations = <?php echo json_encode($a);?>;
var locationsb = <?php echo json_encode($z);?>;
var map = new google.maps.Map(document.getElementById('map'), {
 zoom: 6,
 center: new google.maps.LatLng(22.00, 96.00),
 mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 var infowindow = new google.maps.InfoWindow();
 var image = '/marker/map.png';
 // var image2 = '/marker/Map1.png';

var marker1, n;
for (n = 0; n < locationsb.length; n++) {  
marker1 = new google.maps.Marker({
position: new google.maps.LatLng(locationsb[n][1], locationsb[n][2]),
offset: '0',
icon: image2,
title: locationsb[n][4],
map: map       
});
google.maps.event.addListener(marker1, 'click', (function(marker1, n)
{
return function() {
infowindow.setContent(locationsb[n][0]);
infowindow.open(map, marker1);
}
})(marker1, n));
}

</script> 
<head>
<body id="map"> 
</body>
</html>

Best Answer

Just a couple of initial thoughts:

You are assigning all your markers to one single variable marker1 Initialize a JS array, then create the Google Maps Marker objects individually (preferably with a function that is going to return the marker object itself) and then add (push) this object into the JS array you created to hold the markers!

And make sure that lat and lng values are converted to float! If not, use the parseFloat function in JS!

Related Question