PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


ทำไมถึงต้องการใช้ link ,script google map api

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ทำไมถึงต้องการใช้ link ,script google map api

ทำไมถึงต้องการใช้ link ,script google map api
สอบถามนิดนึงผมได้นำ code จาก https://www.ninenik.com/338 มาทำต่อเเต่ผมไม่ต้องการเรียกใช้     <link rel="stylesheet" href="//unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<script src="//unpkg.com/jquery@3.2.1"></script>  แต่พอรันมันไม่ขึ้นอะไร อยากทราบว่ามัน code ชุดนี้มันือแล้วมีหน้าอะไร 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="//unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <style type="text/css">
    /* css กำหนดความกว้าง ความสูงของแผนที่ */
    #map_canvas { 
    width:1500px;
    height:700px;
    margin:auto;
    margin-top:0px;
    margin-right: 0px;
    margin-left: 0px;
    }
    </style>    
  </head>
  
<body>
 
<div class="container" style="width:2000px;">
  <div id="map_canvas"></div>
   
</div>  
   
<script src="//unpkg.com/jquery@3.2.1"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด
function initialize() { // ฟังก์ชันแสดงแผนที่
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
    // กำหนดจุดเริ่มต้นของแผนที่
    var my_Latlng  = new GGM.LatLng(13.847860,100.604274);
    // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
    var my_DivObj=$("#map_canvas")[0]; 
    // กำหนด Option ของแผนที่
    var myOptions = {
        zoom: 5, // กำหนดขนาดการ zoom
        center: my_Latlng , // กำหนดจุดกึ่งกลาง
        mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่
        mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่
            position:GGM.ControlPosition.TOP, // จัดตำแหน่ง
            style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style 
        }
    };
    map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
   
    $.ajax({
        url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ json
        method: "POST",
        dataType: "json",
        success:function(data){
            if(data && typeof data == 'object'){
                $.each(data,function(k,dataValue){
                    var markerID=dataValue.province_id;// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
                    var markerName=dataValue.province_name; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
                    var markerLat=dataValue.province_lat; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน 
                    var markerLng=dataValue.province_lon; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน            
                    var markerLatLng=new GGM.LatLng(markerLat,markerLng);
                    my_Marker[k] = new GGM.Marker({ // สร้างตัว marker
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                        title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
                    });
                     
                    //  กรณีตัวอย่าง ดึง title ของตัว marker มาแสดง
                    infowindow[k] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array           
                        content: my_Marker[k].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow
                    });
 
                    //  กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง
                   GGM.event.addListener(my_Marker[k], 'click', function(){ // เมื่อคลิกตัว marker แต่ละตัว            
                   infowindow[k].open(map, my_Marker[k]); //  แสดง info window
                });             
 
                    // ให้ marker แต่ละตัว กดเปิด infowindow อัตโนมัติ
                    GGM.event.trigger(my_Marker[k], 'click');
                });// end loop data
            }// end check data 
        }// end success 
    });// End ajax function 
           
}
$(function(){
    // โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว
    // ค่าตัวแปร ที่ส่งไปในไฟล์ google map api
    //  callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize
    $("<script/>", {
      "type": "text/javascript",
    }).appendTo("body");    
});
</script>  
<script async defer src="https://maps.googleapis.com/maps/api/js?key=..............&callback=initialize"></script>
</body>
</html>


 











 


โดย:  สรรชัย แสนขุรัง IP: 118.174.30.xxx วันที่: 04-09-2018 เวลา: 11:13:22

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 1
เนื่องจากในเว็บไซต์ ninenik.com ใน google map จะใช้ jQuery ประกอบ จึงจำเป็น
ต้องมี jquery script ด้วย ซึ่งจริงๆ แล้ว เราสามารถที่จะไม่ใช้ jquery ก็ได้ แต่ทั้งนี้
โค้ดก็ต้องปรับเปลี่ยนไปใช้รูปแบบที่เรียกใช้งานแบบ javascript ปกติ สามารถดูวิธี
การใช้งานและตัวอย่างที่ document ของ google map ได้เลย


โดย:  Ninenik IP: 14.207.214.xxx วันที่: 04-09-2018
 ความคิดเห็นที่ 2
ถ้าผมต้องการแสดง text บน marker โดยที่ไม่ต้องคลิก marker ใน javascript  ต้องทำยังไงครับ 


<!DOCTYPE html>
<html>
  <head>
    <title>Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <meta charset="utf-8">
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var mapOptions = {
          center: {lat: 13.847860, lng: 100.604274},
          zoom: 6,
        }
        var maps = new google.maps.Map(document.getElementById("map"),mapOptions);//กำหนดค่าเริ่มต้นให้กับ id map
        var marker, info; //สร้างตัวแปล
        $.getJSON("jsondata.php",function(jsonObj) {//ดึงข้อมูลjson จากไฟล์ jsondata.php แล้วทำการloop data โดยใช้loop each
          $.each(jsonObj, function(i, item){// ใช้ each loop ข้อมูลใน jsonObj, สร้างparameter i,item มาไว้รับค่า
            marker = new google.maps.Marker({//สร้างจุดมาค
            position: new google.maps.LatLng(item.lat,item.lng),//กำหนด position แล้ว set lat long ในการ loop แต่ละรอบ
            map : maps,//แสดงใน maps
          });
          info = new google.maps.InfoWindow();//สร้างpopup ในการแสดง,อธิบาย
          google.maps.event.addListener(marker,'click', (function(marker, i){//แสดงfunctionเมื่อเรา click จุด mark
          return function() {
             info.setContent(item.name);
             info.open(maps, marker);
           }
 
          })(marker, i));//ส่งค่าของparameterในการทำงานแต่ละรอบ
        });
      });
    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC3I4EnpJKFV_LHMXwiRoCMIUWGiDAaxR4&callback=initMap"async defer></script>
  </body>
</html>

jsondata.php

<?php
header('Content-Type: application/json');
$objConnect = mysql_connect("localhost","root","");
$objDB = mysql_select_db("map_api");
mysql_query("SET NAMES UTF8");
$strSQL = "SELECT * FROM lat_long  ";
$objQuery = mysql_query($strSQL);
$resultArray = array();//สร้าง arrayเปล่ามาloop ข้อมูลในdatabase 
while($obResult = mysql_fetch_array($objQuery))
{
array_push($resultArray,$obResult);//เก็บข้อมูลใส่array
}
mysql_close($objConnect);
echo json_encode($resultArray);//json_encode จัดรูปแบบตัวแปรphp เป็น json string ส่งไปยัง javascript
?>


โดย:  สรรชัย แสนขุรัง IP: 118.174.30.xxx วันที่: 04-09-2018 เวลา: 16:36:12
 ความคิดเห็นที่ 3
ลองแทรก

google.maps.event.trigger(marker, 'click');


เข้าไปดู ประมาณนี้

          google.maps.event.addListener(marker,'click', (function(marker, i){//แสดงfunctionเมื่อเรา click จุด mark
          return function() {
             info.setContent(item.name);
             info.open(maps, marker);
           }
 
          })(marker, i));//ส่งค่าของparameterในการทำงานแต่ละรอบ
          google.maps.event.trigger(marker, 'click');

จริงๆ โค้ดที่ส่งมาก็ใชิ้ jquery ในการดึงข้อมูลผ่าน $.getJSON... อยู่แล้ว ก็สามารถใช้ jquery ได้เลย


โดย:  Ninenik IP: 14.207.214.xxx วันที่: 04-09-2018
 ความคิดเห็นที่ 4
ขอบคุณมากครับพี่แอดมิน ที่ตอบทุกคำถามเลย พอดีผมพึ่งเริ่มศึกษาgoogle map api ยังไม่ค่อยมีความรู้เท่าไหร่ยังไงก็รบกวนด้วยนะครับ Ninenik


โดย:  สรรชัย แสนขุรัง IP: 118.174.30.xxx วันที่: 05-09-2018 เวลา: 09:27:37