ทำไมถึงต้องการใช้ 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>

 











 


สรรชัย แสนขุรัง 04-09-2018 11:13:22

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

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


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


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

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


ninenik 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
?>


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

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


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

1
2
3
4
5
6
7
8
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 04-09-2018
 ความคิดเห็นที่ 4
ขอบคุณมากครับพี่แอดมิน ที่ตอบทุกคำถามเลย พอดีผมพึ่งเริ่มศึกษาgoogle map api ยังไม่ค่อยมีความรู้เท่าไหร่ยังไงก็รบกวนด้วยนะครับ Ninenik


สรรชัย แสนขุรัง 05-09-2018 09:27
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ