google map แสดงตำแหน่ง marker สถานที่ ที่ใกล้เคียง

03 October 2014 เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee

ใกล้เคียง google map marker

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ใกล้เคียง google map marker

ดูแล้ว 15,030 ครั้ง

ตัวอย่างโค้ด เป็นการประยุกต์นำฟังก์ชั่น การหาตำแหน่ง marker ที่ใกล้เคียง

จากเนื้อหาตามลิ้งค์ด้านล่างนี้มาใช้งาน

http://stackoverflow.com/questions/4057665/google-maps-api-v3-find-nearest-markers

http://stackoverflow.com/questions/9156909/map-markers-is-undefined-google-map-api-v3

โดยประยุกต์กับเนื้อหาเก่า

สร้าง ตัว marker ระบุตำแหน่ง ใน google map จำนวนมาก จาก xml ไฟล์

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

การทำงานของตัวอย่าง คือ เราต้องการหาตำแหน่ง marker ที่ใกล้เคียงที่สุด

กับตัว marker ที่เรากำหนด

หรือสามารถไปประยุกต์หาตำแหน่ง marker ที่ใกล้ตำแหน่งปัจจุบันของเราก็ได้

โดยจะเรียกใช้ฟังก์ชันเมื่อ ลากจุด marker ที่เรากำหนด ไปยังตำแหน่งที่ต้องการ

หรือ คลิกที่แผนที่ไปตำแหน่งที่ต้องการ จากนั้นก็จะ alert แจ้งเตือน marker ที่อยู่

ใกล้เคียงที่สุด ในตัวอย่างคือจังหวัดที่ใกล้เคียง

ตัวอย่าง

โค้ดตัวอย่าง และคำอธิบายแสดงในโค้ด

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Google map near marker</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:450px;  
        height:500px;  
        margin:auto;
    /*  margin-top:100px;*/
    }
    </style>
</head>
<body>
  
  <div id="map_canvas"></div>
 <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">  
  <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">  
    Latitude  
    <input name="lat_value" type="text" id="lat_value" value="0" />  <br />
    Longitude  
    <input name="lon_value" type="text" id="lon_value" value="0" />  <br />
  Zoom  
  <input name="zoom_value" type="text" id="zoom_value" value="0" size="5" />  
  <br />
  <input type="submit" name="button" id="button" value="บันทึก" />  
  </form>  
</div> 
   
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script type="text/javascript" src="script.js"></script> 
</body>
</html>

ไฟล์ script.js

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Marker1;  // กำหนดตัวแปรเก็บ marker ตำแหน่งปัจจุบัน หรือที่ระบุ
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด
var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array
function initialize() { // ฟังก์ชันแสดงแผนที่
     
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
    // กำหนดจุดเริ่มต้นของแผนที่
    var my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);
     
    var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
    // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
    var my_DivObj=$("#map_canvas")[0]; 
     
    // กำหนด Option ของแผนที่
    var myOptions = {
        zoom: 6, // กำหนดขนาดการ zoom
        center: my_Latlng , // กำหนดจุดกึ่งกลาง
        mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่
    };
     
    map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
    map.markers = []; // กำหนด property ของ object map ชื่อ markers ไว้เก็บ marker เป็น array
    $.ajax({
        url:"simple_3.xml", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml 
        dataType: "xml",
        success:function(xml){
            $(xml).find('marker').each(function(i){ // วนลูปดึงค่าข้อมูลมาสร้าง marker  
                var markerID=$(this).find("id").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
                var markerName=$(this).find("name").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
                var markerLat=$(this).find("latitude").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
                var markerLng=$(this).find("longitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน  
                 
                // ส่วนสำหรับสร้างลิ้งค์ใน sidebar
                var navi_link="<li><a href='javascript:showInfo("+i+")'>"+markerName+"</a></li>";
                $("#navigator_link").prepend(navi_link);     // นำลิ้สรายการ พร้อมลิ้งค์ไปแสดงใน sidebar            
                             
                var markerLatLng=new GGM.LatLng(markerLat,markerLng);
                my_Marker[i] = new GGM.Marker({ // สร้างตัว marker เป็นแบบ array
                    position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                    map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                    title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
                });
                map.markers.push(my_Marker[i]); // เก็บ object marker ไว้ในตัวแปร
                 
                //  กรณีตัวอย่าง ดึง title ของตัว marker มาแสดง
                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='+markerID,// ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
//                      async:false   
//                  }).responseText   
//              });             
                 
                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 ที่เปิดไว้อ้างอิงใช้งาน
                });         
            });
        }   
    });         
     
    my_Marker1 = new GGM.Marker({ // สร้างตัว marker
        position: my_Latlng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
        icon:"https://www.ninenik.com/demo/google_map/images/male-2.png",
        draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้
        title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
    });
     
     
    // กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร
    GGM.event.addListener(my_Marker1, "dragend", function(e) {
        // เรียกใช้ฟังก์ชันหาตำแหน่งใกล้เคียง
        find_closest_marker(e);    
         
        var my_Point = my_Marker1.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
        map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker       
        $("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value
        $("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value 
        $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value
    });     
    // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
    GGM.event.addListener(map, "zoom_changed", function() {
        $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value  
    });
     
    // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
    GGM.event.addListener(map, "click", function(e) {
        // เรียกใช้ฟังก์ชันหาตำแหน่งใกล้เคียง        
        find_closest_marker(e);      
         
        var latClick=e.latLng.lat(); // e.latLng.lat().toFixed(6);
        var lonClick=e.latLng.lng();
        var latlonClck=new GGM.LatLng(latClick,lonClick);
        my_Marker1.setPosition(latlonClck);
        var my_Point = my_Marker1.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
        map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker       
        $("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value
        $("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value 
        $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value      
    }); 
}
function rad(x) {return x*Math.PI/180;} // ฟังก์ชั่นที่กี่ยวข้อง
function find_closest_marker( event ) { // ฟังก์ชั่นหาตำแหน่งใกล้เคียง
    var lat = event.latLng.lat();  // ตำแหน่ง lat ที่เราเลือก
    var lng = event.latLng.lng();  // ตำแหน่ง lng ที่เราเลือก
    var R = 6371; // รัศมีของโลกเป็น กิโลเมตร
    var distances = []; // กำหนดตัวแปร array ไว้เก็บระยะห่าง เทียบกับ marker แต่ละตัว
    var closest = -1;  // กำหนดค่าไว้เก็บตำแหน่าง key ของ marker ที่ใกล้ที่สุด
    for( i=0;i<map.markers.length; i++ ) { // วนลูป marker
        // เริ่มต้นส่วนของสูตรการคำนวณหาระยะทาง
        var mlat = map.markers[i].position.lat();
        var mlng = map.markers[i].position.lng();
        var dLat  = rad(mlat - lat);
        var dLong = rad(mlng - lng);
        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(rad(lat)) * Math.cos(rad(lat)) * Math.sin(dLong/2) * Math.sin(dLong/2);
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
        var d = R * c;  // ได้ตัวแปร d คือระยะยทาง
        // สิ้นสุด ส่วนของสูตรการคำนวณหาระยะทาง
        distances[i] = d; // เก็บระยะทางไว้ใน ตัวแปร array
        if ( closest == -1 || d < distances[closest] ) { // เทียบระยะทางหาค่าที่น้ยอ หรือใกล้ที่สุด
            closest = i;  // เก็บ key ของ marker ที่ใกล้ที่สุด
        }
    }
    // แสดง title ของ marker ที่ใกล้เคียง
    alert(map.markers[closest].title);
}
$(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");    
});