PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ช่วยดูโค้ด google map ให้น่อยน่ะค่ะ ติดตรงบแสดงจุดเป็นภาพ

ช่วยดูโค้ด google map ให้น่อยน่ะค่ะ ติดตรงบแสดงจุดเป็นภาพ
ขอ รบกวนน่อยน่ะค่ะ พอดีหนูอยากให้ ไอคอน จุด มันเป็น รูปภาพที่ดึงมาจากฐานข้อมูลของแต่ละที่อ่าค่ะ แต่ตอนนี้ มัน ไม่แสดงภาพของแต่ละที่ แต่ตอนนี้มันแสดงเป็นภาพเดียวทุกจุด  ทั้งๆที่แต่ละจุดเก็บภาพต่างกัน  อ่ะค่ะ หนูต้องแก้โค้ดตรงไหน บ้างค่ะ หรือหนูใส่โค้ดไม่ถูก ช่วยแนะนำน่อยน่ะค่ะ ขอบคุณมากๆค่ะ

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>เว็บท่องเที่ยวอำเภอเกาะสมุย</title>
<link href="css/main2.css" rel="stylesheet" type="text/css" />
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <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;    
        }    
        /* css กำหนดความกว้าง ความสูงของแผนที่ */    
        #map_canvas {     
            width:800px;    
            height:800px;    
            margin:auto;    
            margin-top:50px;    
        }    
        </style>        
    </head>  
    <body background="images/images/bg-content.jpg">
    <div id="container">
        <div id="header"></div>
            <div id="boxbuton">
                   <a href="index.php" target="_blank" id="home"></a>
                <a href="index360.php" target="_blank" id="TOURISM"></a>
                <a href="map_360.php" target="_blank" id="MAP"></a>
                <a href="searchroutes.php" target="_blank" id="SEARCH"></a>
                <a href="#" target="_blank" id="CONTACT"></a>            </div>
                
        
        <div id="content">
   
        <?php        
$dbserver = 'localhost';
$dbuser = 'root' ;
$dbpass= "root";
$dbname= 'project360_2';
error_reporting(E_ALL ^ E_NOTICE);
mysql_connect($dbserver, $dbuser, $dbpass) or die("เชื่อมต่อฐานข้อมูลไม่ได้ ");
mysql_select_db($dbname) or die("เลือกฐานข้อมูลไม่ได้"); // เลือกฐานข้อมูล
mysql_query("SET NAMES UTF8");
?>


<?php
$sql = mysql_query("select * from uploadfile");
//$num = mysql_num_rows($sql);
//if ($num>0){
    while ($r=mysql_fetch_array($sql))    {
    //    ++$i;
    //    $i != $num ? $k=',' : $k='';
    
?>        
      <br>  
       <div style="margin:auto:width:80%;">  
           <div id="map_canvas"></div>    
             
       </div>     
      
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>        
    <script type="text/javascript">    
    var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้    
    var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น    
    var my_Marker=[]; // สำหรับปักหมุด  
    var obj_marker;  // สำหรับเก็บค่าพิกัดและข้อมูลจากฐานข้อมูล  
    var limit_show=1; // กำหนดแสดงรายการไม่เกิน  
    var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่    
    var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด        
    function initialize() { // ฟังก์ชันแสดงแผนที่    
        GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM    
        // กำหนดจุดเริ่มต้นของแผนที่    
        var my_Latlng  = new GGM.LatLng(9.517877, 100.012822);    
        // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas    
        var my_DivObj=$("#map_canvas")[0];     
        // กำหนด Option ของแผนที่    
        var myOptions = {    
            zoom: 10, // กำหนดขนาดการ zoom    
            center: my_Latlng , // กำหนดจุดกึ่งกลาง    
            mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่    
            mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่    
                position:GGM.ControlPosition.TOP, // จัดตำแหน่ง    
                style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style     
            }    
        };
       
        map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map    
          
          image1 = new GGM.MarkerImage("myfile/<?=$r[Tour_image]?>",  // url ภาพ ใส่แบบเต็ม หรือแบบ path ก็ได้ 
                new GGM.Size(50, 60),  //กำหนดความกว้าง สูงของ icons  
                new GGM.Point(0,0),  // จุดเริ่มต้นของรูปภาพ ใช้ 0,0  
                new GGM.Point(25, 60)  // จุดปลายของพิกัดเทียบกับรูป ปกติ (0,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป)  
                );      
         
        // ดึงข้อมูลจากฐานข้อมูลที่สร้างมาในรูปแบบไฟล์ json  
        $.getJSON( "get_marker.php", function( data ) {   
            obj_marker=data; // เก็บค่าไว้ในตัวแปร ไว้ใช้งาน  
            var m=0;  
             $.each(obj_marker,function(i,k){  // วนลูปแสดงการปักหมุด  
                     if(m<limit_show){ // ปักหมดได้ไม่เกิน limit_show  
                        var markerLatLng=new GGM.LatLng(obj_marker[i].latitude,obj_marker[i].longitude);    
                        my_Marker[i] = new GGM.Marker({ // sางตัว marker    
                            position:markerLatLng,
                           
                            icon: image1,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง   
                            map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map    
                            title:obj_marker[i].province_name // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ    
                        });
               
                        //  กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง    
                          infowindow[i] = new GGM.InfoWindow({       
                              content:$.ajax({       
                                  url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล       
                                  data:'placeID='+obj_marker[i].province_id,  // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล    
                                 async:false       
                          }).responseText       
                                                    });                            
      
                         // ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ marker  
                        GGM.event.addListener(my_Marker[i],"click", function(){ // เมื่อคลิกตัว marker แต่ละตัว    
                            if(infowindowTmp){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่    
                                infowindow[infowindowTmp].close();  // ถ้ามีให้ปิด infowindow ที่เปิดอยู่    
                            }    
                            infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก    
                            infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน    
                        });                                  
                        m++;  
                     }  
                      
             });                
        });    
          
      
        // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom    
        GGM.event.addListener(map, 'zoom_changed', function() {    
            // วนลูปล้างค่าเก่า ก่อนสร้างปักหมุดใหม่  
            if(my_Marker.length>0){    
                for(i=0;i<my_Marker.length;i++){    
                    my_Marker[i].setMap(null);    
                }    
            }    
            var m=0;  
            var map_zoom=map.getZoom();  
            // zoom เท่าไหร่ แสดงเท่าไหร่ เงื่อนไขกำหนดตามต้องการ  
            if(map_zoom<=9){  
                limit_show=1;  
            }else if(map_zoom<11){  
                limit_show=3;  
            }else if(map_zoom<=12){  
                limit_show=5;  
            }else if(map_zoom<=13){  
                limit_show=10;  
            }else{  
                limit_show=100;  
            }  
            image1 = new GGM.MarkerImage("myfile/<?=$r[Tour_image]?>",  // url ภาพ ใส่แบบเต็ม หรือแบบ path ก็ได้ 
                new GGM.Size(50,50),  //กำหนดความกว้าง สูงของ icons  
                new GGM.Point(0,0),  // จุดเริ่มต้นของรูปภาพ ใช้ 0,0  
                new GGM.Point(25, 60)  // จุดปลายของพิกัดเทียบกับรูป ปกติ (0,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป)  
                );  
             $.each(obj_marker,function(i,k){  // วนลูปแสดงการปักหมุด  
                     if(m<limit_show){ // ปักหมดได้ไม่เกิน limit_show  
                           
                        var markerLatLng=new GGM.LatLng(obj_marker[i].latitude,obj_marker[i].longitude);    
                        my_Marker[i] = new GGM.Marker({ // สร้างตัว marker    
                            position:markerLatLng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                            icon: image1,    
                            map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map    
                            title:obj_marker[i].province_name // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ    
                        });      
     
                        // ส่วนของ infowindow สำหรับทดสอบ ดึงจากชื่อ titile  
                       // infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array    
                           // content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow    
                       //});                               
                        //  กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง    
                            infowindow[i] = new GGM.InfoWindow({       
                             content:$.ajax({       
                                  url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล       
                               data:'placeID='+obj_marker[i].province_id,  // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล    
                                 async:false       
                              }).responseText       
                            });                             
      
                         // ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ marker  
                        GGM.event.addListener(my_Marker[i],"click", function(){ // เมื่อคลิกตัว marker แต่ละตัว    
                            if(infowindowTmp){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่    
                                infowindow[infowindowTmp].close();  // ถ้ามีให้ปิด infowindow ที่เปิดอยู่    
                            }    
                            infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก    
                            infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน    
                        });                                  
                        m++;  
                     }  
             });            
              
        });    
          
         
    }  // <?      
    }
//}
             
?>        
    $(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: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"    
        }).appendTo("body");        
    });    
    </script>                
    </div>
        <div id='footer'>
    </div></div>

</body>
</html>


โดย:  Nanozeez IP: 1.0.128.xxx วันที่: 05-12-2014 เวลา: 00:53:34

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 2
ขอบคุณมากๆเลยค่ะ   ได้แล้ว ๆ ๆ ๆ  ขอบคุณมากๆๆๆๆๆๆๆค่ะ

โดย:  Nanozeez IP: 1.0.128.xxx วันที่: 05-12-2014 เวลา: 03:40:13
 ความคิดเห็นที่ 1
ดูการเรียกใช้ตามโค้ดเป็นแนวทาง 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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;  
    }  
    /* css กำหนดความกว้าง ความสูงของแผนที่ */  
    #map_canvas {   
        width:450px;  
        height:500px;  
        margin:auto;  
        margin-top:50px;  
    }  
    </style>      
</head>
<body>
  
  <br>
   <div style="margin:auto:width:80%;">
       <div id="map_canvas"></div>  
       
   </div>   

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      
<script type="text/javascript">  
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้  
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น  
var my_Marker=[]; // สำหรับปักหมุด
var obj_marker;  // สำหรับเก็บค่าพิกัดและข้อมูลจากฐานข้อมูล
var limit_show=10; // กำหนดแสดงรายการไม่เกิน
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่  
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด      
var icon=[]; // สำหรับกำหนด รูปให้แต่ละ marker
function initialize() { // ฟังก์ชันแสดงแผนที่  
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM  
    // กำหนดจุดเริ่มต้นของแผนที่  
    var my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);  
    // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas  
    var my_DivObj=$("#map_canvas")[0];   
    // กำหนด Option ของแผนที่  
    var myOptions = {  
        zoom: 5, // กำหนดขนาดการ zoom  
        center: my_Latlng , // กำหนดจุดกึ่งกลาง  
        mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่  
        mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่  
            position:GGM.ControlPosition.TOP, // จัดตำแหน่ง  
            style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style   
        }  
    };  
    map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map  
    
    // ดึงข้อมูลจากฐานข้อมูลที่สร้างมาในรูปแบบไฟล์ json
    $.getJSON( "get_marker.php", function( data ) { 
        obj_marker=data; // เก็บค่าไว้ในตัวแปร ไว้ใช้งาน
        var m=0;
         $.each(obj_marker,function(i,k){  // วนลูปแสดงการปักหมุด
                 if(m<limit_show){ // ปักหมดได้ไม่เกิน limit_show
                     
                    icon[i] = new GGM.MarkerImage("myfile/"+obj_marker[i].icon,  // url ภาพ ใส่แบบเต็ม หรือแบบ path ก็ได้ 
                    new GGM.Size(50, 60),  //กำหนดความกว้าง สูงของ icons  
                    new GGM.Point(0,0),  // จุดเริ่มต้นของรูปภาพ ใช้ 0,0  
                    new GGM.Point(25, 60)  // จุดปลายของพิกัดเทียบกับรูป ปกติ (0,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป)  
                    );                           
                     
                    var markerLatLng=new GGM.LatLng(obj_marker[i].latitude,obj_marker[i].longitude);  
                    my_Marker[i] = new GGM.Marker({ // สร้างตัว marker  
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
                        icon:icon[i],  // แสดงเป็นรูปของแต่ละ marker นั้น
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
                        title:obj_marker[i].province_name // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
                    });     
                     
                     // ส่วนของ infowindow สำหรับทดสอบ ดึงจากชื่อ titile
                     infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array  
                        content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow  
                    });             
                     
                    //  กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง  
//                        infowindow[i] = new GGM.InfoWindow({     
//                          content:$.ajax({     
//                              url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล     
//                              data:'placeID='+obj_marker[i].province_id,  // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล  
//                              async:false     
//                          }).responseText     
//                        });                           

                     // ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ marker
                    GGM.event.addListener(my_Marker[i],"click", function(){ // เมื่อคลิกตัว marker แต่ละตัว  
                        if(infowindowTmp){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่  
                            infowindow[infowindowTmp].close();  // ถ้ามีให้ปิด infowindow ที่เปิดอยู่  
                        }  
                        infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก  
                        infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน  
                    });                                
                    m++;
                 }
                
         });              
    });  
    

    // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom  
    GGM.event.addListener(map, 'zoom_changed', function() {  
        // วนลูปล้างค่าเก่า ก่อนสร้างปักหมุดใหม่
        if(my_Marker.length>0){  
            for(i=0;i<my_Marker.length;i++){  
                my_Marker[i].setMap(null);  
            }  
        }  
        var m=0;
        var map_zoom=map.getZoom();
        // zoom เท่าไหร่ แสดงเท่าไหร่ เงื่อนไขกำหนดตามต้องการ
        if(map_zoom<=6){
            limit_show=10;
        }else if(map_zoom<=7){
            limit_show=30;
        }else if(map_zoom<=8){
            limit_show=40;
        }else if(map_zoom<=20){
            limit_show=100;
        }else{
            limit_show=10;
        }
         $.each(obj_marker,function(i,k){  // วนลูปแสดงการปักหมุด
                 if(m<limit_show){ // ปักหมดได้ไม่เกิน limit_show

                    icon[i] = new GGM.MarkerImage("myfile/"+obj_marker[i].icon,  // url ภาพ ใส่แบบเต็ม หรือแบบ path ก็ได้ 
                    new GGM.Size(50, 60),  //กำหนดความกว้าง สูงของ icons  
                    new GGM.Point(0,0),  // จุดเริ่มต้นของรูปภาพ ใช้ 0,0  
                    new GGM.Point(25, 60)  // จุดปลายของพิกัดเทียบกับรูป ปกติ (0,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป)  
                    );                           
                                          
                     
                     
                    var markerLatLng=new GGM.LatLng(obj_marker[i].latitude,obj_marker[i].longitude);  
                    my_Marker[i] = new GGM.Marker({ // สร้างตัว marker  
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
                        icon:icon[i],  // แสดงเป็นรูปของแต่ละ marker นั้น
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
                        title:obj_marker[i].province_name // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
                    });    

                    // ส่วนของ infowindow สำหรับทดสอบ ดึงจากชื่อ titile
                     infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array  
                        content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow  
                    });                             
                    //  กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง  
//                        infowindow[i] = new GGM.InfoWindow({     
//                          content:$.ajax({     
//                              url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล     
//                              data:'placeID='+obj_marker[i].province_id,  // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล  
//                              async:false     
//                          }).responseText     
//                        });                           

                     // ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ marker
                    GGM.event.addListener(my_Marker[i],"click", function(){ // เมื่อคลิกตัว marker แต่ละตัว  
                        if(infowindowTmp){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่  
                            infowindow[infowindowTmp].close();  // ถ้ามีให้ปิด infowindow ที่เปิดอยู่  
                        }  
                        infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก  
                        infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน  
                    });                                
                    m++;
                 }
         });          
        
    });  
    
  
}  
$(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: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"  
    }).appendTo("body");      
});  
</script>              
</body>
</html>



จะมีการกำหนดตัวแปร var icon=[]  ด้านบน
และเรียกใช้ตามตัวอย่าง

ส่วนชื่อไฟล์รูป นั้นต้องสัมพันธ์กับข้อมูลที่แสดง  ให้ดึงตอนสร้าง get_marker.php ไฟล์ โดยถ้ารูปบันทึกอยู่ในตารางเดียวกับ ข้อมูล latitude และ longitude
ก็สามารถเพิ่ม ค่า icon เข้าไป และดึงค่ามาได้เลย  เช่น

<?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);  
// ส่วนติดต่อกับฐานข้อมูล
mysql_connect("localhost","root","") or die("Cannot connect the Server");     
mysql_select_db("test") or die("Cannot select database");     
mysql_query("set character set utf8");   
?>
<?php
$q="SELECT * FROM province_th WHERE 1 ORDER BY province_id";
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
	$json_data[]=array(
        "province_id"=>$rs['province_id'],
        "province_name"=>$rs['province_name'],
        "latitude"=>$rs['province_lat'],
        "longitude"=>$rs['province_lon'],
        "icon"=>$rs['province_icon'],
        "zoom"=>$rs['province_zoom']
	);	
}
$json= json_encode($json_data);
echo $json;
?>



แต่ถ้ารูปอยู่คนละตาราง ตารางรูป และตารางข้อมูลพิกัด ต้องมี key หรือฟิลด์ ที่มีความสัมพันธ์กัน 
วีธีใช้งาน คือสร้างฟังก์ชั่นไปดึงรูป โดยอ้างอิงจาก id ที่สัมพันธ์  สมมติ รูปอยู่ตาราง picture ข้อมูลพิกัดอยู่ 
ตาราง province_th  สองตารางมี ฟฟิลชื่อ province_id ที่สัมพันธ์กัน  แบบนี้เป็นต้น

<?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);  
// ส่วนติดต่อกับฐานข้อมูล
mysql_connect("localhost","root","") or die("Cannot connect the Server");     
mysql_select_db("test") or die("Cannot select database");     
mysql_query("set character set utf8");   
// ฟังก์ชั่นดึงรูป จากตารางที่ สัมพันธ์กัน
function getPicture($id){  // ส่งค่าชื่อรูปออกมาใช้งาน
  return mysql_result(mysql_query("
  SELECT icon FROM picture WHERE province_id='".$id."'
  "),0,0);
}
?>
<?php
$q="SELECT * FROM province_th WHERE 1 ORDER BY province_id";
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
	$json_data[]=array(
        "province_id"=>$rs['province_id'],
        "province_name"=>$rs['province_name'],
        "latitude"=>$rs['province_lat'],
        "longitude"=>$rs['province_lon'],
        "icon"=>getPicture($rs['province_id']),
        "zoom"=>$rs['province_zoom']
	);	
}
$json= json_encode($json_data);
echo $json;
?>


โดย:  Ninenik IP: 1.47.82.xxx วันที่: 05-12-2014