ขอคำแนะนำเกี่ยวกับ google map หน่อยค่ะ

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

ขอคำแนะนำเกี่ยวกับ google map หน่อยค่ะ

คือ อยากทราบว่าจะทำยังไงให้พวกแต่ละจังหวัดที่ต้องการจะโชว์อ่ะค่ะ ให้อยู่ข้างๆ google map รบกวนแนะนำหน่อยนะค่ะ ไม่ค่อยรู้เรื่อง map เท่าไหร่เลยค่ะ

Chickenkook 171.96.177.xxx 04-12-2014 20:01:00

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

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

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

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

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

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ดูเป็นแนวทาง

แสดงข้อมูลตัวเลือก ด้านข้าง google map กับการใช้งาน event.trigger

https://www.ninenik.com/content.php?arti_id=350 via @ninenik

หรือดูเกี่ยวกับแผนที่ google map ทั้งหมด ตามลิ้งค์นี้

https://www.ninenik.com/google_search.php?tags=google map

ninenik 1.46.147.xxx 04-12-2014

ความคิดเห็นที่ 2

คือไม่ค่อยเข้าใจเท่าไหร่อ่ะคะ ว่า ไฟล์นี้ genMarker.php ไปเอามาจากไหนค่ะ มันต้องเริ่มตั้งแต่ต้นเลยรึเปล่าค่ะ หรือเริ่มตรงไหนค่ะ รบกวนด้วยนะ พอดีมือใหม่มากอ่ะค่ะ ไม่ค่อยเข้าใจเท่าไหร่ค่ะ ต้องขอโทดด้วยนะค่ะ

chickenkook 171.96.177.xxx 04-12-2014 22:20

ความคิดเห็นที่ 3

สร้างไฟล์ get_marker.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);  
// ส่วนติดต่อกับฐานข้อมูล
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'],
        "zoom"=>$rs['province_zoom']
	);	
}
$json= json_encode($json_data);
echo $json;
?>

ปรับเปลี่ยนชื่อและฐานข้อมูลตามต้องการ ถ้าต้องการฐานข้อมูลจังหวัด และพิกัด
ในประเทศทไย ดูได้ที่

ฐานข้อมูลจังหวัด และพิกัด ดึงข้อมูลจาก google map

https://www.ninenik.com/content.php?arti_id=454 via @ninenik

ค่าในส่วนต่อไปนี้เพิ่ม ลบ ได้ตามต้องการ หากมีการนับไปประยุกต์ เช่น อาจมีแค่นี้ก็ได้

        "province_id"=>$rs['province_id'],
        "province_name"=>$rs['province_name'],
        "latitude"=>$rs['province_lat'],
        "longitude"=>$rs['province_lon'],

ต่อไปสร้างไฟล์ ดึงข้อมูลมาแสดงด้านข่าง พร้อมแผนที่ เช่นชื่อไฟล์ google_map_side_navi.php

<!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 {   
        position:relative;  
        float:left;  
        top:0px;  
        width:450px;  
        height:400px;  
    /*  margin:auto;*/  
    }  
    /* css สำหรับ div คลุม google map อีกที */  
    #contain_map {  
        position:relative;  
        width:600px;  
        height:400px;  
        margin:auto;  
        margin-top:50px;  
        overflow:hidden;  
    /*  background-color:#FC6;*/  
    }  
    /* บรรทัดต่อจากนี้เป็น css กำหนดการแสดงในส่วน sidebar หรือแถบข้าง */  
    #side_bar{  
        position:relative;  
        float:left;  
        width:150px;  
        height:418px;  
        background-color:#000;  
        overflow:auto;  
    }  
    /* ส่วน css สำหรับกำหนดการแสดงของ ul ใน sidebar */  
    #navigator_link{  
        position:relative;  
        list-style:none;  
        padding:0px;  
        padding-bottom:10px;  
        left:10px;  
    }  
    /* ส่วน css กำหนดสีและรูปแบบลิ้งค์ ใน sidebar */  
    #navigator_link li a{  
        text-decoration:none;  
        color:#FFF;   
    }  
    /* ส่วน css กำหนดให้ข้อความใน li เยื้องเข้าไป 5 pixel */  
    #navigator_link li{  
        text-indent:5px;  
    }  
    /* ส่วน css สีพื้นหลังของ li เมื่อ mouse over */  
    #navigator_link li:hover{  
        background-color:#CCC;    
    }  
    /* ส่วน css สีของลิ้งค์ เมื่อ mouse over */  
    #navigator_link li:hover a{  
        color:#000;  
    }  
    </style> 
</head>
<body>
  
  <br>
   <div style="margin:auto:width:80%;">
   
<div id="contain_map">  
  <div id="map_canvas"></div>  
  <div id="side_bar">  
        <ul id="navigator_link">  
        </ul>  
  </div>  
</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 infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่  
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด      

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; // เก็บค่าไว้ในตัวแปร ไว้ใช้งาน
         $.each(obj_marker,function(i,k){  // วนลูปแสดงการปักหมุด
                 
                        // ส่วนสำหรับสร้างลิ้งค์ใน sidebar  
                    var navi_link="<li><a href='javascript:showInfo("+i+")'>"+obj_marker[i].province_name+"</a></li>";  
                    $("#navigator_link").append(navi_link);     // นำลิ้สรายการ พร้อมลิ้งค์ไปแสดงใน sidebar     
             
                    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].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 ที่เปิดไว้อ้างอิงใช้งาน  
                    });                                
                
         });              
    });  
    

  
}  
// ส่วนของฟังก์ชันที่เรียกใช้งานจากลิ้งค์ เพื่อแสดง infowindow  
function showInfo(i){ // ส่งค่า  i  คือ index ของตัว marker แต่ละตัวในแผนที่  
    //  เมื่อคลิกจากลิ้งค์ ให้ตัว marker ในแผนที่นั้นๆ ถูกคลิกด้วย  
    GGM.event.trigger(my_Marker[i],"click");   
}        
$(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&sensor=false&language=th&callback=initialize"  
    }).appendTo("body");      
});  
</script>              
</body>
</html>

ตัวอย่าง

ninenik 1.47.82.xxx 05-12-2014

ความคิดเห็นที่ 4

ขอบคุณมากเลยนะค่ะ เข้าใจขึ้นเยอะมากเลยค่ะ : ) แล้วจะมาถามใหม่นะค่ะ

chickenkook 171.96.177.xxx 05-12-2014 12:22

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน