ดึงข้อมูลจาก DB มาแสดง marker บนGmap หลายๆตัว

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ดึงข้อมูลจาก DB มาแสดง marker บนGmap หลายๆตัว

ดึงข้อมูลจาก DB มาแสดง marker บนGmap หลายๆตัว

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

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

<!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>test3</title>
 
<span class="head" style="height:40px;"><img src="blogo.png" alt=""/></span>
 
<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;
} 
#map_canvas
    {width:800px;
    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;">  
                  Search Place 
                  <input name="namePlace" type="text" id="namePlace" size="40" />
                  <input type="button" name="SearchPlace" id="SearchPlace" value="Search" />
                  <hr />
                   <form name="form_get_detailMap" method="post" action="test222.php">    
                    Latitude  
                    <input name="lat_value" type="text" id="lat_value" value="0" />  
                    Longitude  
                    <input name="lng_value" type="text" id="lng_value" value="0" />  
                    <input type="submit" name="button" id="button" value="save" />  
                   </form>  
         </div> 
<div name="showData" id="showData"></div>
 
<script type="text/javascript" src="jquery-1.6.3.js"></script>
<script type="text/javascript">
var geocoder; 
var map; 
var my_Marker; 
var my_Marker1;
var icon = '2.png';
var icon1 = '3.png';
var GGM;  
var str1=[];
var id=[];
var latlng;
var lat=[];
var lng=[];
 
function initialize() {
    GGM=new Object(google.maps);
    geocoder = new GGM.Geocoder(); 
    var my_Latlng  = new GGM.LatLng(13.7578,100.3645);
    var my_mapTypeId=GGM.MapTypeId.ROADMAP;
    var my_DivObj=$("#map_canvas")[0];
 
        var myOptions = {
        zoom: 13,
        center: my_Latlng ,
        mapTypeId:my_mapTypeId };
 
    map = new GGM.Map(my_DivObj,myOptions);
     
    my_Marker = new GGM.Marker({
        position: my_Latlng,  
        map: map,
        draggable:true,
        title:"marker",
        icon : icon
                                });
 
 
     
     
    maker=function(){
        for(i1=0;i1<lat.length;i  ){
        my_Marker1 = new GGM.Marker({ 
        position : new GGM.LatLng(lat[i1],lng[i1]),
        map : map,
        icon : icon1
                                    });
                                   }
                   }
 
     
    GGM.event.addListener(my_Marker, 'dragend', function(){
        var my_Point = my_Marker.getPosition();  
        map.panTo(my_Point);        
        $("#lat_value").val(my_Point.lat().toFixed(5)); 
        $("#lng_value").val(my_Point.lng().toFixed(5));     
 
    });     
 
}
$(function(){
        var searchPlace=function(){ 
        var AddressSearch=$("#namePlace").val();
        if(geocoder){  
            geocoder.geocode({
                 address: AddressSearch 
            },function(results, status){ 
                if(status == GGM.GeocoderStatus.OK) { 
                    var my_Point=results[0].geometry.location; 
                    map.setCenter(my_Point); 
                    my_Marker.setMap(map);                  
                    my_Marker.setPosition(my_Point); 
                    $("#lat_value").val(my_Point.lat().toFixed(5));
                    $("#lng_value").val(my_Point.lng().toFixed(5));  
                }else{
                     
                    alert("Geocode was not successful for the following reason: " + status);
                    $("#namePlace").val("");
                 }
            });
        }       
    }
    $("#SearchPlace").click(function(){ 
        searchPlace();  
    });
    $("#namePlace").keyup(function(event){ 
        if(event.keyCode==13){  
            searchPlace();  
            }       
    });
});
 
$(function(){   
    $("<script/>", {
      "type": "text/javascript",
      src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
    }).appendTo("body");    
});
 
$(function(){
    setInterval(function(){
        var getData=$.ajax({ 
                url:"DB_Map.php",
                data:"rev=1",
                async:false,
                success:function(getData)
                    {
                    var j1=0;j2=0;
                    var str = getData;
                    str1 = str.split(" ");
                    //alert(str1);
                    for(var i=0;i<str1.length-1;i  )
                    {
                    if(i%4==2)
                        {
                            lat[j1] = str1[i];
                            //alert(lat[j1]);
                            j1++;
                        }
                    if(i%4==3)
                        {
                            lng[j2] = str1[i];
                            j2++;
                        }
                         
                    }
                     
                    maker();
                    $("#showData").html(getData);                                                        
                    }
        }).responseText;
    },3000);    
});
 
 
 
</script>  
</body>
</html>

Net Chakkrit 30-04-2012 13:55:15

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

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

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