วันอังคารที่ 3 เมษายน พ.ศ. 2555

ลองเล่นกับ Google Map API V.3 : ประยุกต์ใช้ร่วมกับ PHP และฐานข้อมูล MySQL

       หลังจากที่ได้ศึกษา Google Maps API อยู่พักนึง ทำให้รู้ว่าจะดึงข้อมูลของแผนที่ออกมาใช้ประโยชน์อะไรบ้างครับ ก็เลยลองเอามาประยุกต์ใช้กับฐานข้อมูลบ้างครับ เผื่อหลายท่านที่ได้อ่านบทความนี้จะนึกภาพการนำมาใช้งานออกครับ ถ้าเป็นเว็บร้านค้าออนไลน์แล้ว สิ่งที่เราจะบอกกับลูกค้าคือ ที่ตั้งของร้านค้าของเรานั่นเอง ไม่อยากอธิบายมากครับ มาดูโค๊ดกันเลย ผมจะใช้เทคนิค AJAX ของ jQuery มาประยุกต์ใช้ในการส่งค่าบันทึกลงฐานข้อมูลMySQLนะครับ
ผมได้สร้างเทเบิลในฐานข้อมูล เพื่อเก็บข้อมูลแผนที่ ดังนี้
CREATE TABLE `tb_mapsgoo` (
  `id_mps` int(3) NOT NULL auto_increment,
  `name_mps` varchar(100) default NULL,
  `lat_mps` varchar(20) default NULL,
  `lng_mps` varchar(20) default NULL,
  `zoom_mps` varchar(2) default NULL,
  PRIMARY KEY  (`id_mps`)
);
id_msp-> ไอดีของแผนที่ ผมกำหนดให้เป็น PK
name_mps->ชื่อสถานที่
lat_mps->ละติจูด
lng_mps->ลองติจูด
zoom_mps->Zoom Level ในแผนที่ของ Google
ผมได้สร้างไฟล์ขึ้นมา 3 ไฟล์ คือ google-map-api.php,savemaps.php,showmaps.php
1.google-map-api.php -> เป็นไฟล์ที่แสดงแผนทีให้เราเคลื่อนย้ายหมุดไปยังตำแหน่งที่ต้องการ แล้วบันทึกข้อมูลแผนที่ลงฐานข้อมูลครับ ให้พิมพ์Codeดังนี้
<!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>แผนที่ Goo</title>
<style type="text/css">
body{
 font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&language=th"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function myMaps() {
var mapsGoo=google.maps;
var Position=new mapsGoo.LatLng(13.723419,100.476232);//ละติจูด,ลองติจูด เริ่มต้น โดยผมให้เริ่มต้นที่ กรุงเตบ
var myOptions = {
    center:Position,//ตำแหน่งแสดงแผนที่เริ่มต้น
 scrollwheel: false,
    zoom:8,//ซูมเริ่มต้น คือ 8
    mapTypeId: mapsGoo.MapTypeId.ROADMAP //ชนิดของแผนที่
    };
var map = new mapsGoo.Map(document.getElementById("map_canvas"),myOptions);
//var infowindow = new mapsGoo.InfoWindow();
var marker = new mapsGoo.Marker({//เรียกเมธอดMarker(ปักหมุด)
    position: Position,
 draggable:true,
    title:"คลิกแล้วเคลื่อนย้ายหมุดไปยังตำแหน่งที่ต้องการ"
 });
var Posi=marker.getPosition();//เลือกเมธอดแสดงตำแหน่งของตัวปักหมุด
myMaps_locat(Posi.lat(),Posi.lng());
marker.setMap(map);//แสดงตัวปักหมุดโลด!!
//ตรวจจับเหตุการณ์ต่างๆ ที่เกิดใน google maps
mapsGoo.event.addListener(marker, 'dragend', function(ev) {//ย้ายหมุด
 var location =ev.latLng;
 myMaps_locat(location.lat(),location.lng());
});
mapsGoo.event.addListener(marker, 'click', function(ev) {//คลิกที่หมุด
 var location =ev.latLng;
 myMaps_locat(location.lat(),location.lng());
});
mapsGoo.event.addListener(map,'zoom_changed',function(ev){//ซูมแผนที่
 zoomLevel = map.getZoom();//เรียกเมธอด getZoom จะได้ค่าZoomที่เป็นตัวเลข
 $('#mapsZoom').val(zoomLevel);//เอาค่า Zoom Level ไปแสดงที่ Tag HTML ที่มีแอตทริบิวต์ id ชื่อ mapsZoom
});
}
function myMaps_locat(lat,lng){
 $('#mapsLat').val(lat);//เอาค่าละติจูดไปแสดงที่ Tag HTML ที่มีแอตทริบิวต์ id ชื่อ mapsLat
 $('#mapsLng').val(lng);//เอาค่าลองติจูดไปแสดงที่ Tag HTML ที่มีแอตทริบิวต์ id ชื่อ mapsLng
}
$.fn.myMaps_submit=function(){
 $(this).bind('submit', function(event) {
  if($('#locat_name').val()==''){
   alert('ระบุชื่อสถานที่ด้วยนะจ๊ะ!!');
  }else{
 $.ajax({
        url: $(this).attr('action'),
        type: "POST",
        data: $(this).serialize(),
        dataType: "html",
        beforeSend: function(){
            $('#loadding').html('<img src="wait.gif" />');
        },          
        success: function(data) {
            $('#show_locat').html(data);
   $('#loadding').html('');
        }
    });
 }
return false;
 });
};
$(document).ready(function(){
 myMaps();//แสดงแผนที่
 $('#maps_form').myMaps_submit();//ตรวจสอบการSubmit Form
});
</script>
</head>
<body>
<table width="660" border="0" align="center" cellpadding="0" cellspacing="3">
  <tr>
    <td> <div id="map_canvas" style="width:650px; height:450px"></div>

<form action="savemaps.php" method="post" id="maps_form">
<table width="250" border="0" align="center" cellpadding="3" cellspacing="0" style="border:1px dashed #999;background:#E0E0E0;">
  <tr>
    <td>ชื่อสถานที่</td>
    <td>
      <input type="text" name="locat_name" id="locat_name" />
    </td>
  </tr>
  <tr>
    <td> </td>
    <td><input name="bt_savemaps" id="bt_savemaps" type="submit" value="บันทึกข้อมูล" /> <span id="loadding"></span>
      <input type="hidden" name="mapsLat" id="mapsLat" />
      <input type="hidden" name="mapsLng" id="mapsLng" />
      <input type="hidden" name="mapsZoom" id="mapsZoom" value="8" /></td>
  </tr>
</table>
</form>
<div id="show_locat"></div>
</td>
  </tr>
</table>
  </body>
</html>
โดยเราจะใช้ เทคนิค AJAX ของ jQuery ในไฟล์นี้ เมื่อส่งค่าไปบันทึกลงฐานข้อมูลแล้ว จากนั้นให้นำค่าแผนที่ ที่บันทึกลงฐานข้อมูลกลับมาแสดงครับ ผลลัพธุ์ของไฟล์นี้คือ
2. ไฟล์ savemaps.php ->รับค่าhttp request จากไฟล์ mymaps.php จะได้ค่ามา 4 ค่าคือ ละติจูด($_POST['mapsLat']),ลองติจูด($_POST[‘mapsLng’]) ,Zoom Level ($_POST['mapsZoom']) และ ชื่อสถานที่ ($_POST['locat_name'])
แล้วนำค่าบันทึกลงฐานข้อมูล และส่งผลลัพธุ์กลับไปแสดงที่ไฟล์ mymaps.php ให้พิมพ์Codeตามนี้ครับ
<?php
$conn=mysql_connect('localhost','root','root');
mysql_select_db('db_exshop1',$conn);
mysql_query('SET NAMES utf8');
if(isset($_POST['locat_name'])){
$locatName=$_POST['locat_name'];
$lat=$_POST['mapsLat'];
$lng=$_POST['mapsLng'];
$mapsZoom=$_POST['mapsZoom'];
//echo $locatName;
mysql_query("INSERT INTO tb_mapsgoo(name_mps,lat_mps,lng_mps,zoom_mps) VALUES('$locatName','$lat','$lng','$mapsZoom')");
}
?>
<table width="100%" border="0" cellpadding="3" cellspacing="0" style="border:1px solid #CCC;background-color:#E4E4E4;">
  <tr>
    <td align="center"><strong>ชื่อสถานที่</strong></td>
    <td align="center"><strong>ละติจูด</strong></td>
    <td align="center"><strong>ลองติจูด</strong></td>
    <td align="center"><strong>ซูม</strong></td>
  </tr>
  <?php 
  $rsMapsGoo=mysql_query('SELECT * FROM tb_mapsgoo ORDER BY name_mps ASC');
  while($showMapsGoo=mysql_fetch_array($rsMapsGoo)){
  ?>
  <tr>
    <td><a href="showmaps.php?mapsId=<?=$showMapsGoo['id_mps']?>" target="_blank"><?=$showMapsGoo['name_mps']?></a></td>
    <td align="center"><?=$showMapsGoo['lat_mps']?></td>
    <td align="center"><?=$showMapsGoo['lng_mps']?></td>
    <td align="center"><?=$showMapsGoo['zoom_mps']?></td>
  </tr>
  <?php } mysql_close($conn);?>
</table>
3.showmaps.php->เป็นไฟล์แสดงแผนที่ ที่เราได้บันทึกลงฐานข้อมูลครับ ให้พิมพ์Codeตามนี้
<?php
$conn=mysql_connect('localhost','root','root');
mysql_select_db('db_exshop1',$conn);
mysql_query('SET NAMES utf8');
if($_GET['mapsId']!=''){
$showMaps=mysql_fetch_array(mysql_query('SELECT * FROM tb_mapsgoo WHERE id_mps='.$_GET['mapsId']));
$name=$showMaps['name_mps'];
$lat=$showMaps['lat_mps'];
$lng=$showMaps['lng_mps'];
$zoom=$showMaps['zoom_mps'];
}else{
header('Location:google-map-api.php'); 
exit();
}
?>
<!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" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=th"></script>
<script type="text/javascript" src="jquery.js"></script>
<title>แสดงแผนที่</title>
<script type="text/javascript">
var name='<?=$name?>';
var lat='<?=$lat?>';
var lng='<?=$lng?>';
var zoom='<?=$zoom?>';
function myMaps(){
var mapsGoo=google.maps;
var Position=new mapsGoo.LatLng(lat,lng);
var myOptions = {
    center:Position,
    zoom:parseInt(zoom),
    mapTypeId: mapsGoo.MapTypeId.ROADMAP //ชนิดของแผนที่
    };
var map = new mapsGoo.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new mapsGoo.InfoWindow();
var marker = new mapsGoo.Marker({//เรียกเมธอดMarker(หมุด)
    position: Position,
});
marker.setMap(map);
infowindow.setContent(name);
infowindow.open(map, marker);
}
$(document).ready(function(){
 myMaps();
});
</script>
<style type="text/css">
body{
font-size:12px;
color:#333; 
}
</style>
</head>
<body>
<table width="750" border="0" align="center" cellpadding="5" cellspacing="0">
  <tr>
    <td bgcolor="#E1E1E1"><strong>ชื่อสถานที่ :</strong></td>
    <td bgcolor="#E1E1E1"><h1><?=$name?></h1></td>
  </tr>
  <tr>
    <td bgcolor="#E1E1E1"><strong>แสดงผลปกติ</strong></td>
    <td bgcolor="#E1E1E1"><div id="map_canvas" style="width:500px; height:400px"></div></td>
  </tr>
  <tr>
    <td bgcolor="#EEEEEE"><strong>แสดงผลแบบรูปภาพ</strong></td>
    <td bgcolor="#EEEEEE"><img src="http://maps.googleapis.com/maps/api/staticmap?center=<?=$lat?>,<?=$lng?>&zoom=<?=$zoom?>&size=500x400&maptype=roadmap&markers=<?=$lat?>,<?=$lng?>&sensor=false&language=th&region=th" /></td>
  </tr>
</table>
</body>
</html>
<?php mysql_close($conn);?>
 ไฟล์ showmaps.php จะแสดงแผนที่ตามค่า $_GET[mapsId] ซึ่งเป็นค่าที่จะแมทซ์กับฟิลด์ id_mps ในฐานข้อมูล เราจะให้แสดงแผนที่แบบปกติและแสดงผลแบบรูปภาพครับ
ลองเอาCodeที่ผมสอนในบทความนี้ นำไปประยุกต์กับเว็บไซต์ของคุณดูครับ ถ้าติดปัญหาตรงไหน สามารถสอบถามผมได้ จากช่องCommentด้านล่างได้เลยครับ ยินดีที่จะตอบข้อซักถามครับถ้ามีเวลาครับ

62 ความคิดเห็น :

  1. มันแสดงไม่ออกอ่ะ

    เป็นภาษาต่างดาวเราต้องแก้ตรงไหนหรอ

    ตอบลบ
    คำตอบ
    1. สงสัย charset ฐานข้อมูลของน้องเป็น tis620 ครับ
      โค๊ดตัวอย่างในบทความนี้เป็น utf8 ครับ
      วิธีแก้ไข
      ไฟล์ mymaps.php สังเกตุคำสั่ง
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
      ลองเปลี่ยนเป็น
      <meta http-equiv="Content-Type" content="text/html; charset=tis-620" />
      หรือ
      <meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
      #################################################
      ไฟล์ savemaps.php และ ไฟล์ showmaps.php
      ให้เปลี่ยนคำสั่ง mysql_query('SET NAMES utf8'); ให้เป็น mysql_query('SET NAMES tis620'); ครับ

      ลบ
    2. หมายความว่า จุดไหนที่เป็น utf8 ให้เปลี่ยนเป็น tis620 ให้หมด
      หรือ น้องจะเปลี่ยนไฟล์เว็บและฐานข้อมูลของน้องใหม่ ให้เป็น utf8 ทั้งหมดก็ได้ครับ

      ลบ
  2. ALTER TABLE `tb_mapsgoo` CHANGE `id_mps` `id_mps` INT( 3 ) NOT NULL AUTO_INCREMENT ,
    CHANGE `name_mps` `name_mps` VARCHAR( 100 ) CHARACTER SET utf8 COLLATE utf8_bin NULL ,
    CHANGE `lat_mps` `lat_mps` VARCHAR( 20 ) CHARACTER SET utf8 COLLATE utf8_bin NULL ,
    CHANGE `lng_mps` `lng_mps` VARCHAR( 20 ) CHARACTER SET utf8 COLLATE utf8_bin NULL ,
    CHANGE `zoom_mps` `zoom_mps` VARCHAR( 2 ) CHARACTER SET utf8 COLLATE utf8_bin NULL


    เหมือนจะเป็น utf8 นะค่ะ

    ตอบลบ
    คำตอบ
    1. ทำอย่างนี้ก็ได้ครับ

      ลบ
    2. แล้วต้องแก้ตรงไหนอีกไหม๊ค่ะตัวโค้ดอะ

      ลบ
    3. ยังไม่ได้หรอครับ ลองคำสั่งนี้ดูครับ
      ALTER DATABASE `ชื่อDatabaseของคุณ(ไม่ใช่ชื่อเทเบิลนะ)` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci

      และเปลี่ยนคำสั่ง ALTER TABLE ข้างบน
      จาก CHARACTER SET utf8 COLLATE utf8_bin เป็น CHARACTER SET utf8 COLLATE utf8_general_ci

      ลบ
    4. ถ้ายังไม่ได้ก็ อ่านบทความนี้ดูครับ
      http://www.thaicreate.com/community/php-mysql-thai.html

      ลบ
  3. รูปแผ่นที่มันไม่ขึ้นอะค่ะ

    เราต้องแก้ไขอย่างไงค่ะ

    ตอบลบ
    คำตอบ
    1. ระบุพาธและกำหนดค่าParameter Requestให้ถูกครับ ประมาณนี้
      <img src="http://maps.googleapis.com/maps/api/staticmap?center=<?=$lat?>,<?=$lng?>&zoom=<?=$zoom?>&size=500x400&maptype=roadmap&markers=<?=$lat?>,<?=$lng?>&sensor=false&language=th&region=th" />
      ตรวจตัวแปร $lat,$lng,$zoom ที่ส่งไปด้วยครับว่ามีค่าอยู่หรือป่าว

      ลบ
  4. ไม่ระบุชื่อ10 เมษายน 2555 05:07

    มันไม่ขึ้นรูปแผนที่อ่าคะ - -'

    ตอบลบ
  5. ไม่ระบุชื่อ10 เมษายน 2555 06:01

    google-map-api.php นี่ต้องสร้างอะไรอ่าคะ ?

    ตอบลบ
    คำตอบ
    1. ตอนนี้ผมแก้ไขโค๊ดในไฟล์ google-map-api.php ให้แล้วนะครับ
      ปัญหาเกิดจาก ผมได้แปลง Tag html ให้เป็น Special Charector แต่แปลงผิดน่ะครับ โค๊ดที่ได้ก็เลยไม่สมบูรณ์

      ลบ
  6. ไม่ระบุชื่อ13 เมษายน 2555 22:38

    แล้ว google-map-api.php มันยุไหนละคับ

    ตอบลบ
  7. ไม่ระบุชื่อ23 เมษายน 2555 16:01

    ผมลองทำตามดูแล้ว แผนที่มันไม่ขึ้นครับ

    ตอบลบ
    คำตอบ
    1. ลองตรวจเช็คการเรียกไฟล์ jquery ดูนะครับ ว่าระบุพาธถูกหรือป่าวหรือมีไฟล์ jquery อยู่ในเครื่องหรือป่าว
      ผมได้ลองเช็คโค๊ดดูแล้ว ก็ไม่เจอปัญหาอะไรเลยนะครับ

      ลบ
  8. ***หมายเหตุ การส่งข้อมูลไปเก็บทีื่่ Mysql และการเรียกใช้ข้อมูลจาก Mysql ที่เป็นภาษาไทยไม่ให้ภาษาผิดเพี้ยนให้ใส่tagคำสั่ง
    mysql_query("SET NAMES UTF8",$con); ลงไปหลังคำสั่งเชื่อมต่อ mysql_connect
    ****และต้องกำหนดตัวอักษรของฐานข้อมูลเป็นประเภท UTF8 เท้านั้น(จะเป็นUTF8แบบใหนก็ได้)

    ตอบลบ
  9. เห็นงานแล้วสนใจครับ อยากจะสอบถามเกี่ยวกับว่า ถ้าเราเก็บ ละกับลอง แล้วใน ฐานข้อมูลของ user แล้วเราจะให้คนห้าเส้นทางที่ใกล้ที่สุด ต้องมีทริกอะไรไหมครับ แบบว่า จะไปโรงบาล หรืออนามัยที่ใกล้ที่สุด หนะครับ

    ตอบลบ
  10. @Sodiac
    ลองศึกษาจาก https://developers.google.com/maps/documentation/javascript/directions
    ผมเห็นอยู่ตัวอย่างนึงที่สามารถประยุกต์ใช้ค้นหาเส้นทางที่ใกล้ที่สุดคือ
    https://developers.google.com/maps/documentation/javascript/examples/directions-simple
    หรือดูตัวอย่างแบบไทยๆ http://www.ninenik.com/content.php?arti_id=430

    ตอบลบ
  11. ไม่ระบุชื่อ26 กรกฎาคม 2555 22:14

    v3 นี่มันไม่ต้องมี api key แล้วใช่มั้ยคะ งั้นเวลาอัพขึ้นโฮส เราก็ไม่ต้องเปลี่ยนแปลงในส่วนของ api key แล้วใช่มั้ยคะ

    ตอบลบ
    คำตอบ
    1. ถ้าใช้งานบนโฮสจริงๆต้องใส่ api key ด้วยนะครับ มันอนุญาตให้รันได้เฉพาะในlocalhostโดยไม่ต้องใม่ api keyครับ
      https://developers.google.com/maps/documentation/javascript/tutorial

      ลบ
  12. ไม่ระบุชื่อ26 กรกฎาคม 2555 22:32

    ขอรบกวนถามนะคะ ^^
    -พอจะมี ฟังก์ชั่นไหน ออกแบบแผนที่บ้างมั้ยค่ะ หนูเห็นมีตัวหนึ่ง create polyline กับ Polygons ไม่แน่ใจว่ามันเอามาใช้ได้หรือเปล่านะคะ แผนที่ต่างจังหวัด มันจะโล่ง ๆ เหมือนตัวอย่างอ่ะค่ะ หนูเลยอยาก วาดใหม่ เพราะมันต้องใช้เส้นทางค่อนข้างละเอียด สำหรับวางไอคอน พอทำได้บ้างแล้วค่ะ แต่

    -ก็ติดปัญหาอยู่ที่ กำหนดพิกัดให้ไอคอนไป แต่เวลาแสดงมันจะไม่ตรงจุดเลยค่ะ มันจะ เลื่อน ไป ตรงนี้มีวิธีแก้มั้ยคะ

    ชอบเว็บนี้จังค่ะ คุณคอมเม้น code ละเอียดดี เข้าใจง่ายด้วย ขอบคุณนะคะ

    ตอบลบ
    คำตอบ
    1. ผมไม่รู้จะอธิบายยังไงครับ ^_^'' เพราะยังไม่ได้ลองเล่นเลยครับ เวลาสร้างพิกัดโดยการปักหมุด ควรที่จะซูมแผนที่
      ให้ขยายใหญ่ให้มากที่สุดก่อนครับ แล้วจึงค่อยปักหมุดไปยังตำแหน่งที่ต้องการ จะทำให้ได้พิกัดที่แม่นยำ ไม่คลาดเคลื่อนครับ

      ลบ
  13. รบกวนถามครับ แสดงผลปกติไม่ขึ้น แต่แสดงผลแบบรูปภาพขึ้นครับแก้ไขตรงไหนครับรบกวนที

    ตอบลบ
    คำตอบ
    1. ไม่ระบุชื่อ27 กรกฎาคม 2555 10:40

      น่าจะเป็นที่การเรียกไฟล์ jquery.js นะครับ อาจจะระบุพาธไม่ถูกต้อง และควรใช้เวอร์ชั่นล่าสุดด้วยครับ

      ลบ
  14. ไม่ระบุชื่อ12 มกราคม 2556 03:24

    คนโพสกระทู้นี้ ถ้าว่างตอบกลับมาทีนะครับ

    ตอบลบ
    คำตอบ
    1. ถามมาได้เลยครับ ^_^

      ลบ
  15. โทษนะครับพี่ PHPLand ตอนนี้ ผมกะลังทำโปรเจคเรื่องนี้ อยู่ ต้องการ ทำแบบ ว่า ไห้ User Brows รูปจากที่อื่นแล้วใช้ GPRS หาค่า พิกัดจาก Google MAP API และ สามารถนำมาบันทึก เพื่อหาที่อยู่ และ ทางไป ด้วยครับ ขอบคุนครับบบ ... รบกวนพี่กลับมาตอบผมทีนะครับ

    ตอบลบ
    คำตอบ
    1. หมายถึงหาพิกัดจากรูปภาพหรือป่าวครับ Web App หรือ Mobile App ครับ

      ลบ
    2. ช่าย แล้ว ครับผม แต่ ผม ทำ Upload image ใน php นะครับ . T^T

      ลบ
    3. ถ้าเป็น php ต้องทำตามในบทความนี้ครับ ไม่สามารถหาพิกัด GPRS ได้ครับ จะต้องกรอกพิกัดเองครับ ว่ารูปนี้อยู่ในตำแหน่งไหนของแผนที่

      ลบ
    4. คือ ผม เอารูปภาพ ที่มี พิกัด มาแล้ว แต่ ผมเอาพิกัดจากในรูป ภาพ ออกมาไม่ได้ ครับบ ><"

      เสดแล้วพอได้พิกัดแล้ว จาต้องแปลงเปนพิกัด Lat . lng ของ Google map เพื่อทำการค้นหาจากในแมพอีกทีอะครับบบ รบบกวนกูรู ด้วยย T^T

      ลบ
    5. มันดึงพิกัดจากรูปไม่ได้อยู่แล้วนิครับ ช่วยส่งรูปภาพที่มีพิกัดมาให้ผมดูหน่อยได้ไหมครับ
      pjman007แอ๊ดhotmail.com

      ลบ
    6. ok ครับบบ เดวผม ส่งไป ทาง hotmail นะ พี่มีเฟสไหมครับ แอด มาทีครับบ ชื่อไรบอกผมด้วยย T^T ขอบคุนมากๆ เลยครับ จากใจ .

      ลบ
  16. ไม่ระบุชื่อ26 กุมภาพันธ์ 2556 18:12

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

    ตอบลบ
    คำตอบ
    1. ลองดูบทความนี้อาจจะช่วยน้องได้ครับ -> http://www.ninenik.com/DirectionsService_DirectionsRenderer_%E0%B8%84%E0%B9%89%E0%B8%99%E0%B8%AB%E0%B8%B2_%E0%B9%81%E0%B8%A5%E0%B8%B0%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87_%E0%B9%80%E0%B8%AA%E0%B9%89%E0%B8%99%E0%B8%97%E0%B8%B2%E0%B8%87%E0%B9%83%E0%B8%99_google_map_-340.html

      ลบ
  17. ไม่ระบุชื่อ13 พฤษภาคม 2556 23:29

    ทำไมพอมันแสดงผลใน Fancybox แผนที่แสดงแค่ตรงมุมบนซ้าย แสดงแค่เล็กๆ เองอ่ะค่ะ ทั้งๆทีกำหนดความกว้างความสูงแล้วนะคะ ต้องกำหนดตรงไหนเพิ่มอีกรึเปล่าคะ ช่วยตอบทีนะคะ

    ตอบลบ
    คำตอบ
    1. ไม่ระบุชื่อ14 พฤษภาคม 2556 00:34

      แสดงผลได้แล้วนะคะ สำหรับคนที่เข้ามาแล้วอาจติดปัญหาเดียวกัน แค่เพิ่มโค้ดนี้เค้าไป
      $(document).ready(function () {
      setTimeout(
      function() {
      myMaps()

      }, 1000);
      });

      ลบ
  18. สวัสดีครับ ขอรบกวนถามอีกสักรอบนะครับ พอดีผมนำโค๊ดของพี่ไปประยุกต์แล้ว เบื้องต้น ลอง coppy code ทุกอย่างตามขั้นตอน มีเปลี่ยน เพียงแค่ ชื่อ DB เป็น numap และ Position ในไฟล์ google-map-api.php เท่านั้นครับ ทุกอย่างเรียบร้อยดีครับ แต่มีปัญหาที่มันไม่บันทึกลงฐานข้อมูลเลยครับ Rows = 0 อยู่เลยครับ http://pastebin.com/LEKNjvHq <<อันนี้โค้ดหน้า savemaps ขอบคุณล่วงหน้าครับ

    ตอบลบ
    คำตอบ
    1. ปรับ id ที่เป็น PK ให้เป็น auto หรือยังครับ
      ดูปัญหาให้ใช้คำสั่ง
      mysql_query("INSERT INTO tb_mapsgoo(name_mps,lat_mps,lng_mps,zoom_mps) or die(mysql_error());

      ลบ
    2. อร๊ากกก ได้แล้วครับผม ขอบคุณมากๆ ครับ ปัญหาคือ Encoding (เคาะกะโหลกตัวเอง)

      ลบ
    3. ด้วยความยินดีครับ ^^

      ลบ
    4. ผมมีปัญหากับการโชว์ชื่อสถานที่ในกรอบบนพิน มันเหมือนโดนscrollทับอยู่ เลยเห็นไม่เต็ม ต้องแก้ยังไงครับ

      ลบ
  19. ผมมีปัญกับการโชว์ชื่อสถานที่ในกรอบบนพิน มันเหมือนโดนscrollทับอยู่ เลยเห็นไม่เต็ม ต้องแก้ยังไงครับ

    ตอบลบ
  20. ลองทำตามนี้ดูครับ
    http://stackoverflow.com/questions/12115183/size-of-infowindow-in-google-maps-api-v3-what-is-the-right-solution
    ไม่รู้ว่าจะแก้ได้หรือป่าวนะ เพราะผมยังไม่เคยเจอปัญหานี้เลย
    โดยเปลี่ยนคำสั่ง
    var infowindow = new mapsGoo.InfoWindow();
    เป็น
    var infowindow = new mapsGoo.InfoWindow({ maxWidth: 320 });
    320 คือขนาด สามารถกำหนดเพิ่มลดจากตรงนี้ได้เลย
    ศึกษาเพิ่มเติมจาก -> https://developers.google.com/maps/documentation/javascript/reference?hl=th&csw=1#InfoWindowOptions

    ตอบลบ
  21. ไม่ระบุชื่อ15 พฤศจิกายน 2556 13:06

    พอดีสนใจ Api Google Map อยู่ครับ
    แต่ไม่ค่อยเข้าใจเกี่ยวกับ jQuery เลย
    ถ้าเราไม่เรียกใช้ jQuery จะแสดง Map ได้ปกติหรือป่าวครับโดยใช้ Code จากตัวอย่างนี้

    ตอบลบ
  22. ไม่ระบุชื่อ15 พฤศจิกายน 2556 15:34

    "http://code.jquery.com/jquery.js" ใช้ url นี้ ในการเรียกใช้ได้หรือป่าวกับ Code API Map

    ตอบลบ
  23. ขอโทษนะครับเจ้าของบล็อกใช้เครื่องมืออะไรพัฒนาครับ

    ตอบลบ
  24. คำตอบ
    1. ฟหกด่าสว6 ธันวาคม 2556 15:43

      ลองเปลี่ยน script type="text/javascript" src="jquery.js"
      เป็นดูครับ
      script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"

      ลบ
  25. มือใหม่ เริ่มต้น จะต้องสร้างฐานข้อมูลอะไรก่อนครับ

    ตอบลบ
    คำตอบ
    1. ศึกษาจากบทความนี้ครับ >> http://php-for-ecommerce.blogspot.com/2010/09/mysql-phpmyadmin.html

      ลบ
  26. ไฟล์ jquery.js สร้างยังไง หรือ โหลดจากที่ไหน เรียนท่านผู้รู้ช่วยทีครับ

    ตอบลบ
  27. ต้องไปดาวน์โหลดมาจากเว็บ jquery.com เลือกเวอร์ชั่น 1.11.1 ครับ
    หรือใช้คำสั่ง
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    แทนคำสั่ง
    <script type="text/javascript" src="jquery.js"></script> แต่ต้องเชื่อมต่อเนตทุกครั้งนะครับ

    ตอบลบ
  28. ไม่ระบุชื่อ14 สิงหาคม 2557 20:02

    Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in C:\AppServ\www\test\savemaps.php on line 23

    พอเซพแล้วขึ้นแบบนี้อะครับ

    ตอบลบ
    คำตอบ
    1. คำสั่งคิวรี่จากดาต้าเบสผิดครับ ให้เช็คจากคำสั่งนี้ครับ ว่าค่าตรงกับเทเบิลของเราหรือป่าว
      $rsMapsGoo=mysql_query('SELECT * FROM tb_mapsgoo ORDER BY name_mps ASC');
      ลองแก้เป็น
      $rsMapsGoo=mysql_query('SELECT * FROM tb_mapsgoo ORDER BY name_mps ASC') or die(mysql_error());
      เพื่อให้ mysql แจ้งข้อผิดพลาดให้ทราบครับ

      ลบ
    2. ต้องสร้างดาต้าเบสกับเทเบิลก่อนครับ ในตัวอย่างผมสร้างดาต้าเบสชื่อ db_exshop1 และเทเบิลชื่อ tb_mapsgoo ครับ

      ลบ
  29. ไม่ระบุชื่อ23 กุมภาพันธ์ 2558 15:00

    mapcanvas ไม่แสดงครับ ผมต้องแก้อย่างไร

    ตอบลบ
  30. สวัสดีจ้า รบกวนด้วยนะคะ พอดีกะลังทำโปรเจค แสดงเส้นทางรถโดยสารในโคราชอ่ะค่ะ ใช้ PHP และฐานข้อมูล MyAdmin ไม่รู้จะเริ่มยังไง

    ตอบลบ
  31. มีคำสั่งนำรูปจาก google map มาใข้ไหมครับนอกจากการใช้โปรแกรมเพื่อนำมา cap ช่วยเสริม
    ขอความรู้หน่อยครับ

    ตอบลบ
  32. พอดีกำลังศึกษาเรื่องนี้อยู่ค่ะ เลยลองก็อปโค้ดมาสร้างแล้วขึ้น
    "อ๊ะ! มีบางอย่างผิดพลาด
    หน้านี้ไม่ได้โหลด Google Maps อย่างถูกต้อง ดูคอนโซล JavaScript สำหรับรายละเอียดทางเทคนิค"
    เป็นตั้งแต่ไฟล์google-map-api ต้องแก้ยังไงค่ะ

    ตอบลบ
  33. พอลองบันทึกข้อมูลแล้วมันขึ้นแบบนี้ค่ะ แก้ยังไงคะ
    Fatal error: Uncaught Error: Call to undefined function mysql_connect() in C:\xampp\htdocs\API\savemaps.php:2 Stack trace: #0 {main} thrown in C:\xampp\htdocs\API\savemaps.php on line 2

    ตอบลบ