ค้นหา marker ในแผนที่จากฐานข้อมูล แล้วพอกดดู infowindow ตรง marker มันแสดงแค่อันเดียวจากข้อมูลในฐานข้อมูลค่ะ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ค้นหา marker ในแผนที่จากฐานข้อมูล แล้วพอกดดู infowindow ตรง marker มันแสดงแค่อันเดียวจากข้อมูลในฐานข้อมูลค่ะ

ค้นหา marker ในแผนที่จากฐานข้อมูล แล้วพอกดดู infowindow ตรง marker มันแสดงแค่อันเดียวจากข้อมูลในฐานข้อมูลค่ะ
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var image1; // ตัวแปรสำหรับเก็บรูป icons กำหนดเอง
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Marker=[]; // กำหนดตัวแปร my_Marker แบบ array เพื่อเก็บค่าการกำหนดตำแหน่ง ปักหมุด
var newCenterLatLon; // ำหนดตัวแปร newCenterLatLon เพื่อเก็บค้า หากค้นหาแล้วเจอสถานที่เดียว
function initialize() { // ฟังก์ชันแสดงแผนที่
  GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
  // กำหนดจุดเริ่มต้นของแผนที่
  var my_Latlng  = new GGM.LatLng(16.782495,100.218922);
  // กำหนด 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
}


// เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี
    if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(function(position){
                var pos = new GGM.LatLng(position.coords.latitude,position.coords.longitude);
/*              var infowindow = new GGM.InfoWindow({
                    map: map,
                    position: pos,
                    content: "คุณอยู่ที่นี่."
                });*/
                image1 = new GGM.MarkerImage("https://www.ninenik.com/demo/photo_avatar.php",  // url ภาพ ใส่แบบเต็ม หรือแบบ path ก็ได้
                new GGM.Size(50, 60),  //กำหนดความกว้าง สูงของ icons
                new GGM.Point(0,0),  // จุดเริ่มต้นของรูปภาพ ใช้ 0,0
                new GGM.Point(25, 60)  // จุดปลายของพิกัดเทียบกับรูป ปกติ (0,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป)
                );
                var my_Marker = new GGM.Marker({ // สร้างตัว marker
                        position: pos,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                        icon: image1,
                        map: map // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                    });

                var my_Point = my_Marker.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
                map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker
        //      $("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value
//              $("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value
//              $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value
                map.setCenter(pos);
            },function() {
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน
            });
    }else{
         // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง
    }


$(function(){
  $("#data_search").keyup(function(e){
      if(e.keyCode==13){ // เมื่อกดปุ่ม enter ในช่องค้นหา
          search_map(); // ให้เรียกใช้ฟังก์ชั่นการค้นหา แบบ ajax
      }
  });
});
function search_map(){ // ฟังก์ชั่นการค้นหา แบบ ajax
  var i_marker=0; // กำหนดตัวแปร ไว้นับจำนวน marker หรือปักหมุด
  var data_found=0;// กำหนดตัวแปร ไว้นับจำนวนรายการที่ค้นจอ
  for(i=0;i<my_Marker.length;i++){ // วนหลูปเพื่อยกเลือก ตัว marker ทั้งหมด หรือล้างค่า ก่อนกำหนดใหม่
      my_Marker[i].setMap(null);// คำสั่งในการยกเลิกตัว marker
  }

  $.ajax({
      url:"genMarker2.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml
      type: "GET", // ส่งค่าข้อมูลแบบ POST ไปที่ไฟล์ genMarker.php
      data: { data_search :$("#data_search").val()}, //// รับค่า จากการ input text ชื่อ id เท่ากับ data_search
      dataType: "xml",
      success:function(xml){
//          console.log(xml);
          $(xml).find('marker').each(function(){ // วนลูปดึงค่าข้อมูลมาสร้าง marker

                  var markerID=$(this).attr("id");// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
                  var markerName=$(this).find("name").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
                  var markerLat=$(this).find("latitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
                  var markerLng=$(this).find("longitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
                  var markerLatLng=new GGM.LatLng(markerLat,markerLng);
                  my_Marker[i_marker] = new GGM.Marker({ // สร้างตัว marker
                      position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                      map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                      title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
                  });


                  //  กรณีตัวอย่าง ดึง title ของตัว marker มาแสดง
                //infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array
                    //content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow
                //});

                //  กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง
              infowindow[i] = new GGM.InfoWindow({
                  content:$.ajax({
                      url:'placeDetail2.php',//ใช้ ajax ใน jQuery ดึงข้อมูล
                      data:{placeID :markerID},// ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
                      async:false
                 }).responseText
              });


                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 ที่เปิดไว้อ้างอิงใช้งาน
                });


                   i_marker++;// เพิ่มค่า เพื่อเก็บจำนวนตัว marker ทั้งหมด

                  if(i_marker==1){
                      // เก็บค่าตำแหน่ง พักัด สำหรับใช้ ย้ายตำแหน่ง ตรงกลางแผนที่ไปที่ดังกล่าว กรณีพบข้อมูลเดียว
                      newCenterLatLon=markerLatLng;
                  }
                  data_found++;// เก็บค่า เพื่อนับจำนวนรายการที่ค้นเจอทั้งหมด
          });
          if(i_marker==1){
              map.setCenter(newCenterLatLon);// ถ้าค้นเจอเพียงรายการเดียว ให้ย้ายตรงกลางแผนที่ไปที่ ตำแหน่งที่เจอ
          }
          if(i_marker>1){ // // ถ้าค้นเจอมากกว่า 1 ตำแหน่ง ให้ย้าย ตรงกลาง แผนที่ มาตำแหน่งเดิม ตอนแรก
              newCenterLatLon=new GGM.LatLng(16.782495,100.218922);
              map.setCenter(newCenterLatLon);
          }
          if(data_found==0){ // ถ้าไม่พบข้อมูลใดๆ ให้แสดงเตือน
              alert("ไม่พบข้อมูล ตามค้นหา");
              $("#data_search").val("");
          }
      }
  });
}

$("button").click(function(){
    var mapType=$(this).text();
    map.setMapTypeId(eval("GGM.MapTypeId." mapType));
});

$(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?key=AIzaSyDBq03x1U9s1ekqp6TgAKUgXsOHVzcyrxM&sensor=false&language=th&callback=initialize"
  }).appendTo("body");
});
</script>




<?php
header("Content-type:text/html; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);

// เชื่อมต่อกับฐานข้อมูล
$link=mysql_connect("localhost","root","1234"); // เชื่อมต่อ Server
mysql_select_db("restaurant");  // ติดต่อฐานข้อมูล
mysql_query("set character set utf8"); // กำหนดค่า character set ที่จะใช้แสดงผล
// ดึงข้อมูลจากฐานข้อมูล ตามค่า id ของสถานที่ ที่ส่งมา
$id = $_GET['placeID'];

$q="SELECT * FROM  restaurant_details WHERE res_id='$id'  ";
// $q = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
//while($rs=mysql_fetch_array($q)){
$qr=@mysql_query($q);
$rs=@mysql_fetch_assoc($qr);
?>
<table width="300" border="0" cellspacing="2" cellpadding="0">
  <tr>
    <td width="10" rowspan="4">
      <?php
        if(isset($rs['res_picture'])) {
            if (!empty($rs['res_picture'])) {
                echo '<img src="image/'.$rs['res_picture'].'"  width="130" height="80"/>';
            }
        }
      ?>
    </td>
    <td width="10">&nbsp;</td>
    <td width="264"><?php echo $rs['res_name']; ?></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>ที่ตั้ง </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>รายละเอียด</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><a class="button5 button5" href="indexSaleView.php?id=<?php echo $rs['res_id']; ?>"
     target="_blank">รายละเอียดเพิ่มเติม</a></td>
  </tr>

</table>
<?php  //}//while($rs=mysql_fetch_array($qr)){ ?>
<?php //map.php
header("Content-type:text/xml; 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","1234") or die("Cannot connect the Server");
mysql_select_db("restaurant") or die("Cannot select database");
mysql_query("set character set utf8");
echo '<?xml version="1.0" encoding="utf-8"?>';
// 6-7 บรรทัดแรกด้านบน เป็นการกำหนด ให้ไฟล์นี้ส่งออกเป็นไฟล์ แบบ xml
// และการกำหนดการเชิ่อมต่อกับฐานข้อมูล
?>
<markers>
<?php
$q_search=""; // กำหนดตัวแปร เพื่อรอรับการ ส่งคำสั่งตามเงื่อนไข การค้นหา
$q_limit=""; // กำหนดตัวแปร เพื่อรอรับการ เลือกจำกัดข้อมูลที่ต้องการแสดง
if(isset($_GET['data_search']) && $_GET['data_search']!=""){ // ถ้า มีการส่งค่า คำค้นหามา และค่านั้นไม่ใช่ค่าว่าง
    // กำหนด รูปแบบคำสั่ง sql ในตัวแปรที่สร้างไว้ตอนต้น
    $q_search=" AND res_type_name like '%".$_GET['data_search']."%' ";
}else{
    // ถ้าไม่มีการส่งค่า ไม่ให้แสดง ตำแหน่งในแผนที่ ให้กำหนด LIMIT 0
    //  แต่ถ้า ต้องการแสดงเริ่มต้น ให้กำหนดจำนวนตามต้องการ เช่น LIMIT 10
    $q_limit=" LIMIT 0 ";
}
// ชุดคำสั่ง sql ในการดึงข้อมูล จากฐานข้อมูลมาแสดง
$q="SELECT * FROM restaurant_details WHERE 1 $q_search ORDER BY res_id  $q_limit ";
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
?>
    <marker id="<?=$rs['res_id']?>">
        <name><?=$rs['res_type_name']== 1 ? "อาหารตามสั่ง": "";?>
              <?=$rs['res_type_name']== 2 ? "ก๋วยเตี๋ยว": "";?>
              <?=$rs['res_type_name']== 3 ? "ข้าวแกง": "";?>
              <?=$rs['res_type_name']== 4 ? "อาหารตามสั่ง": "";?>
              <?=$rs['res_type_name']== 5 ? "เบเกอรี่": "";?>
              <?=$rs['res_type_name']== 6 ? "ก๋วยเตี๋ยว": "";?>
              <?=$rs['res_type_name']== 7 ? "สถานบันเทิง": "";?>
              <?=$rs['res_type_name']== 8 ? "เบเกอรี่": "";?>
              <?=$rs['res_type_name']== 9 ? "ภัตราคาร": "";?>
        </name>
        <latitude><?=$rs['lat']?></latitude>
        <longitude><?=$rs['lng']?></longitude>
    </marker>
<?php } ?>
</markers>

ตามหัวข้อนะคะ คือต้องการให้กด marker แล้วแสดง infowindow ตามทุกตัว  แต่ตอนนี้มันกดดูได้แค่ตัวเดียวที่เป็นข้อมูลตัวสุดท้ายของฐานขอมูล


Yauwared 223.207.248.xxx 14-11-2016 00:47:14

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

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


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


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
key ของ infowindow ต้องเป็น keyเดียวกันกับ my_Marker
infowindow[i] = new GGM.InfoWindow({  
ต้องเป็น
infowindow[i_marker] = new GGM.InfoWindow({  


>>>  อัพเดท >>> 14-11-2016
------------------------------------------
ตรวจสอบโค้ดให้ถูกต้อง 

my_Marker[i] ก็ต้องเป็น my_Marker[i_marker]


ninenik 183.88.189.xxx 14-11-2016
 ความคิดเห็นที่ 2
แก้แล้ว ยังไม่ได้ค่ะ หนูไม่ค่อยเข้าใจ
function search_map(){ // ฟังก์ชั่นการค้นหา แบบ ajax
  var i_marker=0; // กำหนดตัวแปร ไว้นับจำนวน marker หรือปักหมุด
  var data_found=0;// กำหนดตัวแปร ไว้นับจำนวนรายการที่ค้นจอ
  for(i=0;i<my_Marker.length;i++){ // วนหลูปเพื่อยกเลือก ตัว marker ทั้งหมด หรือล้างค่า ก่อนกำหนดใหม่
      my_Marker[i].setMap(null);// คำสั่งในการยกเลิกตัว marker
  }

  $.ajax({
      url:"genMarker2.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml
      type: "GET", // ส่งค่าข้อมูลแบบ POST ไปที่ไฟล์ genMarker.php
      data: { data_search :$("#data_search").val()}, //// รับค่า จากการ input text ชื่อ id เท่ากับ data_search
      dataType: "xml",
      success:function(xml){
//          console.log(xml);
          $(xml).find('marker').each(function(){ // วนลูปดึงค่าข้อมูลมาสร้าง marker

                  var markerID=$(this).attr("id");// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
                  var markerName=$(this).find("name").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
                  var markerLat=$(this).find("latitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
                  var markerLng=$(this).find("longitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
                  var markerLatLng=new GGM.LatLng(markerLat,markerLng);
                  my_Marker[i_marker] = new GGM.Marker({ // สร้างตัว marker
                      position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                      map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                      title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
                  });


                  //  กรณีตัวอย่าง ดึง title ของตัว marker มาแสดง
                //infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array
                    //content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow
                //});

                //  กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง
              infowindow[i_marker] = new GGM.InfoWindow({
                  content:$.ajax({
                      url:'placeDetail2.php',//ใช้ ajax ใน jQuery ดึงข้อมูล
                      data:{placeID :markerID},// ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
                      async:false
                 }).responseText
              });


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


                   i_marker++;// เพิ่มค่า เพื่อเก็บจำนวนตัว marker ทั้งหมด

                  if(i_marker==1){
                      // เก็บค่าตำแหน่ง พักัด สำหรับใช้ ย้ายตำแหน่ง ตรงกลางแผนที่ไปที่ดังกล่าว กรณีพบข้อมูลเดียว
                      newCenterLatLon=markerLatLng;
                  }
                  data_found++;// เก็บค่า เพื่อนับจำนวนรายการที่ค้นเจอทั้งหมด
          });
          if(i_marker==1){
              map.setCenter(newCenterLatLon);// ถ้าค้นเจอเพียงรายการเดียว ให้ย้ายตรงกลางแผนที่ไปที่ ตำแหน่งที่เจอ
          }
          if(i_marker>1){ // // ถ้าค้นเจอมากกว่า 1 ตำแหน่ง ให้ย้าย ตรงกลาง แผนที่ มาตำแหน่งเดิม ตอนแรก
              newCenterLatLon=new GGM.LatLng(16.782495,100.218922);
              map.setCenter(newCenterLatLon);
          }
          if(data_found==0){ // ถ้าไม่พบข้อมูลใดๆ ให้แสดงเตือน
              alert("ไม่พบข้อมูล ตามค้นหา");
              $("#data_search").val("");
          }
      }
  });


Yauwared 223.207.249.xxx 14-11-2016 16:40
 ความคิดเห็นที่ 3
เปลี่ยนไม่หมดหรือเปล่า

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



เป็น

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




ninenik 1.46.136.xxx 14-11-2016
 ความคิดเห็นที่ 4
ก็ยังไม่ได้ค่ะรอบนี้ infowindow ไม่ขึ้นเลย

<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var image1; // ตัวแปรสำหรับเก็บรูป icons กำหนดเอง
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Marker=[]; // กำหนดตัวแปร my_Marker แบบ array เพื่อเก็บค่าการกำหนดตำแหน่ง ปักหมุด
var newCenterLatLon; // ำหนดตัวแปร newCenterLatLon เพื่อเก็บค้า หากค้นหาแล้วเจอสถานที่เดียว
function initialize() { // ฟังก์ชันแสดงแผนที่
  GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
  // กำหนดจุดเริ่มต้นของแผนที่
  var my_Latlng  = new GGM.LatLng(16.782495,100.218922);
  // กำหนด 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
}


// เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี
    if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(function(position){
                var pos = new GGM.LatLng(position.coords.latitude,position.coords.longitude);
/*              var infowindow = new GGM.InfoWindow({
                    map: map,
                    position: pos,
                    content: "คุณอยู่ที่นี่."
                });*/
                image1 = new GGM.MarkerImage("https://www.ninenik.com/demo/photo_avatar.php",  // url ภาพ ใส่แบบเต็ม หรือแบบ path ก็ได้
                new GGM.Size(50, 60),  //กำหนดความกว้าง สูงของ icons
                new GGM.Point(0,0),  // จุดเริ่มต้นของรูปภาพ ใช้ 0,0
                new GGM.Point(25, 60)  // จุดปลายของพิกัดเทียบกับรูป ปกติ (0,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป)
                );
                var my_Marker = new GGM.Marker({ // สร้างตัว marker
                        position: pos,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                        icon: image1,
                        map: map // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                    });

                var my_Point = my_Marker.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
                map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker
        //      $("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value
//              $("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value
//              $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value
                map.setCenter(pos);
            },function() {
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน
            });
    }else{
         // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง
    }


$(function(){
  $("#data_search").keyup(function(e){
      if(e.keyCode==13){ // เมื่อกดปุ่ม enter ในช่องค้นหา
          search_map(); // ให้เรียกใช้ฟังก์ชั่นการค้นหา แบบ ajax
      }
  });
});
function search_map(){ // ฟังก์ชั่นการค้นหา แบบ ajax
  var i_marker=0; // กำหนดตัวแปร ไว้นับจำนวน marker หรือปักหมุด
  var data_found=0;// กำหนดตัวแปร ไว้นับจำนวนรายการที่ค้นจอ
  for(i=0;i<my_Marker.length;i++){ // วนหลูปเพื่อยกเลือก ตัว marker ทั้งหมด หรือล้างค่า ก่อนกำหนดใหม่
      my_Marker[i].setMap(null);// คำสั่งในการยกเลิกตัว marker
  }

  $.ajax({
      url:"genMarker2.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml
      type: "GET", // ส่งค่าข้อมูลแบบ POST ไปที่ไฟล์ genMarker.php
      data: { data_search :$("#data_search").val()}, //// รับค่า จากการ input text ชื่อ id เท่ากับ data_search
      dataType: "xml",
      success:function(xml){
//          console.log(xml);
          $(xml).find('marker').each(function(){ // วนลูปดึงค่าข้อมูลมาสร้าง marker

                  var markerID=$(this).attr("id");// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
                  var markerName=$(this).find("name").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
                  var markerLat=$(this).find("latitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
                  var markerLng=$(this).find("longitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
                  var markerLatLng=new GGM.LatLng(markerLat,markerLng);
                  my_Marker[i_marker] = new GGM.Marker({ // สร้างตัว marker
                      position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                      map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                      title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
                  });


                  //  กรณีตัวอย่าง ดึง title ของตัว marker มาแสดง
                //infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array
                    //content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow
                //});

                //  กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง
              infowindow[i_marker] = new GGM.InfoWindow({
                  content:$.ajax({
                      url:'placeDetail2.php',//ใช้ ajax ใน jQuery ดึงข้อมูล
                      data:{placeID :markerID},// ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
                      async:false
                 }).responseText
              });


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


                   i_marker++;// เพิ่มค่า เพื่อเก็บจำนวนตัว marker ทั้งหมด

                  if(i_marker==1){
                      // เก็บค่าตำแหน่ง พักัด สำหรับใช้ ย้ายตำแหน่ง ตรงกลางแผนที่ไปที่ดังกล่าว กรณีพบข้อมูลเดียว
                      newCenterLatLon=markerLatLng;
                  }
                  data_found++;// เก็บค่า เพื่อนับจำนวนรายการที่ค้นเจอทั้งหมด
          });
          if(i_marker==1){
              map.setCenter(newCenterLatLon);// ถ้าค้นเจอเพียงรายการเดียว ให้ย้ายตรงกลางแผนที่ไปที่ ตำแหน่งที่เจอ
          }
          if(i_marker>1){ // // ถ้าค้นเจอมากกว่า 1 ตำแหน่ง ให้ย้าย ตรงกลาง แผนที่ มาตำแหน่งเดิม ตอนแรก
              newCenterLatLon=new GGM.LatLng(16.782495,100.218922);
              map.setCenter(newCenterLatLon);
          }
          if(data_found==0){ // ถ้าไม่พบข้อมูลใดๆ ให้แสดงเตือน
              alert("ไม่พบข้อมูล ตามค้นหา");
              $("#data_search").val("");
          }
      }
  });
}

$("button").click(function(){
    var mapType=$(this).text();
    map.setMapTypeId(eval("GGM.MapTypeId." mapType));
});

$(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?key=AIzaSyDBq03x1U9s1ekqp6TgAKUgXsOHVzcyrxM&sensor=false&language=th&callback=initialize"
  }).appendTo("body");
});
</script>


Yauwared 223.207.249.xxx 14-11-2016 23:27
 ความคิดเห็นที่ 5
  แสดงว่าต้องมีอะไรสักอย่างที่เหนือการคาดหมาย


ninenik 1.46.136.xxx 14-11-2016
 ความคิดเห็นที่ 6
ช่วยดูให้อีกทีได้ไหมค่ะหนูจำเป็นจริงๆ


Yauwared 223.207.249.xxx 15-11-2016 00:06
 ความคิดเห็นที่ 7
บรรทัดนี้ต้องมีตัวแปร i เข้าไปด้วย i คือ index ของ รายการ xml

          $(xml).find('marker').each(function(){ // วนลูปดึงค่าข้อมูลมาสร้าง marker


เป็น

          $(xml).find('marker').each(function(i){ // วนลูปดึงค่าข้อมูลมาสร้าง marker


และก็โค้ดด้านในที่เคยเปลี่ยนเป็น i_marker เปลี่ยนกลับเป็น i

ตามนี้

                  my_Marker[i] = new GGM.Marker({ // สร้างตัว marker  
                      position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
                      map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
                      title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
                  });  
  
  
                  //  กรณีตัวอย่าง ดึง title ของตัว marker มาแสดง  
                //infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array  
                    //content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow  
                //});  
  
                //  กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง  
              infowindow[i] = new GGM.InfoWindow({  
                  content:$.ajax({  
                      url:'placeDetail2.php',//ใช้ ajax ใน jQuery ดึงข้อมูล  
                      data:{placeID :markerID},// ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล  
                      async:false  
                 }).responseText  
              });  
  
  
                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 ที่เปิดไว้อ้างอิงใช้งาน  
                });  


ninenik 1.46.136.xxx 15-11-2016
 ความคิดเห็นที่ 8
ทำตามเรียบร้อยค๊า ขอบคุณมากๆๆเลยค่ะหนูทำได้แล้ว พี่ใจดีมากๆๆๆ


Yauwared 223.207.249.xxx 15-11-2016 01:40
1






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ