fetch multiple latitude and longitude from database and display their marker on google map

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>

Check this example: http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example and change your code so the loop only generates the locations array. — Let'sTalk, Dec 17 '14 at 13:20
What does the HTML generated by your PHP look like? You can only have **one** initialize function... — geocodezip, Dec 17 '14 at 14:14
This is not the way to do it. What your PHP/database should do, is just create an object (php might call it array) containing the data. You print that object with echo json_encode($obj); . Javascript reads the object and processes it. Do not let php touch any of the functions (especially not in a loop). — Emmanuel Delay, Dec 17 '14 at 16:40

score 1 · Answer 1 · edited Dec 18 '15 at 13:27

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);

score 0 · Answer 2 · answered Oct 29 '15 at 13:19

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>

fetch multiple latitude and longitude from database and display their marker on google map

2 Answers2