如何在MySQL和PHP中使用谷歌地图获取多个动态自定义标记？

Question

I use this code to generate markers for google map retriving data from database but is generate only one marker no more end I need to show ill markers from database

<script>
        function initialize() {

<?php
$query = mysqli_query($con, "SELECT * FROM prikazna WHERE approved='1' ");
while ($row = mysqli_fetch_array($query)) {
    echo 'var myLatlng = new google.maps.LatLng(' . $row['lat'] . ', ' . $row['lng'] . ');';
}
?>

            var mapOptions = {
                zoom: 14,
                center: myLatlng,
                streetViewControl: false,
                panControl: false
            }
            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

</div>

Answer 1

You are overwriting the value of myLatlng in the while loop. Store the values in an array instead, then iterate over the array in the javascript code to create a new marker for each item in the array.

<script>
        function initialize() {
        var myLatlngArray = [];
        <?php
            $query = mysqli_query($con, "SELECT * FROM prikazna WHERE approved='1' ");
            while ($row = mysqli_fetch_array($query)) {
                echo 'myLatlngArray.push(new google.maps.LatLng(' . $row['lat'] . ', ' . $row['lng'] . '));';
            }
        ?>

            var mapOptions = {
                zoom: 14,
                streetViewControl: false,
                panControl: false
            }
            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            for (var i = 0; i < myLatlngArray.length; i++) {
                var marker = new google.maps.Marker({
                    position: myLatlngArray[i],
                    map: map,
                });
            }
        }

        google.maps.event.addDomListener(window, 'load', initialize);
</script>