PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

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

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

โดย:  Bpsweett IP: 110.168.229.xxx วันที่: 12-02-2015 เวลา: 22:27:13

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 2
ขอถามอีกเรืองนึงค่ะ
คือ จะให้ infowindow แสดงข้อมูลแบบ ตัวอย่างนี้ http://www.ninenik.com/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%81%E0%B8%AA%E0%B8%94%E0%B8%87_%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B9%83%E0%B8%99_infowindows_%E0%B8%82%E0%B8%AD%E0%B8%87_google_map_%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2_ajax_%E0%B9%83%E0%B8%99_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: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"  
    }).appendTo("body");      
});  
</script>    
</body>


โดย:  Bpsweett IP: 110.168.229.xxx วันที่: 13-02-2015 เวลา: 22:57:19
 ความคิดเห็นที่ 1
ขึ้นกับโค้ดเป็นแบบไหน ปกติถ้าไม่ต้องการเรียกใช้งาน infowindow ของ google map
เราก็ปิดการใช้งานส่วนนั้นไป เช่น สมมติ เราต้องการใช้งาน fancybox แทน infowndow

* ดัดแปลงจากเนื้อหา
google map แสดงจำนวน marker ตามเงื่อนไข การ  zoom 
http://www.ninenik.com/content.php?arti_id=589 via @ninenik

http://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: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"  
    }).appendTo("body");      
});  
</script>              
</body>
</html>



โดย:  Ninenik IP: 171.96.5.xxx วันที่: 13-02-2015