谷歌地图使用php和jquery动态显示许多标记

我想，问题是您定义了变量$place、$city、$long一次，但从未覆盖它。

所以，也许你有两个以上的标记，但除了['Palace of Westminster, London', 51.499633, -0.124755]之外，所有的都是相同的标记

UPDATE：工作示例，注释掉了您的sql内容，并在标记数组中写入了一些坐标。如果数据库中有此信息，则必须调整infoWindowContent。您也可以将其添加到php$marker数组中，或者创建一个新的数组，如本例中的$marker。

结果：我得到了所有定义的标记。如果这有效，请尝试从您需要的东西中删除注释//。如果您仍然有问题，请在您的foreach中尝试此方法进行调试：

foreach( $rs_locations as $rs_location ) {
  var_dump( $rs_location );
  ......

工作示例：

//This creates an array from the database and allows us to use it later in the jquery
//CREATE SQL STATEMENT
$sql_locations = "SELECT * FROM tbllocations";
//CONNECT TO MYSQL SERVER
//<---------   require('test-connection.php');
//EXECUTE SQL STATEMENT
//<---------   $rs_locations = mysqli_query($vconnection, $sql_locations);
$markers = array(
    // your example['Palace of Westminster, London', 51.499633,-0.124755]
    array(
        'Palace of Westminster, London',
        51.499633,
        -0.124755
    ),
    array(
        'Westminster Abbey, London',
        51.4992453,
        -0.1272561
    ),
    array(
        'QEII Centre, London',
        51.4997296,
        -0.128683
    ),
    array(
        'Winston Churchill Statue, London',
        51.5004308,
        -0.1275243
    ),
    array(
        'Fitzroy Lodge Amature Boxing Club, London',
        51.4954215,
        -0.1154758
    ),
    array(
        'Balham Boxing Club, London',
        51.4419539,
        -0.1336075
    )
);
// use this for your code
//foreach( $rs_locations as $rs_location ) {
//  $markers[] = array(
//      "{$rs_location['place']}, {$rs_location['city']}",
//      $rs_location['long'],
//      $rs_location['lat']
//  );
//}
?>
<div id="map_wrapper">
    <div id="map_canvas" class="mapping"></div>
</div>

<style>
    #map_wrapper {
        height: 400px;
    }
    #map_canvas {
        width: 100%;
        height: 100vh;
    }

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
    function initialize() {
        var map;
        var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
            mapTypeId: "roadmap",
            center: new google.maps.LatLng(52.791331, -1.918728), // somewhere in the uk BEWARE center is required
            zoom: 3,
        };
        // Display a map on the page
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        map.setTilt(45);
        // Multiple Markers
        var markers = <?php echo json_encode( $markers ); ?>;
        // Info Window Content
        var infoWindowContent = [
            ['<div class="info_content">' +
            '<h3>London Eye</h3>' +
            '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' + '</div>'],
            ['<div class="info_content">' +
            '<h3>Palace of Westminster</h3>' +
            '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
            '</div>']
        ];
        // Display multiple markers on a map
        var infoWindow = new google.maps.InfoWindow();
        var marker, i;
        // Loop through our array of markers & place each one on the map
        for (i = 0; i < markers.length; i++) {
            var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
            bounds.extend(position);
            marker = new google.maps.Marker({
                position: position,
                map: map,
                title: markers[i][0]
            });
            // Allow each marker to have an info window
            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infoWindow.setContent(infoWindowContent[i][0]);
                    infoWindow.open(map, marker);
                }
            })(marker, i));
            // Automatically center the map fitting all markers on the screen
            map.fitBounds(bounds);
        }
        //Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
            this.setZoom(10);
            google.maps.event.removeListener(boundsListener);
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

</script>

EDIT:从我的示例中删除了重复的div <div id="map_canvas"></div>