ต้องการให้ตัวแปลใน java ดึงข้อมูลจาก database มาเก็บไว้ผมต้องทำยังไงครับ

ผมติดปัญหาการดึงข้อมูลจาก database มาใช้ใน java
ในภาพด้านล่างคือข้อมูลดิบที่ใส่ลงไปในตัวแปล 

<script type="text/javascript">
var arr_Destination = [
	{id:1,title: 'บริษัท กรีนไพน์ จำกัด',lat: 12.570474,   lng: 99.957825,alink:'https://maps.google.com?saddr=Current Location&daddr=ทีพีไอ คอนกรีต หน่วยผลิตหัวหิน'},
    {id:2,title: 'ทีพีไอ คอนกรีต หน่วยผลิตหัวหิน',lat: 12.6755735,   lng: 99.9487977,alink:'https://maps.google.com?saddr=Current Location&daddr=ทีพีไอ คอนกรีต หน่วยผลิตหัวหิน'},
    {id:3,title: 'บริษัทรุ่งทิพย์คอนกรีต จำกัด',lat: 12.3740072, lng: 99.8326259,alink:'https://maps.google.com?saddr=Current Location&daddr=บริษัทรุ่งทิพย์คอนกรีต จำกัด'},
    {id:4,title: 'ห้างหุ้นส่วนจำกัด สหสยามคอนกรีต',lat: 12.4343182,   lng: 99.9467043,alink:'https://maps.google.com?saddr=Current Location&daddr=ห้างหุ้นส่วนจำกัด สหสยามคอนกรีต'},
	{id:5,title: 'บริษัท ปูนซีเมนต์นครหลวง จำกัด(มหาชน)',lat: 11.273043, lng: 99.488970,alink:'https://maps.google.com?saddr=Current Location&daddr=11.273043, 99.488970'},
	{id:6,title: 'บริษัทพงศ์พัฒนาคอนกรีต จำกัด',lat: 11.1989883,   lng: 99.5036602,alink:'https://maps.google.com?saddr=Current Location&daddr=บริษัทพงศ์พัฒนาคอนกรีต จำกัด'},
	{id:7,title: 'โรงงานคอนกรีตผสมเสร็จซีแพค',lat: 12.533803, lng: 99.948434,alink:'https://maps.google.com?saddr=Current Location&daddr=12.533803, 99.948434'},
	{id:8,title: 'ห้างหุ้นส่วนจำกัด มหาทรัพย์ซีเมนต์ เทรดดิ้ง',lat: 12.5866329,   lng: 99.8632228,alink:'https://maps.google.com?saddr=Current Location&daddr=ห้างหุ้นส่วนจำกัด มหาทรัพย์ซีเมนต์ เทรดดิ้ง'}
];

แต่ที่ต้องการคือต้องการดึงข้อมูลจาก database มาใช้และให้ loop ลงมาเรื่อยๆ


แต่ผมไม่รู้จะดึงข้อมูลมายังไงครับ
รบกวนท่านผู้รู้ช่วยชี้แนะด้วย

ดูเนื้อาหาตอนท้ายของบทความนี้เป็นแนวทาง

ผมลองทำดูแล้วครับแต่ยังไม่ได้เลยครับไม่รู้ว่าติดตรงไหน

genMarker.php

<?php
header("Content-type:application/json; charset=UTF-8");    
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false); 
require_once("admin/inc/dbconnect.php");
$json_data = array();
$sql = "
SELECT * FROM map WHERE 1 ORDER BY id_map
";
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $json_data[] = array(
            "province_id" => $row['id_map'],
            "province_name" => $row['title_map'],
            "province_lat" => $row['lat_map'],
            "province_lon" => $row['lng_map'],
			"province_link" => $row['alink_map']                    
        );
    }
}
// แปลง array เป็นรูปแบบ json string  
if(isset($json_data)){  
    $json= json_encode($json_data);    
    if(isset($_GET['callback']) && $_GET['callback']!=""){    
    echo $_GET['callback']."(".$json.");";        
    }else{    
    echo $json;    
    }    
}
?>


index.php

<script type="text/javascript">
$.ajax({
        url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ json
        method: "POST",
        dataType: "json",
        success:function(data){
            if(data && typeof data == 'object'){
                $.each(data,function(k,dataValue){
                    var markerID=dataValue.province_id;// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
                    var markerName=dataValue.province_name; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
                    var markerLat=dataValue.province_lat; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน 
                    var markerLng=dataValue.province_lon;
					var markerLng=dataValue.province_link; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน                 
                    });
                }); // end loop data
            } // end check data 
        }   // end success 
    });    // End ajax function 
var arr_Destination = [
	{id:dataValue.province_id,title: dataValue.province_name,lat: dataValue.province_lat,   lng: dataValue.province_lon,alink:dataValue.province_link},
];

<?php
header("Content-type:application/json; charset=UTF-8");    
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false); 
require_once("admin/inc/dbconnect.php");
$json_data = array();
$sql = "
SELECT * FROM map WHERE 1 ORDER BY id_map
";
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $json_data[] = array(
            "id_map" => $row['id_map'],
            "title_map" => $row['title_map'],
            "lat_map" => $row['lat_map'],
            "lng_map" => $row['lng_map'],
			"alink_map" => $row['alink_map']                    
        );
    }
}
// แปลง array เป็นรูปแบบ json string  
if(isset($json_data)){  
    $json= json_encode($json_data);    
    if(isset($_GET['callback']) && $_GET['callback']!=""){    
    echo $_GET['callback']."(".$json.");";        
    }else{    
    echo $json;    
    }    
}
?>

$.ajax({
        url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ json
        method: "POST",
        dataType: "json",
        success:function(data){
            if(data && typeof data == 'object'){
                $.each(data,function(k,dataValue){
                    var id_map=dataValue.id_map;// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
                    var title_map=dataValue.title_map; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
                    var lat_map=dataValue.lat_map; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน 
                    var lng_map=dataValue.lng_map;
					var alink_map=dataValue.alink_map; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน                 
                    });
                }); // end loop data
            } // end check data 
        }   // end success 
    });    // End ajax function 
	
	
var arr_Destination = [
	{id:id_map, title: title_map, lat:lat_map, lng:lng_map, alink:alink_map},
];

อันนี้ code ทั้งหมด

-------------------------------------

<!DOCTYPE html>
<html>
<head>
<title><?php include('../title.php') ?></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
  <link rel="stylesheet" href="http://v4-alpha.getbootstrap.com/examples/sticky-footer/sticky-footer.css">

     <!-- FONTAWESOME STYLES-->
    <link href="../assets/css/font-awesome.css" rel="stylesheet" />
        <!-- CUSTOM STYLES-->
    
     <!-- GOOGLE FONTS-->
   <link href='https://fonts.googleapis.com/css?family=Kanit:400,300&subset=thai,latin' rel='stylesheet' type='text/css'>
<style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    
	
      }
      /* Optional: Makes the sample page fill the window. */
  
     
    </style>
     <style type="text/css">
    html { height: 100% }
    body { 
        height:100%;
        margin:0;padding:0;
        font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
        font-size:12px;
    }
 
#comments {background:#fff}
iframe {width:100%; height:250px;border:0;}
#comment-wrap {background:#fff;position:relative}
#comments #comment-wrap{display:none;z-index:5;padding:10px}
#comments:hover #comment-wrap {display:block}
    </style>
    
    
    <style type="text/css">  
 
#map_canvas {   
    
    height:500px;  
    margin:auto;  
    /*  margin-top:100px;*/ 
	li01 a {
    font-size:18px;
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
.li01  {
    font-size:18px;
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
.li02 {
     background-color: #555;
    color: white;
}

</style>  
<style>
#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;

}

#customers tr:hover {background-color: #ddd;

}

#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}
</style>
  <style type="text/css">
  a:link,a:visited {
   color: #ff6600;
  
   text-decoration: none;
   target-new: none;
   
  }
  a:hover {
   color: red;

   text-decoration: none;
   target-new: none;
  }
 </style>
    
    
    
    <script>hover = function() {
    if (!document.body.currentStyle) return;
    var DIVcomments = document.getElementById('comments');
    var DIVcomment_wrap = document.getElementById('comment-wrap');
    DIVcomments.onmouseover = function() {
        DIVcomment_wrap.style.display = 'block';
    }
    DIVcomments.onmouseout = function() {
        DIVcomment_wrap.style.display = 'none';
    }
}
window.onload = hover;</script>
    
    <style type="text/css">  
body {
  font-family: 'Kanit', sans-serif;
}
h2 {
  font-family: 'Kanit', sans-serif;
}
</style> 
    <link href="../assets/css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body><div style="display:block">
<nav class="navbar navbar-default">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"></a>    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="../index.php"><span class="glyphicon glyphicon-modal-window"></span>&nbsp;หน้าแรก</a></li>
      <li><a href="../frontend/agent.php"><span class="glyphicon glyphicon-globe"></span>&nbsp;ตัวแทนทั้งหมด</a></li>
      <li><a href="../frontend/contact.php"><span class="glyphicon glyphicon-phone-alt"></span>&nbsp;สินค้าทั้งหมด</a></li>
      <li><a href="../map/index.php"><span class="glyphicon glyphicon-globe"></span>&nbsp;แผนที่</a></li>
    </ul>
    <div>  </div>
  </div>
  
    <table width="100%" border="0" >
   <tr>
     <td width="25%"valign="top" style="background-color:#f1f1f1;">
     <li01 style="text-align:center;">
       <table width="100%" border="0">
         <tr>
           <td><div align="center" style="background-color:#4caf50; color:#FFFFFF; font-size:16px; padding: 5px;">คู่มือ</div></td>
         </tr>
         <tr>
           <td><div align="center" style="background-color:#555555; color:#FFFFFF; font-size:16px; padding: 5px;">ลากไอคอนสีเหลือง<img src="img/male-2.png" alt=""> ไปยังตำแหน่งของท่าน<br>
             และโปรแกรมคำนวนระยะทางให้ท่าน<br>
             จากนั้นเลือกผลลัพที่แสดงที่ตัวเลือกด้านล่างนี้</div></td>
         </tr>
       </table>
       </li01>
  		<li02 style="text-align:center;font-size:16px;"></li02>
	   <table id="customers">
    <thead>
        <tr class="active">
        
            <th align="left" width="75%">ชื่อสถานที่</th>
            <th align="right" width="25%">ระยะทาง</th>
        </tr>
    </thead>
    <tbody id="placeData">
    </tbody>
</table>
      <p>&nbsp;</p></td>
     <td width="75%"><div id="map_canvas" style="width:100%;height:1000px;"></div> </td>
   </tr>
 </table>
<br>
<br>
<div class="container" style="width:100%;"></div>   
</div>
  
  
  
 
<script src="//unpkg.com/jquery@3.2.1"></script>
<script type="text/javascript">
$.ajax({
        url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ json
        method: "POST",
        dataType: "json",
        success:function(data){
            if(data && typeof data == 'object'){
                $.each(data,function(k,dataValue){
                    var id_map=dataValue.id_map;// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
                    var title_map=dataValue.title_map; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
                    var lat_map=dataValue.lat_map; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน 
                    var lng_map=dataValue.lng_map;
					var alink_map=dataValue.alink_map; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน                 
                    });
                }); // end loop data
            } // end check data 
        }   // end success 
    });    // End ajax function 
	
	
var arr_Destination = [
	{id:id_map, title: title_map, lat:lat_map, lng:lng_map, alink:alink_map},
];
var sort_arr_Destination = [];
var iconLetter = ['a','b','c','d'];
var place_Marker = [];
var pos;
var posPlace;
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้  
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น  
var my_Marker;  // กำหนดตัวแปรเก็บ marker ตำแหน่งปัจจุบัน หรือที่ระบุ  
var service;
var origins = [];
var destinations = [];
function initialize() { // ฟังก์ชันแสดงแผนที่  
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM  
   
   service = new GGM.DistanceMatrixService();
    // เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี    
    if(navigator.geolocation){    
             
            // หาตำแหน่งปัจจุบันโดยใช้ getCurrentPosition เรียกตำแหน่งครั้งแรกครั้งเดียวเมื่อเปิดมาหน้าแผนที่
            navigator.geolocation.getCurrentPosition(function(position){    
                var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude  ปัจจุบัน  
                var myPosition_lon=position.coords.longitude;  // เก็บค่าตำแหน่ง  longitude ปัจจุบัน           
                 
                // สรัาง LatLng ตำแหน่ง สำหรับ google map  
                pos = new GGM.LatLng(myPosition_lat,myPosition_lon);    
				origins = [];
				origins.push(pos);             
                 
                // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas  
                var my_DivObj=$("#map_canvas")[0];   
                 
                // กำหนด Option ของแผนที่  
                var myOptions = {  
                    zoom: 12, // กำหนดขนาดการ zoom  
                    center: pos , // กำหนดจุดกึ่งกลาง  เป็นจุดที่เราอยู่ปัจจุบัน
                    mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่  
                    mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่  
                        position:GGM.ControlPosition.RIGHT, // จัดตำแหน่ง  
                        style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style   
                    }  
                };  
          
                map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map                      
               
               my_Marker = new GGM.Marker({ // สร้างตัว marker  
                    position: pos,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
                    map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
					icon:"//www.ninenik.com/demo/google_map/images/male-2.png",  
                    draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้  
                    title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
                });                  
                 
				for( i = 0;i<arr_Destination.length;i++){	
					posPlace = new GGM.LatLng(arr_Destination[i].lat,arr_Destination[i].lng);     
					destinations.push(posPlace);

					place_Marker[i] = new GGM.Marker({ // สร้างตัว marker  
						position: posPlace,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
						animation: google.maps.Animation.DROP,
						map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
						label:arr_Destination[i].title
					});       	
				}		
				
				service.getDistanceMatrix(
				  {
					origins: origins,
					destinations: destinations,
					travelMode: 'DRIVING',
					avoidHighways: true,
					avoidTolls: true,
				  }, callback);						 
				 
				 
				// กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร
				GGM.event.addListener(my_Marker, 'dragend', function() {
					var my_Point = my_Marker.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
					map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker       	
					origins = [];
					origins.push(my_Point);     
						
					service.getDistanceMatrix(
					  {
						origins: origins,
						destinations: destinations,
						travelMode: 'DRIVING',
						avoidHighways: true,
						avoidTolls: true,
					  }, callback);							 

				});     
								 
                // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom  
                GGM.event.addListener(map, "zoom_changed", function() {  
                    $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value    
                });                  
                 
            },function() {    
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน    
            });    
         
            // ให้อัพเดทตำแหน่งในแผนที่อัตโนมัติ โดยใช้งาน watchPosition
            // ค่าตำแหน่งจะได้มาเมื่อมีการส่งค่าตำแหน่งที่ถูกต้องกลับมา
            navigator.geolocation.watchPosition(function(position){    
  
                var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude  ปัจจุบัน  
                var myPosition_lon=position.coords.longitude;  // เก็บค่าตำแหน่ง  longitude ปัจจุบัน  
                                
                // สรัาง LatLng ตำแหน่งปัจจุบัน watchPosition
                pos = new GGM.LatLng(myPosition_lat,myPosition_lon);     
                 orgins = [];
				 origins.push(pos);    
                // ให้ marker เลื่อนไปอยู่ตำแหน่งปัจจุบัน ตามการอัพเดทของตำแหน่งจาก watchPosition
                my_Marker.setPosition(pos);

                map.panTo(pos); // เลื่อนแผนที่ไปตำแหน่งปัจจุบัน  
                map.setCenter(pos);  // กำหนดจุดกลางของแผนที่เป็น ตำแหน่งปัจจุบัน                   
       
 
            },function() {    
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน    
            });    
           
    }else{    
         // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง    
    }     
 
 
  
}  

function callback(response, status,_) {
	if(status=='OK'){		
//		console.log(arr_Destination);
		$.each(response.rows[0].elements,function(i,elm){
			arr_Destination[i].distanceText = elm.distance.text;
			arr_Destination[i].distanceValue = elm.distance.value;
		});
		sort_arr_Destination = [];
		sort_arr_Destination = $.extend(true,[], arr_Destination);
		sort_arr_Destination.sort(function(a, b) {
			return parseFloat(a.distanceValue) - parseFloat(b.distanceValue);
		});
//		console.log(sort_arr_Destination);
		$("#placeData").html('');
		$.each(sort_arr_Destination,function(i,dest){
			var htmlTr = '<tr><td><a href="'+arr_Destination[i].alink+'" target="_blank">'+dest.title '</a></td><td>' dest.distanceText '</td></tr>';
			$("#placeData").append(htmlTr);			
	//		console.log(dest);
		});		
	}
}
$(function(){  
    // โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว  
    // ค่าตัวแปร ที่ส่งไปในไฟล์ google map api  
    // v=3.2&sensor=false&language=th&callback=initialize  
    //  v เวอร์ชัน่ 3.2  
    //  sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false  
    //  language ภาษา th ,en เป็นต้น  
    //  callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize  
    $("<script/>", {  
      "type": "text/javascript",  
      src: "//maps.google.com/maps/api/js?v=3.2&key=AIzaSyCSTujeM64MyA3QnjwKF_SnXmaiyTItWOM&sensor=false&language=th&callback=initialize" 
    }).appendTo("body");      
});
 </script>
</body>
</html>