ตัวอย่าง Code Google map ทำงานบน Bootstrap

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
M004
PHP VIP Members
PHP VIP Members
โพสต์: 1323
ลงทะเบียนเมื่อ: 01/01/1970 7:00 am

ตัวอย่าง Code Google map ทำงานบน Bootstrap

โพสต์โดย M004 » 14/09/2013 11:18 pm

สำหรับตัวอย่างนี้ จะเป็นการใช้งาน google map บน Bootstrap ซึงรองรับการใช้งาน บน Computer , tablet และ smartphone

ตัวอย่างการใช้งาน บน Computer
home.png
home.png (364.64 KiB) เปิดดู 2114 ครั้ง


ตัวอย่างการใช้งาน บน tablet
talet1.png
talet1.png (454.6 KiB) เปิดดู 2114 ครั้ง


ตัวอย่างการใช้งาน บน smartphone
sm1.png
sm1.png (147.11 KiB) เปิดดู 2114 ครั้ง

sm2.png
sm2.png (263.9 KiB) เปิดดู 2114 ครั้ง



Code Google map และวิธีใช้งาน

- ส่วนแรก สร้างไฟล genMerker.php สำหรับ ดึง Marker สถานที่ต่างๆจาก database

โค้ด: เลือกทั้งหมด


<?php
header
("Content-type:text/xml; charset=UTF-8");              
header("Cache-Control: no-store, no-cache, must-revalidate");             
header("Cache-Control: post-check=0, pre-check=0"false);   

echo 
'<?xml version="1.0" encoding="utf-8"?>';
?>
<markers>
<?php

$q
="SELECT * FROM map";
$qr=mysql_query($q);
while(
$rs=mysql_fetch_array($qr)){
?>
    <marker id="<?=$rs['id_mps']?>">
        <name><?=$rs['name_mps']?></name>
        <latitude><?=$rs['lat_mps']?></latitude>
        <longitude><?=$rs['lng_mps']?></longitude>
    </marker>
<?php }  ?>
</markers>


สร้างไฟล์ googlemap.php เพื่อ สร้าง map สำหรับการใช้งาน

โค้ด: เลือกทั้งหมด


<html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


</
head>

<
body>
  <
div id="map_canvas"></div>
 <
script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด
var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
function initialize() { // ฟังก์ชันแสดงแผนที่
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
    // กำหนดจุดเริ่มต้นของแผนที่
    var my_Latlng  = new GGM.LatLng(13.748541215114733,100.56244892657469);
    // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
    var my_DivObj=$("#map_canvas")[0]; 
    // กำหนด Option ของแผนที่
    var myOptions = {
        zoom: 12, // กำหนดขนาดการ 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 เรียกใช้ไฟล์ xml 
        dataType: "xml",
        success:function(xml){
            $(xml).find('marker').each(function(i){ // วนลูปดึงค่าข้อมูลมาสร้าง marker  
                var markerID=$(this).find("id").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
                var markerName=$(this).find("name").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
                var markerLat=$(this).find("latitude").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
                var markerLng=$(this).find("longitude").text();    // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน                
                var markerLatLng=new GGM.LatLng(markerLat,markerLng);
                my_Marker[i] = new GGM.Marker({ // สร้างตัว marker เป็นแบบ array
                    position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                    map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                    title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
                });
                //  กรณีตัวอย่าง ดึง title ของตัว marker มาแสดง
                infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array
                    content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow
                });
            //     กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง
                //infowindow[i] = new GGM.InfoWindow({   
            //content:$.ajax({   
            //url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล   
            //data:'placeID='+markerID,// ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
            
            //async:false   
            //    }).responseText   
        //    });                
                
                GGM.event.addListener(my_Marker[i], 'click', function(){ // เมื่อคลิกตัว marker แต่ละตัว
                    if(infowindowTmp){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่
                        infowindow[infowindowTmp].close();  // ถ้ามีให้ปิด infowindow ที่เปิดอยู่
                    }
                    infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก
                    infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน
                });            
            });
        }    
    });        

}
$(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: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
    }).appendTo("body");    
});
</script>  


</body>
</html>


สุดท้าย สร้างไฟล์ index.php สำหรับเรียกใช้งาน map บน bootstrap

โค้ด: เลือกทั้งหมด


    <?php
    
<!DOCTYPE html>
    <
html>
    <
head>
    <
title>Bootstrap 101 Template</title>
    <
meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 
Bootstrap -->
    <
link href="bootstrap/css/googlemap.css" rel="stylesheet" media="screen">
    <
link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <
link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
    
    
    
    <
script src="http://code.jquery.com/jquery.js"></script>
    <style type="text/css">  
    #map_canvas{  
        margin:auto;  
        height:300px;  
        overflow:hidden;  
    }  
    .hero-unit {
        padding: 10px;
    }
    </style> 


    </head>
    <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
             
            <form class="navbar-form pull-right" method="POST" action="login.php">
                 <?php
                
if(!empty($_SESSION["strMem"])) {
                
?><span class="brand"> สวัสดีคุณ</span>
                <a class="brand" href="#"><?php echo $_SESSION["strName"]; ?></a>
                <span class="brand"><a href="logout.php">ออกจากระบบ</a></span>
                <?php
                
} else {
                
?>
              <input class="span2" type="text" placeholder="User" name="user">
              <input class="span2" type="password" placeholder="Password" name="password">
              <button type="submit" class="btn">Sign in</button>
              <?php
                
}
              
?>
            </form>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
        
   <div class="container">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <?php include_once('googlemap.php'); ?>
      </div>

    </div> <!-- /container -->
    
    
    <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
    </html>


ศึกษาการใช้งาน Bootstrap เพิ่มเติมได้ที่
- Booststap Knowledge
- การใช้งาน Bootstrap เบื้องต้น
- Bootstrap Menu Responsive ย่อเมนูตาม ขนาดหน้าจอ
- Typeahead ทำ Autocomplete บน Booststap
- การตรวจสอบข้อมูลซ้ำด้วย Ajax บน Booststap
- Auto Fill ข้อมูลด้วย Ajax บน Booststap
- bootstrap คืออะไร??



ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน