Google maps - Multi markers from database longitude and lattitude not showing on the map

Question

I have this code that takes details from database and put them in php array that later is passed to javascript to generate Google map:

<?php
$query='select name,longitude,latitude from maps';
$result=mysql_query($query) or die();
$num_rows=mysql_num_rows($result);
if($num_rows > 0){
for($i=0;$i<$num_rows;$i++){
$row=mysql_fetch_row($result);

$location[]= $row[0].', '.$row[2].', '.$row[1].','.($i+1);


}
//this creates the following array
array(4) { 
[0]=> string(44) "Travel agent Marko, 42.5624525, 27.5263493,1" 
[1]=> string(44) "Travel agent Marko, 42.5632957, 27.5267364,2" 
[2]=> string(54) "Travel agent 'Planet Travel', 42.5609811, 27.5263934,3" 
[3]=> string(56) "Travel agent 'Planet Travel' 2, 42.5642942, 27.5266121,4" 
}

?>
<script type="text/javascript">
var loc = <?php echo json_encode($location); ?>;
var locations = [
[loc]
];


var map = new google.maps.Map(document.getElementById('googlemap'), {
  zoom: 10,
  center: new google.maps.LatLng(42.5624525, 27.5263493),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;
alert(locations.length);

for (i = 0; i < locations.length; i++) { 
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
</script>

<?php
}
?>

my question is why markers don't appear on the map? No error is returned, but no markers too. Do I have to move javascript code within php loop? if I alert locations.length I got 1 as locations.length. Why js count the array of locations as 1 location? Thanks in advance !

Just on a side note. Your code would be cleaner if you kept PHP and Javascript apart. So your PHP could output your needed data to an endpoint in JSON and your JS could then fetch it from that URL. — Marcus Christiansen, Aug 07 '15 at 08:56

MazzCris · Accepted Answer · 2015-08-07T08:53:17.263

3

Change this:

var loc = <?php echo json_encode($location); ?>;
var locations = [
    [loc]
];

to this:

var locations = <?php echo json_encode($location); ?>;

And the loop should be:

for (i = 0; i < locations.length; i++) { 

    loc_array = locations[i].split(",");

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(loc_array[1], loc_array[2]),
        map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(loc_array[0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

edited Aug 07 '15 at 08:53

answered Aug 07 '15 at 08:48

MazzCris

1,812
1
14
20

Man, you saved my day ! Great answer ! My I ask you also if I remove : center: new google.maps.LatLng(42.5624525, 27.5263493), markers are hidden. How can I set it up to center auto? Thanks! – Europeuser Aug 07 '15 at 08:54
If you mean centering the map to see all the markers, check the example in this answer: http://stackoverflow.com/a/15720047/3052648 – MazzCris Aug 07 '15 at 08:56

Google maps - Multi markers from database longitude and lattitude not showing on the map

1 Answers1