将 mysql 和 php 与谷歌地图一起使用

Question

I'm trying loop through every row in a table and set a marker using the value provided in the "address column". The js code and the php code until setMarker() works fine but I'm not sure how to go about using the function inside php code.

<?php
require 'private/database.php';

$sql = "SELECT * FROM form;";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_assoc($result)) {
        echo '<script>setMarker($row["address"]);</script>';
    }
} else {
    echo '<script>console.log("ERROR: marker database empty");</script>';
}

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
  zoom: 15,
  center: {lat: 24.149950, lng: 120.638610},
  mapId: '63d22d3ae6cf15ff'
  });
}


// geocoder
function setMarker(address) {
    const geocoder = new google.maps.Geocoder();
  geocoder.geocode({address: address, componentRestrictions: {
    country: 'TW'}}, (results, status) => {
    if (status === 'OK') {
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
    } else {
        alert(`Geocode unsuccessful for address: "${address}"\nSTATUS CODE: ${status}`);
    }
  });
}

Answer 1

This is more or less what I meant with the comment I made - this way the map is created by the initMap callback function before any attempts to create the markers is made - which might not be the case in the original. This is quickly put together and not tested.

<script>
    var map;
    <?php


        require 'private/database.php';

        $sql = "SELECT * FROM form;";
        $result = mysqli_query($conn, $sql);
        $data=array();


        while ($row = mysqli_fetch_assoc($result)) {
            $data[]=$row;
        }
        // create the js variable
        printf(
            'var json=%s;',
            json_encode( $data )
        );
    ?>

    
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: {lat: 24.149950, lng: 120.638610},
          mapId: '63d22d3ae6cf15ff'
      });
      Object.keys(json).forEach( key => {
        let obj=json[ key ];
        setMarker( obj['address'] )
      })
    }



    function setMarker(address) {
        const geocoder = new google.maps.Geocoder();
        geocoder.geocode( { address: address, componentRestrictions: { country: 'TW'} }, (results, status) => {
            if (status === 'OK') {
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
            } else {
                alert(`Geocode unsuccessful for address: "${address}"\nSTATUS CODE: ${status}`);
            }
        });
    }
    
</script>