从数据库中获取多个经度并在Google地图上显示其标记

Question

i have a code that is supposed to fetch data (latitude and longitude) from database and display it on google map along with markers, the problem is that it fetches and displays latitude and longitude of only one row, but it is supposed to show all the places. Would appreciate if anyone could help me.

<script>
    <?php 
    require 'connection.php'; 
    $parent_id = $_GET['country'];
    $fid = $_GET['fid']; 
        $sql = "SELECT * FROM features_for_office WHERE parent_id='".$parent_id."' and fid='".$fid."' ";
        $result = mysqli_query($con, $sql);
        if (mysqli_num_rows($result) > 0) 
            {
              while($row = mysqli_fetch_assoc($result)) 
               {
                 $officeid= $row["officeid"];

                 $sql1 = "SELECT * FROM register_office WHERE id='".$officeid."' ";
                 $result1 = mysqli_query($con, $sql1);
                  if (mysqli_num_rows($result1) > 0) 
                  {
                   while($row1 = mysqli_fetch_assoc($result1)) 
                   {
                    $officelat= $row1["lat"];
                    $officelon= $row1["lon"];
                    $officetitle= $row1["officetitle"];

                     //echo $officelat; 
                     //echo $officelon;
                     //echo $officetitle;
                  ?>    
                   var myCenter=new google.maps.LatLng(<?php echo $officelat;?>,<?php echo $officelon;?>);
                   function initialize()
                   {
                    var mapProp = {
                    center:myCenter,
                    zoom:5,
                    mapTypeId:google.maps.MapTypeId.ROADMAP
                    };
                    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
                    var marker=new google.maps.Marker({
                    position:myCenter,
                    });
                    marker.setMap(map);
                    var infowindow = new google.maps.InfoWindow({
                    content:"<?php echo $officetitle;?>"
                    });

                   infowindow.open(map,marker);}
                   google.maps.event.addDomListener(window, 'load', initialize);
                 <?}
                 }
              }
          } 
    mysqli_close($con);     
 ?>
   </script>
   <div id="googleMap" style="width:1145px;height:380px;"></div>

Answer 1

The error is that you are initializing the map every time until the loop completes,it will recreate the map every time and the last latlon marker will be shown on the map.Call the initialize method on page load and place the following code inside the loop.

var myCenter=new google.maps.LatLng(<?php echo $officelat;?>,<?php echo $officelon;?>);
                  var marker=new google.maps.Marker({
                    position:myCenter,
                    });
                    marker.setMap(map);

Answer 2

using SQL you can fetch Latitude and Longitude from Database using this code:

protected void googleMap_Load(object sender, EventArgs e) 
    {
        //Establishing SQL connection
        SqlConnection connStr = new
        SqlConnection(ConfigurationManager.ConnectionStrings["myConnectionString"].ConnectionString);
        connStr.Open();//Open the connection to Database

        //Generate the database query to fetch the content details
        SqlCommand cmd = new SqlCommand("select LAT,LON from DATA where ID=9", connStr);

        SqlDataAdapter sqlda = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();

        sqlda.Fill(ds);

    }

The Problem still remains as how to use this dataTable to set marker on google map... The problem can be re-framed as to fetch the LatLng from database I used the script to display map

<script>
    var myLatLon = new google.maps.LatLng(13, 77);//Defining Latitude and Longitude 

    var mapProp = {
        center: myLatLon, //    Center of display page.
        zoom: 8, //Zoom level
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById('dvMap'), mapProp);

    var marker = new google.maps.Marker({
        position: myLatLon,
        map: map,
    });
</script>