การใช้งาน gmaps.js – Google Map

มีคุณครู ต้องการทำระบบเกี่ยวกับแผนที่เลยมาขอคำแนะนำ เกี่ยว Google Map ผมเลยพาใช้งานตัว gmaps.js เพราะมันง่ายดีครับ doc กับ example ที่ทำไว้ค่อนข้างจะดีทีเดียวครับ => https://hpneo.github.io/gmaps/

มีโจทย์คือ มีข้อมูลนักเรียน ชื่อ ที่อยู่ พิกัด อยากให้แสดงบนแผนที่ และคลิกดูรายละเอียด พร้อมบอกเส้นทางจากโรงเรียนไปยังบ้านนักเรียน

โหลด gmaps.js ได้ที่

https://github.com/hpneo/gmaps/blob/master/gmaps.js
หรือ
https://github.com/hpneo/gmaps/blob/master/gmaps.min.js

หรือใช้ cdn
https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.25/gmaps.min.js

ไล่ดู code ตาม comment เลยนะครับ ผิดพลาดอะไรก็แจ้งมาได้เลยครับ

<!DOCTYPE html>
<html>
<head>
  <title>gmaps.js</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script   src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=AIzaSyDZGIbvHlipX0lNhJdcJVNt_6-aasGh_Sg"></script>
  <script  type="text/javascript" src="gmaps.js"></script>
  <style type="text/css">
    #map {
      width: 800px;
      height: 500px;
      float: left;
    }
    #student_info {
      width: 400px;
      height: 250px;
      float: left;
      padding: 20px;
    }
    #instructions {
      width: 400px;
      height: 250px;
      float: left;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <div id="student_info"></div>
  <div id="instructions"></div>
  <div id="panorama"></div>
  <script>

    //พิกัดโรงเรียน
    var lat_school =  15.3628514;
    var lng_school =  104.8199403;

    //ข้อมูลนักเรียน
    var  student_data = '{  "students" : [ '+ 
       ' { "fullname" : "name 1" , "address": "address12" ,  "lat" : "15.36324" , "lng" : "104.82381" , "img_url" : "chaichon.png" , "profile" : "https://www.facebook.com/bchaichon"  } , '+
       ' { "fullname" : "name 2" , "address": "address34" ,  "lat" : "15.36456" , "lng" : "104.82382" , "img_url" : "appxar.png" , "profile" : "https://www.mthai.com/" } ,  '+
       ' { "fullname" : "name 3" , "address": "address56" ,  "lat" : "15.36896" , "lng" : "104.82383" , "img_url" : "logo.jpg" , "profile" : "https://drive.google.com/file/d/0B09DTnuQ8mwjaHNnR3VXWGRORGs/view?usp=sharing" }   '+
      ' ] }' ;


    //แสดงแผนที่เริ่มต้นที่พิกัดและใช้ div id=map แสดงผล
    var map = new GMaps({
      el: '#map',
      lat: 15.363208318293692,
      lng: 104.8238295030715,
    });

    //แปลง   student_data จาก text เป็น json object 
    var obj_stu = JSON.parse(student_data);

    console.log(obj_stu.students.length);

    //วน loop add marker
   for (var i = 0; i < obj_stu.students.length; ++i) {
        //อ่านค่าจาก json array students
        var name = obj_stu.students[i].fullname ;
        var img_url = obj_stu.students[i].img_url;
        var address = obj_stu.students[i].address;
        var lat = obj_stu.students[i].lat ;
        var lng = obj_stu.students[i].lng ;
        var profile = obj_stu.students[i].profile

        var stu = obj_stu.students[i] ;
        var index = i ;

        //เพิ่มจุดลงบนแผนที่ 
        map.addMarker({
            id: index ,
            lat: lat ,
            lng: lng ,
            title: name ,
            click: function(e) {    
               //showStudentInfo(stu,index);
               //alert("index="+e);
               //console.log("e="+e);
            },
            infoWindow: {
               // showStudentInfo1-3  แสดงข้อมูลแบบต่างๆ 	ตรง onclick ครับ
               content: '<p>'+name+'<br><img src="images/'+img_url+'" width="100"><br>'+
                 '<a href="#" onclick="showStudentInfo2(\''+name+'\',\''+address+'\',\''+img_url+'\',\''+lat+'\',\''+lng+'\',\''+profile+'\')" >detail</a></p>'
            }
        });

        /*map.drawOverlay({
          lat: obj_stu.students[i].lat ,
          lng: obj_stu.students[i].lng ,
          content: '<div class="overlay">'+name+'<br><img src="images/'+img_url+'" width="20"></div>'
        });*/
        
        //console.log(obj_stu.students[i]);
    }

    //แสดงแบบ panorama ไม่สำเร็จ
    function showStudentInfo3(name,address,img_url,lat,lng,profile){

      document.getElementById("student_info").innerHTML='<div>'+name+'<br><img src="images/'+img_url+
               '" width="100"><br>address: '+address+' <br>lat: '+lng+' , lng: '+lng+' <br>'+
               '<a href="'+profile+'">profile</a>'+ 
               '</div>' ;

        var panorama = GMaps.createPanorama({
          el: '#panorama',
          lat : lat,
          lng : lng
        });
    }

   //แสดงเส้นทางแบบเป็น step พร้อมมีรายละเอียดแสดงใน div id=instructions
   function showStudentInfo2(name,address,img_url,lat,lng,profile){

     document.getElementById("student_info").innerHTML='<div>'+name+'<br><img src="images/'+img_url+
               '" width="100"><br>address: '+address+' <br>lat: '+lng+' , lng: '+lng+' <br>'+
               '<a href="'+profile+'">profile</a>'+ 
               '</div>' ;

        map.cleanRoute(); //ลบเส้นทางก่อนวาดเส้นทางใหม่
        $('#instructions').html('');
        map.travelRoute({
            origin: [lat_school, lng_school],
            destination: [lat,lng],
            travelMode: 'driving',
            step: function(e) {
              $('#instructions').append('<li>'+e.instructions+'</li>');
              $('#instructions li:eq(' + e.step_number + ')').delay(450 * e.step_number).fadeIn(200, function() {
                map.drawPolyline({
                  path: e.path,
                  strokeColor: '#131540',
                  strokeOpacity: 0.6,
                  strokeWeight: 6
                });
              });
            }
          });
   }

    //แสดงรายละเอียดนักเรียนพร้อมเส้นทาง
    function showStudentInfo1(name,address,img_url,lat,lng,profile){
      document.getElementById("student_info").innerHTML='<div>'+name+'<br><img src="images/'+img_url+
               '" width="100"><br>address: '+address+' <br>lat: '+lng+' , lng: '+lng+' <br>'+
               '<a href="'+profile+'">profile</a>'+ 
               '</div>' ;
           
               map.cleanRoute();
               map.drawRoute({
                  origin: [lat_school, lng_school],
                  destination: [lat,lng],
                  travelMode: 'driving',
                  strokeColor: '#0000ff',
                  strokeOpacity: 0.6,
                  strokeWeight: 6
                });
    }
    
  </script>
</body>
</html>

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

<!DOCTYPE html>

<html>

<head>

<title>gmaps.js</title>

#map {

width: 800px;

height: 500px;

float: left;

}

#student_info {

width: 400px;

height: 250px;

float: left;

padding: 20px;

}

#instructions {

width: 400px;

height: 250px;

float: left;

padding: 20px;

}

</style>

</head>

<body>

//พิกัดโรงเรียน

var lat_school = 15.3628514;

var lng_school = 104.8199403;

//ข้อมูลนักเรียน

var student_data = '{ "students" : [ '+

' { "fullname" : "name 1" , "address": "address12" , "lat" : "15.36324" , "lng" : "104.82381" , "img_url" : "chaichon.png" , "profile" : "https://www.facebook.com/bchaichon" } , '+

' { "fullname" : "name 2" , "address": "address34" , "lat" : "15.36456" , "lng" : "104.82382" , "img_url" : "appxar.png" , "profile" : "https://www.mthai.com/" } , '+

' { "fullname" : "name 3" , "address": "address56" , "lat" : "15.36896" , "lng" : "104.82383" , "img_url" : "logo.jpg" , "profile" : "https://drive.google.com/file/d/0B09DTnuQ8mwjaHNnR3VXWGRORGs/view?usp=sharing" } '+

' ] }' ;

//แสดงแผนที่เริ่มต้นที่พิกัดและใช้ div id=map แสดงผล

var map = new GMaps({

el: '#map',

lat: 15.363208318293692,

lng: 104.8238295030715,

});

//แปลง student_data จาก text เป็น json object

var obj_stu = JSON.parse(student_data);

console.log(obj_stu.students.length);

//วน loop add marker

for (var i = 0; i < obj_stu.students.length; ++i) {

//อ่านค่าจาก json array students

var name = obj_stu.students[i].fullname ;

var img_url = obj_stu.students[i].img_url;

var address = obj_stu.students[i].address;

var lat = obj_stu.students[i].lat ;

var lng = obj_stu.students[i].lng ;

var profile = obj_stu.students[i].profile

var stu = obj_stu.students[i] ;

var index = i ;

//เพิ่มจุดลงบนแผนที่

map.addMarker({

id: index ,

lat: lat ,

lng: lng ,

title: name ,

click: function(e) {

//showStudentInfo(stu,index);

//alert("index="+e);

//console.log("e="+e);

infoWindow: {

// showStudentInfo1-3 แสดงข้อมูลแบบต่างๆ ตรง onclick ครับ

content: '<p>'+name+'<br><img src="images/'+img_url+'" width="100"><br>'+

'<a href="#" onclick="showStudentInfo2(\''+name+'\',\''+address+'\',\''+img_url+'\',\''+lat+'\',\''+lng+'\',\''+profile+'\')" >detail</a></p>'

}

});

/*map.drawOverlay({

lat: obj_stu.students[i].lat ,

lng: obj_stu.students[i].lng ,

content: '<div class="overlay">'+name+'<br><img src="images/'+img_url+'" width="20"></div>'

});*/

//console.log(obj_stu.students[i]);

}

//แสดงแบบ panorama ไม่สำเร็จ

function showStudentInfo3(name,address,img_url,lat,lng,profile){

document.getElementById("student_info").innerHTML='<div>'+name+'<br><img src="images/'+img_url+

'" width="100"><br>address: '+address+' <br>lat: '+lng+' , lng: '+lng+' <br>'+

'<a href="'+profile+'">profile</a>'+

'</div>' ;

var panorama = GMaps.createPanorama({

el: '#panorama',

lat : lat,

lng : lng

});

}

//แสดงเส้นทางแบบเป็น step พร้อมมีรายละเอียดแสดงใน div id=instructions

function showStudentInfo2(name,address,img_url,lat,lng,profile){

document.getElementById("student_info").innerHTML='<div>'+name+'<br><img src="images/'+img_url+

'" width="100"><br>address: '+address+' <br>lat: '+lng+' , lng: '+lng+' <br>'+

'<a href="'+profile+'">profile</a>'+

'</div>' ;

map.cleanRoute(); //ลบเส้นทางก่อนวาดเส้นทางใหม่

$('#instructions').html('');

map.travelRoute({

origin: [lat_school, lng_school],

destination: [lat,lng],

travelMode: 'driving',

step: function(e) {

$('#instructions').append('<li>'+e.instructions+'</li>');

$('#instructions li:eq(' + e.step_number + ')').delay(450 * e.step_number).fadeIn(200, function() {

map.drawPolyline({

path: e.path,

strokeColor: '#131540',

strokeOpacity: 0.6,

strokeWeight: 6

});

}

});

}

//แสดงรายละเอียดนักเรียนพร้อมเส้นทาง

function showStudentInfo1(name,address,img_url,lat,lng,profile){

document.getElementById("student_info").innerHTML='<div>'+name+'<br><img src="images/'+img_url+

'" width="100"><br>address: '+address+' <br>lat: '+lng+' , lng: '+lng+' <br>'+

'<a href="'+profile+'">profile</a>'+

'</div>' ;

map.cleanRoute();

map.drawRoute({

origin: [lat_school, lng_school],

destination: [lat,lng],

travelMode: 'driving',

strokeColor: '#0000ff',

strokeOpacity: 0.6,

strokeWeight: 6

});

}

</script>

</body>

</html>

จะได้ผลลัพธ์ดังนี้ครับ

ลองคลิกเล่นดูได้ครับ => http://www.appxar.co/nari2map/c_gmap1.php

ปัญหาที่อาจจะเจอ

1. แผนที่ไม่ show ต้องขอ api key ด้วยนะครับ
ขอได้ที่ => https://developers.google.com/maps/documentation/javascript/get-api-key

ได้ key มาก็เอามาใส่
https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=คีย์ของท่าน

2. …

จบแล้วครับ…หวังว่าจะมีประโยชน์นะครับ

Post Views: 2,563

Share16

16 Shares

Chaichon Dev Log

just develop, Stay Hungry, Stay Foolish

การใช้งาน gmaps.js – Google Map

ปัญหาที่อาจจะเจอ