สร้าง Marker ใน Google Map หลายๆอัน จากการ Search แต่ละครั้งยังไงครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สร้าง Marker ใน Google Map หลายๆอัน จากการ Search แต่ละครั้งยังไงครับ

สร้าง Marker ใน Google Map หลายๆอัน จากการ Search แต่ละครั้งยังไงครับ

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

สมมติ เรา Search หาจากสถานที่ และกำหนดจุดให้กับ Marker อันแรกและกดเซฟเรียบร้อยแล้ว อยากจะ Search หาสถานที่อื่นๆ โดยให้สร้าง Marker อันต่อๆไป โดยที่ Marker อันแรกๆ ที่เราเคยกำหนดจุดมาแล้ว ยังคงแสดงอยู่ในแผนที่ พอจะมีวิธีมั้ยครับ

ขอบคุณล่วงหน้าครับ ^^

Vincentva 13-12-2010 04:31:41

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

ต้องกำหนด ตัว marker เป็นตัวแปร array และสร้างฟังก์ชัน สำหรับสร้าง ตัว marker แต่ละตัว ทุกครั้ง

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

ส่วนเพิ่มเติม หรืออะไรที่มากกว่านี้ ต้องอาศัยความเข้าใจ ในการนำไปประยุกต์ใช้งานของแต่ละคน

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

<!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 google map search and 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:550px;
    height:400px;
    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 
  <input name="namePlace" type="text" id="namePlace" size="40" />
  <input type="button" name="SearchPlace" id="SearchPlace" value="Search" />
  <hr />
<!--  <form> เก็บข้อมูลสำหรับนำไปบันทึกลงฐานข้อมูล หรือนำไปใช้อื่นๆ-->
  <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">    Latitude  
    <input name="lat_value" type="text" id="lat_value" value="0" size="17" />  
    Longitude  
    <input name="lon_value" type="text" id="lon_value" value="0" size="17" />  
  Zoom  
  <input name="zoom_value" type="text" id="zoom_value" value="0" size="5" />  
  <input type="submit" name="button" id="button" value="บันทึก" />  
  </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 เป็นตัวแปร array
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var i=0; // ค่าสำหรับเก็บ ลำดับ index ของ ตัว marker แต่ละตัว
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
     
    // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
    GGM.event.addListener(map, 'zoom_changed', function() {
        $("#zoom_value").val(map.getZoom());   // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value    
    });
 
}
//  สร้างฟังก์ชัน สำหรับสร้าง ตัว marker แต่ละตัว 
function add_marker(index,my_Latlng){
    my_Marker[index] = new GGM.Marker({ // สร้างตัว marker ไว้ในตัวแปร my_Marker
        position: my_Latlng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
        draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้
        title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
    }); 
 
    GGM.event.addListener(my_Marker[index], 'click', function() {
        var my_Point = my_Marker[index].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_valu          
    });         
        // กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร   
    GGM.event.addListener(my_Marker[index], 'dragend', function() {
        var my_Point = my_Marker[index].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_valu          
    });         
     
}
$(function(){
    // ส่วนของฟังก์ชันค้นหาชื่อสถานที่ในแผนที่
    var searchPlace=function(){ // ฟังก์ชัน สำหรับคันหาสถานที่ ชื่อ searchPlace
        var AddressSearch=$("#namePlace").val();// เอาค่าจาก textbox ที่กรอกมาไว้ในตัวแปร
        if(geocoder){ // ตรวจสอบว่าถ้ามี Geocoder Object 
            geocoder.geocode({
                 address: AddressSearch // ให้ส่งชื่อสถานที่ไปค้นหา
            },function(results, status){ // ส่งกลับการค้นหาเป็นผลลัพธ์ และสถานะ
                if(status == GGM.GeocoderStatus.OK) { // ตรวจสอบสถานะ ถ้าหากเจอ
                    var my_Point=results[0].geometry.location; // เอาผลลัพธ์ของพิกัด มาเก็บไว้ที่ตัวแปร
                    map.setCenter(my_Point); // กำหนดจุดกลางของแผนที่ไปที่ พิกัดผลลัพธ์
                    i++;
                    add_marker(i,my_Point);
                    $("#lat_value").val(my_Point.lat());  // เอาค่า latitude พิกัดผลลัพธ์ แสดงใน textbox id=lat_value
                    $("#lon_value").val(my_Point.lng());  // เอาค่า longitude พิกัดผลลัพธ์ แสดงใน textbox id=lon_value 
                    $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_valu                               
                }else{
                    // ค้นหาไม่พบแสดงข้อความแจ้ง
                    alert("Geocode was not successful for the following reason: " + status);
                    $("#namePlace").val("");// กำหนดค่า textbox id=namePlace ให้ว่างสำหรับค้นหาใหม่
                 }
            });
        }       
    }
    $("#SearchPlace").click(function(){ // เมื่อคลิกที่ปุ่ม id=SearchPlace ให้ทำงานฟังก์ฃันค้นหาสถานที่
        searchPlace();  // ฟังก์ฃันค้นหาสถานที่
    });
    $("#namePlace").keyup(function(event){ // เมื่อพิมพ์คำค้นหาในกล่องค้นหา
        if(event.keyCode==13){  //  ตรวจสอบปุ่มถ้ากด ถ้าเป็นปุ่ม Enter ให้เรียกฟังก์ชันค้นหาสถานที่
            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>

ตัวอย่าง

Search Place

Ninenik 13-12-2010

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

ขอบคุณอีกครั้งนะครับ

แต่ขอรบกวนอีกนิดครับ

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

vincentva 13-12-2010 12:04

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

หากต้องการลบเฉพาะ marker ที่ต้องการ ให้นำโค้ดต่อไปนี้ ไปใว้ต่อจากบรรทัดที่ 63 ก่อนบรรทัดที่ 64

เงื่อนไข เกิดเมื่อเราคลิกขวาที่ตัว marker ก็จะแจ้งถามว่าต้องการลบหรือไม่

GGM.event.addListener(my_Marker[index], 'rightclick', function() {
    if(confirm("Delete this marker?")){
        my_Marker[index].setMap();
    }
});     

แต่ถ้าต้องการลบทั้งหมด ให้สร้างปุ่มลบทั้งหมด เช่น

1	`<input type="button"` `name="del_marker"` `id="del_marker"` `value="clear"` `/>`

แล้วนำโค้ดด้านล่างไปต่อที่บรรทัดที่ 133 ในโค้ดตัวอย่าง

$("#del_marker").click(function(){
    if(my_Marker.length>0){
        for(n=1;n<my_Marker.length;n++){
            my_Marker[n].setMap();
        }
    }
});

Ninenik 13-12-2010

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

สอบถามหน่อยครับ

ถ้าเกิดเราปักหมุด Marker ไปแล้ว 5 จุด เกิดไปลบจุดที่ 3 ออก ใน Marker Array ... index มันจะเลื่อนให้อัตโนมัติรึเปล่าครับ เช่นในที่นี้ เลื่อน index จาก 4 มา 3 และเลื่อน index 5 มา 4

vincentva 13-12-2010 14:50

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

index ของ array จะไม่เลื่่อนอัตโนมัติ ค่า array ตัวที่ลบ จะหายไป

Ninenik 13-12-2010

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

อย่างงี้เราก็ต้องวนลูป เพื่อเลื่อน index แล้วเอาโค้ดไปแทรกใน event ที่เรากด right click เพื่อลบ marker ใช่ป่ะครับ

ขอบคุณมากๆครับ ที่ช่วยเหลือ ได้ประโยชน์มากเลยครับ

vincentva 13-12-2010 15:45

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

ผมก็อบโค้ดแล้ว มันโหลด Map ไม่ขึ้นอะครับ เป็นเพราะอะไรหรอครับ

Piyapan Pakpisitjalene 08-06-2017 14:19

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

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

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