PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


สอบถาม php+google map

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถาม php+google map

สอบถาม php+google map
ขอสอบถามคะ ได้ทำโค๊ดแผนที่ไปใส่ในเว็บ โดยแผนที่ ขึ้นเรียบร้อย แต่พอใส่ในเว็บเกิด error คะ ไม่ทราบว่าผิดพลาดตรงไหนหรือเปล่าคะ 




 
<?php 
session_start();
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animal Sighting System</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="icon" href="image/connn.png" type="image/x-icon"/>
<style type="text/css">    
    html { height: 100% }     
   
    /* css กำหนดความกว้าง ความสูงของแผนที่ */    
    #map_canvas {     
        width:800px;    
        height:450px;   
margin:auto;    
        margin-top:10px; 
 
 
    }    
    </style>  
</head>
<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Animal Sighting System</a>
    </div>
 
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> หน้าหลัก <span class="sr-only">(current)</span></a></li>
        <li><a href="map1.php">แผนที่</a></li>
        <li><a href="webboard_index.php">บอร์ดพูดคุย</a></li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="ค้นหา">
        </div>
        <button type="submit" class="btn btn-default">ค้นหา</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#" data-toggle="modal" data-target="#basicModal"><span class="glyphicon glyphicon-user"></span> สมัครสมาชิก</a></li>
      <li><a href="#" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-log-in"></span> เข้าสู่ระบบ</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
   
  </div><!-- /.container-fluid -->
  
     <!-- start slide-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
 
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
    <center>
      <img src="image/tree.jpg?text=Another Image Maybe" alt="Image" class="img-responsive">
      </center>
      <div class="carousel-caption">
        <!--...text-->
      </div>
    </div>
    
     <div class="item">
     <center>
      <img src="image/two.jpg?text=Another Image Maybe" alt="Image" class="img-responsive">
      </center>
      <div class="carousel-caption">
        <!--...text-->
      </div>
    </div>
    
     <div class="item">
     <center>
      <img src="image/four.jpg?text=Another Image Maybe" alt="Image" class="img-responsive">
      </center>
      <div class="carousel-caption">
        <!--...text-->
      </div>
    </div>
    
 
  </div>
 
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<!-- end slide-->
</nav>
<div class="container">
<div class="col-md-7  col-sm-7 col-md-offset-2 col-sm-offset-2">
<h1>แสดงแผนที่</h1>
<center>
<?php
require_once 'Connect.php';
$sql = "select * from $animal" ;
$dbquery = mysql_db_query($dbname,$sql);
$result = mysql_fetch_array($dbquery);
$i = 0 ;
while($result = mysql_fetch_array($dbquery)){
$data[$i] = $result["Relate"];
//echo $data[$i]."<br/>";
$i++;
}
?>
   
 <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 my_leant=[]; 
var obj_marker;  // สำหรับเก็บค่าพิกัดและข้อมูลจากฐานข้อมูล  
var limit_show=100; // กำหนดแสดงรายการไม่เกิน  
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่    
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด        
function initialize() { // ฟังก์ชันแสดงแผนที่    
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM    
    // กำหนดจุดเริ่มต้นของแผนที่    
    var my_Latlng  = new GGM.LatLng(9.0968957,99.3617589);    
    // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas    
    var my_DivObj=$("#map_canvas")[0];     
    // กำหนด Option ของแผนที่    
    var myOptions = {    
        zoom: 8, // กำหนดขนาดการ 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( "Pullgps.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({ // สร้างตัว marker    
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง    
                        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    
                    });
 var mapCircle = new GGM.Circle({ // สร้างตัว circle  
                      strokeColor: "#CC0000", // สีของเส้นสัมผัส หรือสีขอบโดยรอบ  
                      strokeOpacity: 0.3, // ความโปร่งใส ของสีขอบโดยรอบ กำหนดจาก 0.0  -  0.1  
                      strokeWeight: 1, // ความหนาของสีขอบโดยรอบ เป็นหน่วย pixel  
                      fillColor: "#FF0000", // สีของวงกลม circle  
                      fillOpacity: 0.08, // ความโปร่งใส กำหนดจาก 0.0  -  0.1  
                      map: map, // กำหนดว่า circle นี้ใช้กับแผนที่ชื่อ instance ว่า map  
                      center: markerLatLng, // ตำแหน่งศูนย์กลางของวลกลม ในที่นี้ใช้ตำแหน่งเดียวกับ ตัว marker 
 radius: 0,
   });               
                    //  กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง    
//                        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  
                    var markerLatLng=new GGM.LatLng(obj_marker[i].latitude,obj_marker[i].longitude);    
                    my_Marker[i] = new GGM.Marker({ // สร้างตัว marker    
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง    
                        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].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(){
    $("<script/>", {  
      "type": "text/javascript",  
      src: "http://maps.google.com/maps/api/js?key=AIzaSyPdsedgkalvhbI1Fzvh7A&language=th&region=TH&v=3.2&sensor=false&callback=initialize" 
    }).appendTo("body");        
});
</script>  
 
</center>
</div>
    </div><!--/.container-->
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">เข้าสู่ระบบ</h4>
      </div>
      <div class="modal-body">
      <form action="check_login.php" method="post">
      <div id="loginbox">
      <div class="form-group">
      <label for="username">ชื่อผู้ใช้</label>
      <input name="username" type="text" class="form-control" id="username" placeholder="ใส่ชื่อผู้ใช้" required>
      </div>
      <div class="form-group">
      <label for="password">รหัสผ่าน</label>
      <input name="password" type="password" class="form-control" id="password" placeholder="ใส่รหัสผ่าน" required>
      </div>
      </div>
      
      <input type="submit" value="ล็อคอิน" class="btn btn-primary">
      </form>
      </div>
      
      <div class="modal-footer">
    
        </div>
    </div>
  </div>
</div>
 
 
 
<div class="modal fade" id="basicModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h2>สมัครสมาชิก</h2>
            </div>
            <div class="modal-body">
                <form role="form" action="save_register.php" method="post">
    <div class="form-group">
        <label for="username">ชื่อผู้ใช้</label>
        <input name="username" type="text" id="username" class="form-control" placeholder="ใส่ชื่อผู้ใช้">
    </div>
    
    <div class="form-group">
        <label for="password">รหัสผ่าน</label>
        <input name="password" type="password" id="password" class="form-control" placeholder="ใส่รหัสผ่าน">
    </div>
    
    <div class="form-group">
    <label for="name_user">ชื่อ</label>
    <input name="name_user" type="text" class="form-control" id="name_user" placeholder="ป้อนชื่อ">
    </div>
    
    <div class="form-group">
    <label for="surname">นามสกุล</label>
    <input name="surname" type="text" class="form-control" id="surname" placeholder="ป้อนนามสกุล">
    </div>
    
     <div class="form-group">
        <label for="address">ที่อยู่</label>
        <textarea id="address" class="form-control" name="address" rows="3"></textarea>
    </div>
    
    <div class="form-group">
        <label for="tel">เบอร์โทรศัพท์</label>
        <input name="tel" type="text" class="form-control" id="tel" placeholder="ป้อนเบอร์โทรศัพท์">
    </div>
    
   <div class="form-group">
        <label for="email">อีเมลล์</label>
        <input name="email" type="text" class="form-control" id="email" placeholder="ป้อนอีเมลล์">
    </div>
    
    <div class="form-group">
    <label for="position">ตำแหน่ง</label>
    <input name="position" type="text" class="form-control" id="position" placeholder="ระบุตำแหน่ง">
    </div>
    
    <div class="form-group">
    <label for="status">สถานะ</label>
    <select name="status" id="status" class="form-control">
    <option value="Expert">Expert</option>
    <option value="Member">Member</option>
    </select>  
  
</div>
<br>
<br>
 
    <button type="submit" class="btn btn-primary" value="Save"> บันทึก </button>
</form>
            </div>
            <div class="modal-footer">
                กรุณาป้อนข้อมูลให้เรียบร้อย
            </div>
        </div>
    </div> 
</div>
 
 
 
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
 
 


 



โดย:  Jsk IP: 122.154.60.xxx วันที่: 30-03-2017 เวลา: 23:33:56

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 1
ภาพที่ error


โดย:  Jsk IP: 122.154.60.xxx วันที่: 30-03-2017 เวลา: 23:36:03
 ความคิดเห็นที่ 2
<?php
require_once 'Connect.php';
$sql = "select * from $animal" ;
$dbquery = mysql_db_query($dbname,$sql);
$result = mysql_fetch_array($dbquery);
$i = 0 ;
while($result = mysql_fetch_array($dbquery)){
$data[$i] = $result["Relate"];
//echo $data[$i]."<br/>";
$i++;
}
?>

โค๊ดในส่วนนี้ error คะ 


โดย:  Jsk IP: 122.154.60.xxx วันที่: 30-03-2017 เวลา: 23:39:32
 ความคิดเห็นที่ 3
error ปกติ จริงๆ ตัว error อธิบายอู่แล้วน่ะ ว่าเกิดจากออะไร
$animal ไม่ได้ defined หรือ undefined ก็หมายถึง ไม่มีการกำหนดตัวแปรนี้ 
ก่อนเรียกใช้งานค่าตัวแปรใดๆ ต้องตรวจสอบค่าตัวแปร หรือต้องแน่ใจว่าตัวแปรนั้นมีการส่งค่ามาหรือไม่

ลองดูแนวทางเกี่ยวกับการตรวจสอบการส่งจาก คำแนะนำนี้เป็นแนวทาง

http://www.ninenik.com/forum_view_2398_1.html#comment_5574


โดย:  Ninenik IP: 1.46.202.xxx วันที่: 30-03-2017