显示 InfoWindow 标记包含来自数据库的数据

Question

我有标记放置在数据库中 lat lng 的每个位置，现在我想在标记的 InfoWindow 中显示，当单击它时显示它自己的标记中的每个数据行，这些数据行具有基于数据库中 lat lng 的信息。这是我的代码：

//menampilkan INFOWINDOW MARKER A

        var isi =
        "<b>Jumlah Kejadian</b> = 10 <br> <b>Kendaraan yang terlibat</b> = 10"
        ;

        var infowindow = new google.maps.InfoWindow({
          content: isi
        });

        google.maps.event.addListener(homeMarker, 'click', function() {
          infowindow.open(map,homeMarker);
        });

//menampilkan INFOWINDOW MARKER B
        var isi2 = 
        "<b>Jumlah Kejadian</b> = 1 <br> <b>Kendaraan yang terlibat</b> = 2"
        // '<IMG BORDER="1" ALIGN="center" SRC="rambulucu.jpg">'

        var infowindow2 = new google.maps.InfoWindow({
          content: isi2
        });

        google.maps.event.addListener(homeMarker2, 'click', function() {
          infowindow2.open(map,homeMarker2);
        });      
  }
});

该标记仅包含来自我自己的信息，而不是来自数据库的信息。这是我的数据库：

我想像“Nama、Jumlah kejadian 等”一样显示在点击的标记上只包含自己的数据

Answer 1

<script>    
function initialize() {

                          // you can pass your php variable to javascript variable(locations) as an array.
                            var locations = [
                            ['Lorem Ipsum Dolor sit amet 1', 1.1031994976981054,104.07207012176514, 3],
                            ['Lorem Ipsum Dolor sit amet 2', 1.1041994976981054,104.07307012176514, 2],
                            ['Lorem Ipsum Dolor sit amet 3', 1.1021994976981054,104.07407012176514, 1]
                                                ];

                                var myLatlng = new google.maps.LatLng(locations[0][1], locations[0][2]);
                                var mapOptions = {
                                    zoom: 15,
                                    center: myLatlng
                                };



                                var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                                var infowindow = new google.maps.InfoWindow();

                                var marker, i;
                                // you can use looping to show multiple marker.
                                    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));
                                    }



                                google.maps.event.addListener(marker, 'click', function () {
                                    infowindow.open(map, marker);
                                });

                                google.maps.event.addListener(marker, 'dragend', function (e) {
                                    document.getElementById("Latitude").value = e.latLng.lat();
                                    document.getElementById("Longitude").value = e.latLng.lng();
                                });
                        }

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

<style>
 #map-canvas{
   width: 500px;
   border: 1px solid red;
   height: 500px;
 }
</style>

<div id="map-canvas"></div>