Mike Henley Mike Henley - 5 months ago 24
Javascript Question

Google Maps Multi Marker not working

I want to show multi marker on the map, but it only comes one. When I check console all lat and long values can be seen. But there is only one marker.

This code is my php code.

$query="SELECT lat, lng, FROM mytable limit 5 offset $offset";
$result = pg_exec($dbconn, $query);
$response = pg_fetch_all($result);
$data=json_encode($response, JSON_NUMERIC_CHECK | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT);
$data1 = json_decode($data, true);


This code is my js code and php code.

function initMap() {
<?php for($i=0; $i<5; $i++){ ?>
var myLatLng = {lat:<?=$data1[$i]['lat']?>, lng:<?=$data1[$i]['lng']?>};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 19,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
<?php } ?>
}

Answer

I think it is because you override your map, put your map init outside the loop.

function initMap() {
   var center = {lat: -34.397, lng: 150.644};
   var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 19,
      center: center
  });

  <?php for($i=0; $i<5; $i++){ ?>
        var myLatLng = {lat:<?=$data1[$i]['lat']?>, lng:<?=$data1[$i]['lng']?>};

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'Hello World!'
        });
  <?php } ?>
}