ประยุกต์ สร้างเครื่องมือ ค้นหา พิกัด จากชื่อสถานที่ จำนวนมาก ใน google map

13 September 2010 เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee

ชื่อสถานที่ google map ค้นหาพิกัด เครื่องมือ

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

ดูแล้ว 13,250 ครั้ง

จากเนื้อหา บทความ

https://www.ninenik.com/Google_map_API_v.3_กับ_jQuery_ลากจุดหา_พิกัด_ค่า_latitude_และ_longitude_-326.html

และ

https://www.ninenik.com/ค้นหา_พิกัด_ค่า_latitude_และ_longitude_ใน_Google_Map_จากฃื่อสถานที่-327.html

ทั้งสองกรณี เป็นการค้นหา พิกัด latitude และ longitude ตรั้งละหนึ่งสถานที่ หรือหนึ่งตำแหน่ง เท่านั้น อย่างไรก็ตาม เพื่ออำนวยความสะดวกยิ่งขึ้น จะแนะนำการประยุกต์ เนื้อหาจาก บทความ

ค้นหา พิกัด ค่า latitude และ longitude ใน Google Map จากฃื่อสถานที่
https://www.ninenik.com/ค้นหา_พิกัด_ค่า_latitude_และ_longitude_ใน_Google_Map_จากฃื่อสถานที่-327.html

มาใช้ในการหาตำแหน่งจาก ชื่อสถานที่ คราวละมากๆ โดยเพียงแค่เรากรอกชื่อสถานที่ และขึ้นบรรทัดใหม่ สำหรับแต่ละชื่อ แล้วให้ google ค้นหา พิกัด ค่า latitude และ longitude ให้โดยอัตโนมัติ (การกรอกชื่อสถานที่ แนะนำไม่ควรเกิน 100 ชื่อในแต่ละครั้ง)

ทดสอบโดย ลองเข้าไปก็อบชื่อจังหวัดในประเทศไทย ตามลิ้ง ล่างนี้
https://www.ninenik.com/note/thaiprovince.txt

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

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

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

152

153

154

155

156

157

158

159

160

161

<!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>Google Map API 3 - 01</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:200px;
    margin:auto;
    margin-top:50px;
}
</style>
</head>
 
<body>
  <div id="map_canvas"></div>
 <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">  
<!--textbox กรอกชื่อสถานที่ และปุ่มสำหรับการค้นหา เอาไว้นอกแท็ก <form>-->
Search Place
<br />
<textarea name="namePlace" cols="40" rows="5" id="namePlace" style="width:500px;"></textarea>
<br />
<input type="button" name="SearchPlace" id="SearchPlace" value="Search" />    
     
 
<hr />    
<!--  <form> เก็บข้อมูลสำหรับนำไปบันทึกลงฐานข้อมูล หรือนำไปใช้อื่นๆ-->
  <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">
        ชื่อสถานที่,Latitude,Longitude,Zoom<br />
    <textarea name="resultData" cols="40" rows="5" id="resultData" style="width:500px;"></textarea>
     <br />
     <input type="submit" name="button" id="button" value="บันทึก" />  
    พบ
    <input name="YesVal" type="text" id="YesVal" style="width:25px;" value="0" />
  ไม่พบ 
  <input name="NoVal" type="text" id="NoVal" style="width:25px;" value="0" />
  ค้นแล้ว
  <input name="FinishVal" type="text" id="FinishVal" style="width:25px;" value="0" />
  จากทั้งหมด
  <input name="TotalVal" type="text" id="TotalVal" style="width:25px;" value="0" />
  </form>      
     
 
 
 
</div> 
   
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var geocoder; // กำหนดตัวแปรสำหรับ เก็บ Geocoder Object ใช้แปลงชื่อสถานที่เป็นพิกัด
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var my_Marker; // กำหนดตัวแปรสำหรับเก็บตัว marker
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
function initialize() { // ฟังก์ชันแสดงแผนที่
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
    geocoder = new GGM.Geocoder(); // เก็บตัวแปร google.maps.Geocoder Object
    // กำหนดจุดเริ่มต้นของแผนที่
    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: 13, // กำหนดขนาดการ zoom
        center: my_Latlng , // กำหนดจุดกึ่งกลาง จากตัวแปร my_Latlng
        mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่ จากตัวแปร my_mapTypeId
    };
    map = new GGM.Map(my_DivObj,myOptions); // สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
     
}
$(function(){
    // ส่วนของฟังก์ชันค้นหาชื่อสถานที่ในแผนที่
    var searchPlace=function(){ // ฟังก์ชัน สำหรับคันหาสถานที่ ชื่อ searchPlace
        var AddressSearch=$("#namePlace").val();// เอาค่าจาก textbox ที่กรอกมาไว้ในตัวแปร
        var arr_AddressSearch=AddressSearch.split(/rn|r|n/); 
        var length_AddressSearch=arr_AddressSearch.length;
        $("#TotalVal").val(length_AddressSearch);                       
        if(geocoder && $.trim(AddressSearch)!=""){ // ตรวจสอบว่าถ้ามี Geocoder Object 
            $("#resultData").val("Google กำลังทำการค้นหา กรุณารอสักครู่...");       
            $("#YesVal").val(0);
            $("#NoVal").val(0);
            $("#FinishVal").val(0);
            var zoomVal=map.getZoom();
            var resultValue='';
            var i=0;
            var YesData=0;
            var NoData=0;
            getLatLon();
            function getLatLon(){
        //      console.log(i);
                geocoder.geocode({
                     address: $.trim(arr_AddressSearch[i]) // ให้ส่งชื่อสถานที่ไปค้นหา
                },function(results, status){ // ส่งกลับการค้นหาเป็นผลลัพธ์ และสถานะ
                    if(status == GGM.GeocoderStatus.OK) { // ตรวจสอบสถานะ ถ้าหากเจอ
                        var my_Point=results[0].geometry.location; // เอาผลลัพธ์ของพิกัด มาเก็บไว้ที่ตัวแปร
                            resultValue+=$.trim(arr_AddressSearch[i])+","
                            +my_Point.lat()+","+my_Point.lng()+","+zoomVal+"rn";
                            YesData++;
                            $("#YesVal").val(YesData);
                            $("#FinishVal").val(i+1);
                            if(i<length_AddressSearch){
                                setTimeout(function(){
                                    incr(); 
                                },1000);
                            }
                    }else{
                            resultValue+=$.trim(arr_AddressSearch[i])+","
                            +0+","+0+","+zoomVal+"rn";  
                            NoData++;
                            $("#NoVal").val(NoData);
                            $("#FinishVal").val(i+1);                           
                            if(i<length_AddressSearch){
                                setTimeout(function(){
                                    incr(); 
                                },1000);
                            }                   
                     }
                }); 
                                 
            }
            function incr(){
                i++;
                if(i<length_AddressSearch){
                    getLatLon();
                }else{
                    $("#resultData").val(resultValue);  
                }
            }
        }
    }
    $("#SearchPlace").click(function(){ // เมื่อคลิกที่ปุ่ม id=SearchPlace ให้ทำงานฟังก์ฃันค้นหาสถานที่
        searchPlace();  // ฟังก์ฃันค้นหาสถานที่
    });
 
});
$(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>