เกี่ยวกับการฝังแผนที่ของ google maps ค่ะ

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

เกี่ยวกับการฝังแผนที่ของ google maps ค่ะ

ตอนนี้ทำโค้ดเกี่ยวกับแผนที่ค่ะ แล้วต้องฝัง marker ลงสถานที่ต่างๆเอง อยากให้ infowindow ที่แสดงเป็นของเราเอง
อยากรู้วิธีที่จะปิด infowindow ของ google maps ค่ะ

ไม่รู้ว่าจะปิดได้มั้ย

Bpsweett 12-02-2015 22:27:13

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

ขึ้นกับโค้ดเป็นแบบไหน ปกติถ้าไม่ต้องการเรียกใช้งาน infowindow ของ google map
เราก็ปิดการใช้งานส่วนนั้นไป เช่น สมมติ เราต้องการใช้งาน fancybox แทน infowndow

* ดัดแปลงจากเนื้อหา

google map แสดงจำนวน marker ตามเงื่อนไข การ zoom

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

https://www.ninenik.com/forum_view_1394_1.html

ดูวิธีการใช้งาน facebox ได้ที่ http://fancyapps.com/fancybox/#docs

ตัวอย่าง

โค้ดตัวอย่าง

<!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:550px;  
        height:500px;  
        margin:auto;  
        margin-top:50px;  
    }  
    </style>      
    <link rel="stylesheet" href="js/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />  
</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" src="js/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>    
<script type="text/javascript">  
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้  
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น  
var my_Marker=[]; // สำหรับปักหมุด
var obj_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: 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("get_marker.php", function( data ) { 
        obj_marker=data; // เก็บค่าไว้ในตัวแปร ไว้ใช้งาน
        var m=0;
         $.each(obj_marker,function(i,k){  // วนลูปแสดงการปักหมุด

                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 เมื่อเอาเมาส์มาอยู่เหนือ  
                    });     
                   
                     // ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ marker
                    GGM.event.addListener(my_Marker[i],"click", function(){ // เมื่อคลิกตัว marker แต่ละตัว  
//                        map.setCenter(new GGM.LatLng(obj_marker[i].latitude,obj_marker[i].longitude));
                        var dataShow=obj_marker[i].province_id+"<br>"+obj_marker[i].province_name;
                        $.fancybox({  
                             //closeBtn:false, 
                            maxWidth	: 500,
                            maxHeight	: 300,
                            fitToView	: false,
                            autoSize	: false,
                            closeClick	: false,
                            openEffect	: 'none',
                            closeEffect	: 'none',
                            content:dataShow    
                        });       
                        // การใช้แบบดึงข้อมูล ajax
//                        $.fancybox({  
//                             //closeBtn:false,  
//                              content:$.ajax({         
//                                  width:500,  
//                                  url:'get_content.php',//ใช้ ajax ใน jQuery ดึงข้อมูล         
//                                 data:'dataVal1='+data_col1,  // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล      
//                                 //  data: {'dataVal1': data_col1, 'dataVal2': data_col2},  
//                                  async:false         
//                              }).responseText      
//                        });                          
                        
                    });                                
                    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: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"  
    }).appendTo("body");      
});  
</script>              
</body>
</html>

ninenik 13-02-2015

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

ขอถามอีกเรืองนึงค่ะ
คือ จะให้ infowindow แสดงข้อมูลแบบ ตัวอย่างนี้ https://www.ninenik.com/การแสดง_ข้อมูลใน_infowindows_ของ_google_map_ด้วย_ajax_ใน_jQuery-328.html

แต่มีการดึงข้อมูลจากดาต้าเบสมาใช้ด้วย
อยากทราบว่าถ้าไม่ใช้คำสั่ง $.ajax ในตอนเริ่มจะใช้คำสั่งไหนแทนได้คะ เพราะ จะเอา $.ajax มาใช้ตรงที่แสดง contendata ค่ะ

<body>
 <div id="form_search_data">  
      <form id="form_search_map_data" name="form_search_map_data" method="post" action="">  
        <input type="text" name="data_search" id="data_search" value="<?=$_POST['data_search']?>" style="width:300px;" />  
        <input type="submit" name="bt_search" id="bt_search" value="Search" />  
      </form>  
    </div>    
  <div id="map_canvas"></div>  
   
  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script type="text/javascript">  
var map; 
var GGM;   
var infowindow=[];   
var infowindowTmp;    
var my_Marker=[]; 
var markerID=[];  
var markerName=[];  
var markerLat=[]; 
var markerLng=[]; 
var markerLatLng=[]; 
var contentData=[]; 
var obj_marker; 
function initialize() { 
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM  
     
    var my_Latlng  = new GGM.LatLng(13.730470,100.569901);  
    var my_DivObj=$("#map_canvas")[0];   
  
    var myOptions = {  
        zoom: 14, 
        center: my_Latlng ,  
        mapTypeId:GGM.MapTypeId.ROADMAP, 
        mapTypeControlOptions:{  
            position:GGM.ControlPosition.TOP,
            style:GGM.MapTypeControlStyle.DROPDOWN_MENU   
        }  
    };  
    map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map  
  

    // ใช้ ajax ดึงค่าจาก xml มาใช้งาน  
    $.ajax({  
	url:"genMarker.php",
        type: "GET", 
        data: { data_search : "<?=$_POST['data_search']?>"}, 
        dataType: "xml",  
        success:function(xml) { 
     
            $(xml).find("marker").each(function(i){    
                    markerID[i]=$(this).attr("id");
                    markerName[i]=$(this).find("name").text();        
					markerLng[i]=$(this).find("longitude").text();
					markerLatLng[i]=new GGM.LatLng(markerLat,markerLng);
					markerLat[i]=$(this).find("latitude").text();
                    markerLat[i]=$(this).find("latitude").text();      
                    markerLng[i]=$(this).find("longitude").text();              
                    markerLatLng[i]=new GGM.LatLng(markerLat[i],markerLng[i]);    
               
                    
                    my_Marker[i] = new GGM.Marker({  
                        position:markerLatLng[i],   
                        map: map,  
                        title:markerName[i]    
						
                    });    
                    
                     // จัดรูปแบบ เนื้อหาใน infowndow***
                    contentData[i]=markerName[i];  
                    infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ arra
						content: $.ajax({           
                                  width:500,    
                                  url:'detail_form_info.php', // แสดงเนื้อหา ของแต่ละ icons  
                    });                
					});
  
                    GGM.event.addListener(my_Marker[i], "click", function(){     
                        if(infowindowTmp!=null){    
                            infowindow.close();   
                        }    
                        infowindow[i].open(map,my_Marker[i]);     
                        infowindowTmp=i; 
			infowindow = new GGM.InfoWindow();
                    });                      
                      
                  console.log($(this).find("id").text());    
            });    
        }       
    });       
  
}  
$(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>

bpsweett 13-02-2015 22:57

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

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

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