ใช้ jquery tab กับ google map แสดง map ไม่เต็ม V2

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ใช้ jquery tab กับ google map แสดง map ไม่เต็ม V2

ใช้ jquery tab กับ google map แสดง map ไม่เต็ม V2
<?php
 
/*$conn=mysql_connect('localhost','go','123456');
mysql_select_db('go',$conn);
mysql_query("SET NAMES TIS620");
mysql_query("SET character_set_results=UTF8");
mysql_query("SET character_set_client=UTF8");
mysql_query("SET character_set_connection=UTF8");*/
require("connect/connect.php");
/*include("/nv/connect/connect.php")*/
$result = mysql_query('SELECT * FROM atm');
 $num = mysql_num_rows($result);
//echo $num;
//exit; 
$_POST['locat_name']= 3;
if($_POST['locat_name']!=''){
$d=$_POST['locat_name'];
$showMaps=mysql_fetch_array(mysql_query('SELECT * FROM cat WHERE ID='.$d));
if($showMaps)
{
$name1=$showMaps['Type'];
 
 
 
}}
//$names= iconv("UTF-8","tis-620",$name[1]);
//echo $name[1];
//exit();
$lag=3;
?>
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
<head>
<title>Simple JQuery Modal Window from Queness</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.2.custom.css">
 
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-ui-1.7.2.custom.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> -->
 
 <!-- <script src="http://maps.google.com/maps/api/js?sensor=false"type="text/javascript"></script> -->
 <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th"type="text/javascript"></script>
 
<!------------------------------ POST --------------------------------------------------------------->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
 
$(document).ready(function() {
//$("#tabs").tabs(); 
 
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
 
//Get the A tag
var id = $(this).attr('href');
 
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
 
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
 
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
 
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
              
//Set the popup window to center
$(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
 
//transition effect
$(id).fadeIn(2000); 
 
});
 
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
 
$('#mask').hide();
$('.window').hide();
});
 
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
 
$(window).resize(function () {
 
  var box = $('#boxes .window');
 
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
      
        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});
               
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
 
        //Set the popup window to center
        box.css('top',  winH/2 - box.height()/2);
        box.css('left', winW/2 - box.width()/2);
 
});
 
});
 
</script>
 
 
 <!-- <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>  -->
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>  
 <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>  
 <!--<script type="text/javascript">  
$(function(){  
 $(document.body).unload(function(){  
   GUnload();  
 });  
});  
</script>  -->
<script type="text/javascript">
$(function(){
// แทรกโค้ต jquery
// กำหนดแบบทั่วไป
$("#tabs").tabs(); 
/*$("a[href='#tabs-1']").click(function(){
initialize();
});*/
 
// กำหนดแบบเลื่อนหัวข้อซ้าย ขวาได้
// $("#tabs").tabs().find(".ui-tabs-nav").sortable({axis:'x'});
 
// กำหนดแบบให้ซ่อนรายละเอียด เมื่อคลิกที่หัวข้อแท็บซ้ำ
// $("#tabs").tabs({collapsible: true});
 
// กำหนดให้แสดงรายละเอียดเมื่อนำเมาท์มาอยู่เหนือหัวข้อแท็บ
// $("#tabs").tabs({event: 'mouseover'});
}); 
</script> 
<script type="text/javascript">
  var loadingHtml = "Loading..."; // this could be an animated image
      var imageLoadingHtml = "Image loading...";
    var http = getXMLHTTPRequest();
      //----------------------------------------------------------------
    function uploadImage() {
        var uploadedImageFrame = window.uploadedImage;
     uploadedImageFrame.document.body.innerHTML = loadingHtml;
     // VALIDATE FILE
        var imagePath = uploadedImageFrame.imagePath;
        if(imagePath == null){
          imageForm.oldImageToDelete.value = "";
        }
        else {
          imageForm.oldImageToDelete.value = imagePath;
        }
        imageForm.submit();
      }
      //----------------------------------------------------------------
      function showImageUploadStatus() {
        var uploadedImageFrame = window.uploadedImage;
        if(uploadedImageFrame.document.body.innerHTML == loadingHtml){
          divResult.innerHTML = imageLoadingHtml;
        }
        else {
          var imagePath = uploadedImageFrame.imagePath;
          if(imagePath == null){
            divResult.innerHTML = "No uploaded image in this form.";
          }
          else {
            divResult.innerHTML = "Loaded image: " + imagePath;
          }
        }
      }
      //----------------------------------------------------------------
      function getXMLHTTPRequest() {
      try {
        xmlHttpRequest = new XMLHttpRequest();
      }
      catch(error1) {
        try {
          xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
          }
          catch(error2) {
         try {
         xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch(error3) {
         xmlHttpRequest = false;
         }
          }
        }
        return xmlHttpRequest;
      }
      //----------------------------------------------------------------
      function sendData() {
      var url = "submitForm.php";
        var parameters = "imageDescription=" + dataForm.imageDescription.value;
        var imagePath = window.uploadedImage.imagePath;
        if(imagePath != null){
          parameters += "&uploadedImagePath=" + imagePath;
        }
        
      http.open("POST", url, true);
    
        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        http.setRequestHeader("Content-length", parameters.length);
        http.setRequestHeader("Connection", "close");
    
      http.onreadystatechange = useHttpResponse;
      http.send(parameters);
      }
      //----------------------------------------------------------------
      function submitFormIfNotImageLoading(maxLoadingTime, checkingIntervalTime) {
        if(window.uploadedImage.document.body.innerHTML == loadingHtml) {
          if(maxLoadingTime <= 0) {
            divResult.innerHTML = "The image loading has timed up. "
                                + "Please, try again when the image is loaded.";
          }
          else {
            divResult.innerHTML = imageLoadingHtml;
            maxLoadingTime = maxLoadingTime - checkingIntervalTime;
            var recursiveCall = "submitFormIfNotImageLoading(" 
                              + maxLoadingTime + ", " + checkingIntervalTime + ")";
            setTimeout(recursiveCall, checkingIntervalTime);
          }
        }
 
        else {
          sendData();
        }
      }
    //----------------------------------------------------------------
      function submitForm() {
        var maxLoadingTime = 3000; // milliseconds
        var checkingIntervalTime = 500; // milliseconds
        submitFormIfNotImageLoading(maxLoadingTime, checkingIntervalTime);
      }
      //----------------------------------------------------------------
      function useHttpResponse() {
      if (http.readyState == 4) {
        if (http.status == 200) {
          divResult.innerHTML = http.responseText;
          dataForm.reset();
          imageForm.reset();
          window.uploadedImage.document.body.innerHTML = "";
          window.uploadedImage.imagePath = null;
        }
      }
      }
 
 
</script>
<script language="javascript" src="ajax.js"></script>
<script language="javascript">
function doajax(mydata){
var ajax1=createAjax(); 
ajax1.onreadystatechange=function(){
if(ajax1.readyState==4 && ajax1.status==200){
document.getElementById('myplace').innerHTML=ajax1.responseText;
}else{
return false;
}
}
ajax1.open("POST","data_post.php",true);
ajax1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
ajax1.send("name=" document.form1.name.value);
}
</script>
 
<!------------------------------ POST --------------------------------------------------------------->
 
<style>
 
 
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:8900;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:fixed;
  left:0;
  top:0;
  width:500px;
  height:300px;
  display:none;
  z-index:9000;
  padding:20px;
}
 
#boxes #dialog {
position: absolute;
  width:600px; 
  height:600px;
  margin-top:-50px;
  padding:10px;
  background-color:#ffffff;
}
 
/*#boxes #dialog1 {
  width:375px; 
  height:203px;
}
 
#dialog1 .d-header {
  background:url(images/login-header.png) no-repeat 0 0 transparent; 
  width:375px; 
  height:150px;
}
 
#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}
 
#dialog1 .d-blank {
  float:left;
  background:url(images/login-blank.png) no-repeat 0 0 transparent; 
  width:267px; 
  height:53px;
}
 
#dialog1 .d-login {
  float:left;
  width:108px; 
  height:53px;
}
 
#boxes #dialog2 {
  background:url(images/notice.png) no-repeat 0 0 transparent; 
  width:326px; 
  height:229px;
  padding:50px 0 20px 25px;
}*/
.ui-tabs{  
        font-family:tahoma;  
        font-size:11px;  
    }  
/*=========================================*/
html {
  height: auto;
}
 
body {
  height:auto;
  margin: 0;
  padding: 0;
  font: 15px/18px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  font-weight: normal;
  
}
#map {
  width: 70%;
  height: auto;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  top:0;
  margin-top: 45px;
  background: black;
  
}
@media print {
  #map {
    height: 950px;
  }
}
 
#map_canvas { 
width:550px;
height:300px;
margin: auto;
 
 
}
</style>
 
 
</head>
<body>
  <div id="map"></div>
   <header>
   <div class="container"></div> 
    
<!-- =====================================  header meun  ============================================ -->
      <div> 
 
 <h1><a href="index.html">NanViews</a> </h1>
<form class="search" method="post" action="index.html">
<input type="search" name="q" placeholder="Search..." autocomplete="off">
</form>
<ul id="oe_menu" class="oe_menu">
<!-- <li class="logo"><a href="index.html">NanViews</a> </li> -->
 
<li><a href="#dialog" name="modal">POST</a>
</li>
<li><a href="#"><img  src="<?=$icon?>tasks03.png"></a>
<div>
<ul>
<li class="oe_heading">Fashion Shows</li>
<li><a href="#">Milano</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Berlin</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">London</a></li>
</ul>
<ul>
<li class="oe_heading">Events</li>
<li><a href="#">Fashion Party 2011</a></li>
<li><a href="#">Evening specials</a></li>
<li><a href="#">Fashion Day Milano</a></li>
<li><a href="#">Model Workshops</a></li>
</ul>
<ul>
<li class="oe_heading">Media</li>
<li><a href="#">Wallpapers</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Contest 2011</a></li>
<li><a href="#">Fashion Mania</a></li>
<li><a href="#">Green Earth Day</a></li>
</ul>
</div>
</li>
<li><a href="#"><img src="<?=$icon?>messages03.png"></a>
<div  class="oe_views">
<!-- <ul> -->
<ul class="oe_views_full"> 
<li class="oe_setting">Fashion Fragrances</li>
<li><a href="#">Deálure</a></li>
<li><a href="#">Violet Woman</a></li>
<li><a href="#">Deep Blue for Men</a></li>
<li><a href="#">New York, New York</a></li>
<li><a href="#">Illusion</a></li>
</ul>
</div>
</li>
<li><a href="#">Myliveerror error</a>
<!-- <div>
<ul>
<li class="oe_heading">Shows 2010</li>
<li><a href="#">Milano</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Berlin</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">London</a></li>
</ul>
<ul>
<li class="oe_heading">Shows 2011</li>
<li><a href="#">Milano</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Berlin</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">London</a></li>
</ul>
<ul>
<li class="oe_heading">Special Events</li>
<li><a href="#">Fashion Party 2011</a></li>
<li><a href="#">Fashion Countdown Party 2010</a></li>
<li><a href="#">Fashion Day Milano</a></li>
<li><a href="#">Model Workshops</a></li>
</ul>
</div> -->
</li>
<li><a href="#"><img src="<?=$icon?>settings03.png"></a>
 
<div  class="oe_setting">
 
<!-- <ul>
<li class="oe_heading">Europe</li>
<li><a href="#">Milano</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Berlin</a></li>
<li><a href="#">London</a></li>
</ul>
<ul>
<li class="oe_heading">Asia</li>
<li><a href="#">Hong Kong</a></li>
<li><a href="#">Tokio</a></li>
<li><a href="#">New Delhi</a></li>
<li><a href="#">Beijing</a></li>
</ul> -->
 
<ul class="oe_full">
 
<li class="oe_setting">การตั้งค่า</li>
<li><a href="#">โปรไฟล์</a></li>
<li><a href="#">จัดการหน้า</a></li>
<li><a href="#">การตั้งค่า</a></li>
<li><a href="#">ออกจากระบบ</a></li>
 
</ul>
 
</div>
</li>
</ul>
</div> 
    <!-- </div> -->
<!-- =====================================  header meun ============================================ -->
  </header>
  <!-- <div id="chat"></div> -->
   <div class="chat">
   adsfasdfasasdfadfadf<br>
   dsafasfdasfass<br>
   asdfawefafdaawf<br>
   
         <!--<div id="map_canvas"></div> -->
   </div> 
   <script type="text/javascript">
   
   /*if (typeof jQuery != 'undefined') {
     alert("jQuery library is loaded!");
}else{
     alert("jQuery library is not found!");
}   */
 
var a=0;
var nameloca = new Array();
var lat = new Array();
var lng = new Array();
var zoom = new Array();
var t=0;
t = '<?=$num?>';
 
<?for($i=0;$i<=$num;$i++)
{
if($name1=='atm'){
$showMaps=mysql_fetch_array(mysql_query('SELECT * FROM atm WHERE ID='.$i));}
if($name1=='hotel'){
$showMaps=mysql_fetch_array(mysql_query('SELECT * FROM hotel WHERE ID='.$i));}
if($showMaps)
{
$id[$i]=$showMaps['ID'];
$name[$i]=$showMaps['Name'];
$lat[$i]=$showMaps['Lat'];
$lng[$i]=$showMaps['Lot'];
$zoom[$i]=$showMaps['zoom_mps'];?>
 
nameloca[a]= '<?=$name[$i]?>';
//document.write(nameloca[a]+"<br>" );
lat[a]= '<?=$lat[$i]?>';
//document.write(lat[a]+"<br>" );
lng[a]= '<?=$lng[$i]?>';
//document.write(lng[a]+"<br>" );
zoom[a]= '<?=$zoom[$i]?>';
//document.write(zoom[a]+"<br>" );
a++;
//echo $name[$i];
<?}} ?>
<? $pic_pro="images/pic_profile/sss.png" ?> 
 var pic_pro;
 pic_pro='<?=$pic_pro?>'
 
 /*var locations = [   
    ['สี่แยก หนองครก', 15.09234482843765, 104.30643081665039, 1],  
['วิทยาลัยเทคนิคศรีสะเกษ', 15.10769597211894, 104.3216872215271, 2], 
['โรงพยาบาลจังหวัดศรีสะเกษ', 15.11544363118582, 104.32016372680664, 3]
]; */ 
/* ===================================== var map ==========================================*/   
var map = new google.maps.Map(document.getElementById('map'), {      
zoom: 13,      
center: new google.maps.LatLng(18.7775775, 100.7753066),      
mapTypeId: google.maps.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่  
scaleControl:true//,scaleControlOptions:{ // กำนหนดตำแหน่าง และรูปแบบ style ของสเกลอัตราส่วนของแผนที่  
        //position:GGM.ControlPosition.BOTTOM_LEFT, // จัดตำแหน่ง    
        //style:GGM.ScaleControlStyle.DEFAULT // จัดรูปแบบ style      
    //}     
});    
 
/* ===================================== var map ==========================================*/
/* ===================================== var map ==========================================   
var mappost = new google.maps.Map(document.getElementById('map_canvas'), {      
zoom: 13,      
center: new google.maps.LatLng(18.7775775, 100.7753066),      
mapTypeId: google.maps.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่  
scaleControl:true//,scaleControlOptions:{ // กำนหนดตำแหน่าง และรูปแบบ style ของสเกลอัตราส่วนของแผนที่  
        //position:GGM.ControlPosition.BOTTOM_LEFT, // จัดตำแหน่ง    
        //style:GGM.ScaleControlStyle.DEFAULT // จัดรูปแบบ style      
    //}     
});    
 
/* ===================================== var map ==========================================*/
var infowindow = new google.maps.InfoWindow(); 
//document.write(lat[0])
var a=0;   
var marker, i;    for (i = 0; i < t; i++) {        
marker = new google.maps.Marker({    
//animation: google.maps.Animation.DROP,
//draggable:true,
//animation: google.maps.Animation.BOUNCE,    
position: new google.maps.LatLng(lat[a], lng[a]),       
map: map,
icon: pic_pro 
});     
 
google.maps.event.addListener(marker, 'click', (function(marker, a) {        
return function() {         
 infowindow.setContent(nameloca[a]);
         
 infowindow.open(map, marker);        
 }      
 })
 (marker, i));  
 a++;  
 }  
/* ================================================= map post ==========================================================
var geocoder; // กำหนดตัวแปรสำหรับ เก็บ Geocoder Object ใช้แปลงชื่อสถานที่เป็นพิกัด
//var mappost; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var my_Marker; // กำหนดตัวแปรสำหรับเก็บตัว marker
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
 
 
/* ================================================= map post ==========================================================*/
 
 </script>
  <!-- <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> -->
        <script type="text/javascript">
            $(function() {
var $oe_menu = $('#oe_menu');
var $oe_menu_items = $oe_menu.children('li');
var $oe_overlay = $('#oe_overlay');
var $body = $("body");
 
                $oe_menu_items.bind('click',function(){
var $this = $(this);
$this.addClass('slided selected');
$this.children('div').css('z-index','9999').stop(true,true).fadeIn(100,function(){
$oe_menu_items.not('.slided').children('div').css('z-index','9999');
$this.removeClass('slided');
});
})/*.bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('selected').children('div').css('z-index','1');
});
 
$oe_menu.bind('mouseenter',function(){
var $this = $(this);
$oe_overlay.stop(true,true).fadeTo(200, 0.6);
$this.addClass('hovered');
}).bind('mouseenter',function(){
var $this = $(this);
$this.removeClass('hovered');
$oe_overlay.stop(true,true).fadeTo(200, 0);
$oe_menu_items.children('div').hide();
})*/
$body.bind('click',function() {
/*$("#services-container-id").hide();*/
var $this = $(this);
$oe_menu_items.not('.slided').children('div').fadeOut();
$this.removeClass('slided'); });
            });
        </script>
 
 
<!--<ul>
<li><a href="#dialog" name="modal">POST</a></li>
</ul>-->
<div id="boxes">
  
  <div id="dialog" class="window" align="right">
<!--Simple Modal Window | -->
<a href="#"class="close"/>Close it</a>
 <div id="tabs">  
        <ul>  
            <li><a href="#tabs-1">อัพเดตสถานะ</a></li>  
            <li><a href="#tabs-2">เพิ่มรูปภาพ</a></li>  
            <!--<li><a href="#tabs-3">หัวข้อแท็บที่ 3</a></li>-->  
        </ul>  
        <div id="tabs-1"> 
        <p><form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<table width="200" border="0">
      <tr>
 
  <td colspan="2"><textarea name="name" type="text" id="name"  placeholder="คุณกำลังคิดอะไรอยู่"  style="width:440px;height:20px;"></textarea></td>
     </tr>
      <tr>
        <td width="380"> </td>
 
   <td width="56" align="right"><input type="button" name="Button" value="Send" onClick="doajax()" /></td>
   </tr>
    </table>
<!-- ================================================================= map post ====================================================== -->
  <div id="map_canvas"></div>
 <div id="showDD" > 
<!--textbox กรอกชื่อสถานที่ และปุ่มสำหรับการค้นหา เอาไว้นอกแท็ก <form>-->
Search Place 
  <input name="namePlace" type="text" id="namePlace" size="40" />
  <input type="button" name="SearchPlace" id="SearchPlace" value="Search" />
  <hr />
<!--  <form> เก็บข้อมูลสำหรับนำไปบันทึกลงฐานข้อมูล หรือนำไปใช้อื่นๆ-->
  <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">    Latitude  
    <input name="lat_value" type="text" id="lat_value" value="0" size="17" />  
    Longitude  
    <input name="lon_value" type="text" id="lon_value" value="0" size="17" />  
  Zoom  
  <input name="zoom_value" type="text" id="zoom_value" value="0" size="5" />  
  <input type="submit" name="button" id="button" value="บันทึก" />  
  </form>  
</div>
  <!--- <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"> 
 </script> -->
<script type="text/javascript">
var geocoder; // กำหนดตัวแปรสำหรับ เก็บ Geocoder Object ใช้แปลงชื่อสถานที่เป็นพิกัด
var mappost; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var my_Marker; // กำหนดตัวแปรสำหรับเก็บตัว marker
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
 
//function () {
$(function(){  // ฟังก์ชันแสดงแผนที่
GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
//geocoder = new GGM.Geocoder(); // เก็บตัวแปร google.maps.Geocoder Object
// กำหนดจุดเริ่มต้นของแผนที่
var my_Latlng  = new GGM.LatLng(18.7539514,100.7619561);
var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
var my_DivObj=$("#map_canvas")[0];
// กำหนด Option ของแผนที่
var myOptions = {
zoom:13, // กำหนดขนาดการ zoom
center: my_Latlng , // กำหนดจุดกึ่งกลาง จากตัวแปร my_Latlng
mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่ จากตัวแปร my_mapTypeId
};
 
/* =========================================== content map ==============================================*/
var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'
      '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'
      'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';
 
  var infowindow = new GGM.InfoWindow({
      content: contentString
 });
 
/* =========================================== content map ==============================================*/
mappost = new GGM.Map(my_DivObj,myOptions); // สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ mappost
 
my_Marker = new GGM.Marker({ // สร้างตัว marker ไว้ในตัวแปร my_Marker
position: mappost.getCenter(),  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
map: mappost, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้
title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
 
// กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร
GGM.event.addListener(my_Marker, 'dragend', function() {
var my_Point = my_Marker.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
        mappost.panTo(my_Point); // ให้แผนที่แสดงไปที่ตัว marker
        $("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value
        $("#lon_value").val(my_Point.lng());  // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value 
        $("#zoom_value").val(mappost.getZoom());  // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_valu
});
GGM.event.addListener(mappost, 'center_changed', function() {
var my_Point = mappost.getCenter();
//map.setCenter(my_Point); // กำหนดจุดกลางของแผนที่ไปที่ พิกัดผลลัพธ์
//my_Marker.setMap(map); // กำหนดตัว marker ให้ใช้กับแผนที่ชื่อ map
my_Marker.setPosition(my_Point);
//map.setCenter(my_Point.getPosition());
$("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value
        $("#lon_value").val(my_Point.lng());  // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value 
        $("#zoom_value").val(mappost.getZoom());  // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_valu
//map.setCenter(new_Marker.getPosition());
//map.getCenter()
//window.setTimeout(function() {
     // map.panTo(my_Marker.getPosition());
    //},500);
 });
// กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
GGM.event.addListener(mappost, 'zoom_changed', function() {
$("#zoom_value").val(mappost.getZoom());   // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value
});
 
/*GGM.maps.event.trigger(mappost, 'resize',function() {
mappost.setZoom( mappost.getZoom() );
}); */
/* =============================================== click map ================================================*/
// GGM.event.addListener(my_Marker, 'click', function() {
//infowindow.open(map,my_Marker);
 
//});
 
/* =============================================== close funtion map post================================================*/
//}
});// close funtion map post
/*
$(function(){
// ส่วนของฟังก์ชันค้นหาชื่อสถานที่ในแผนที่
var searchPlace=function(){ // ฟังก์ชัน สำหรับคันหาสถานที่ ชื่อ searchPlace
var AddressSearch=$("#namePlace").val();// เอาค่าจาก textbox ที่กรอกมาไว้ในตัวแปร
if(geocoder){ // ตรวจสอบว่าถ้ามี Geocoder Object 
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); // กำหนดตัว marker ให้ใช้กับแผนที่ชื่อ map
my_Marker.setPosition(my_Point); // กำหนดตำแหน่งของตัว marker เท่ากับ พิกัดผลลัพธ์
$("#lat_value").val(my_Point.lat());  // เอาค่า latitude พิกัดผลลัพธ์ แสดงใน textbox id=lat_value
$("#lon_value").val(my_Point.lng());  // เอาค่า longitude พิกัดผลลัพธ์ แสดงใน textbox id=lon_value 
$("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_valu
}else{
// ค้นหาไม่พบแสดงข้อความแจ้ง
alert("Geocode was not successful for the following reason: " + status);
$("#namePlace").val("");// กำหนดค่า textbox id=namePlace ให้ว่างสำหรับค้นหาใหม่
}
});
}
}
$("#SearchPlace").click(function(){ // เมื่อคลิกที่ปุ่ม id=SearchPlace ให้ทำงานฟังก์ฃันค้นหาสถานที่
searchPlace(); // ฟังก์ฃันค้นหาสถานที่
});
$("#namePlace").keyup(function(event){ // เมื่อพิมพ์คำค้นหาในกล่องค้นหา
if(event.keyCode==13){ // ตรวจสอบปุ่มถ้ากด ถ้าเป็นปุ่ม Enter ให้เรียกฟังก์ชันค้นหาสถานที่
searchPlace(); // ฟังก์ฃันค้นหาสถานที่
}
});
 
});*/
$(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
 
//tabs-1
/*$("<script/>", {
 "type": "text/javascript",
 src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
}).appendTo("body");*/
});
</script>  
 
<!-- ======================================================================================  map post ======================================== -->
   
</form>
<p id="myplace"></p></p>   
            
        </div>  
        <div id="tabs-2"> 
        <p><!--<h3>
      Form with preview of resized image with Ajax
    </h3>-->
    <form id="dataForm" name="dataForm">
      <!--Image description:--> 
      <input name="imageDescription" id="imageDescription" type="hidden" 
            size="30"/>
    </form>
    
    <form id="imageForm" name="imageForm" enctype="multipart/form-data"
          action="uploadImage.php" method="POST" target="uploadedImage">
      <!-- Next field limits the maximum size of the selected file to 2MB.
           If exceded the size, an error will be sent with the file. -->
      <input type="hidden" name="MAX_FILE_SIZE" value="2000000"


Yuttana 17-03-2014 13:03:06

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

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


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


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

 ความคิดเห็นที่ 1
ลองคำแนะนำ ตามนี้ดู

https://www.ninenik.com/forum_view_1057_1.html


ninenik 17-03-2014
 ความคิดเห็นที่ 2
ตัวอย่าง

รายละเอียดย่อยหัวข้อแท็บที่ 1

รายละเอียดย่อยหัวข้อแท็บที่ 2


โค้ดทดสอบ


<!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></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/pepper-grinder/jquery-ui.css" />    
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<style type="text/css">    
html,body{  
    padding:0px;  
    margin:0px;  
}  
body{
	font-size:12px;	
}
div.test_demo_main{
	margin:auto;
	width:75%;	
}
/* ปรับขนาดตัวอักษรของข้อความใน tabs   
สามารถปรับเปลี่ยน รายละเอียดอื่นๆ เพิ่มเติมเกี่ยวกับ tabs  
*/    
.ui-tabs{    
    font-family:tahoma;    
    font-size:11px;    
}    

div#map_canvas{  
    margin:auto;  
    width:600px;  
    height:550px;  
    overflow:hidden;  
}  
</style>    

</head>

<body>



<div class="test_demo_main">

<div id="tabs">  
    <ul>  
        <li><a href="#tabs-1">หัวข้อแท็บที่ 1</a></li>  
        <li><a href="#tabs-2">หัวข้อแท็บที่ 2</a></li>  
        <li><a href="#tabs-3">หัวข้อแท็บที่ 3</a></li>  
    </ul>  
    <div id="tabs-1">  
        <p>รายละเอียดย่อยหัวข้อแท็บที่ 1</p>  
    </div>  
    <div id="tabs-2">  
        <p>รายละเอียดย่อยหัวข้อแท็บที่ 2</p>  
    </div>  
    <div id="tabs-3">  
        <p>
        
 <div id="map_canvas"> </div>          
        
        </p>  
    </div>  
</div>  


</div>


<script src="//maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAcNvUk-nhOGHxtqYjlYDTRRQIRG6yKtEoODg8BfMKCyHqWgeYjhTbSKxVXskDpcNKx0i7Msr1-E1jhg" type="text/javascript"></script>  
<script type="text/javascript">   
function initialize() {   
  if (GBrowserIsCompatible()) {   
    var map = new GMap2(document.getElementById("map_canvas"));   
    var center = new GLatLng(13.77436,100.53458); // การกำหนดจุดเริ่มต้น  
    map.setCenter(center, 13);  // เลข 13 คือค่า zoom  สามารถปรับตามต้องการ   
    map.setUIToDefault();   
      
    var marker = new GMarker(center, {draggable: true});    
    map.addOverlay(marker);  
       
    GEvent.addListener(marker, "dragend", function() {  
        var point = marker.getPoint();  
        map.panTo(point);  
  
    });    
       
  }   
}   
</script>   

<script type="text/javascript">  
$(function(){  

    initialize();  
    $(document.body).unload(function(){  
            GUnload();  
    });  
    // แทรกโค้ต jquery  
    // กำหนดแบบทั่วไป  
    $("#tabs").tabs();   
	$("a[href='#tabs-3']").click(function(){  
		initialize();  
	});  	
  
    // กำหนดแบบเลื่อนหัวข้อซ้าย ขวาได้  
    //  $("#tabs").tabs().find(".ui-tabs-nav").sortable({axis:'x'});  
      
    // กำหนดแบบให้ซ่อนรายละเอียด เมื่อคลิกที่หัวข้อแท็บซ้ำ  
    // $("#tabs").tabs({collapsible: true});  
  
     // กำหนดให้แสดงรายละเอียดเมื่อนำเมาท์มาอยู่เหนือหัวข้อแท็บ  
     // $("#tabs").tabs({event: 'mouseover'});  
});  
</script>  

</body>
</html>


ninenik 17-03-2014
 ความคิดเห็นที่ 3
รบกวนแก้โค้ดให้หน่อยได้มั้ยครับ


yuttana 17-03-2014 15:06
 ความคิดเห็นที่ 4
พอดี ทำเป็น แบบ 2 Maps  ครับ..เพราะว่า ลอง ดูแล้ว ถ้าเอาเข้า..ไป.. โค๊ดแล้ว..  ไม่รู้จะเอาเข้าไปตรงไหนครับ  ผมต้องการให้ Tab ที่ 1 และ 2 เป็น Map ซึ่ง หมายถึงว่า..  ตอนนี้ มี Map 2 Map  ครับรบกวนด้วยว่า จะเอาไปใส่ตรงไหนดีครับ ขอบคุณมากครับ


yuttana 17-03-2014 15:16
 ความคิดเห็นที่ 5
แก้ไข เล็กน้อย ให้ Map เต็ม Tab

<!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>
    <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        html,
        body {
            padding: 0px;
            margin: 0px;
        }
        body {
            font-size: 12px;
        }
        div.test_demo_main {
            margin: auto;
            width: 550px;
        }
        /* ปรับขนาดตัวอักษรของข้อความใน tabs   
สามารถปรับเปลี่ยน รายละเอียดอื่นๆ เพิ่มเติมเกี่ยวกับ tabs  
*/
        .ui-tabs {
            font-family: tahoma;
            font-size: 13px;
        }
        .ui-tabs .ui-widget-content {
            padding: 0px;
        }
        div#map_canvas {
            margin: auto;
            width: auto;
            height: 250px;
            overflow: hidden;
        }
        div#map_canvas2 {
            margin: 0;
            width: auto;
            height: 250px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="test_demo_main">
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">หัวข้อแท็บที่ 1</a>
                </li>
                <li><a href="#tabs-2">หัวข้อแท็บที่ 2</a>
                </li>
                <li><a href="#tabs-3">หัวข้อแท็บที่ 3</a>
                </li>
            </ul>
            <div id="tabs-1">
                <p>รายละเอียดย่อยหัวข้อแท็บที่ 1</p>
            </div>
            <div id="tabs-2">
                <div id="map_canvas2"></div>
                <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">
                    <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">Latitude
                        <input name="lat_value" type="text" id="lat_value" value="0" />
                        <br />Longitude
                        <input name="lon_value" type="text" id="lon_value" value="0" />
                        <br />Zoom
                        <input name="zoom_value" type="text" id="zoom_value" value="0" size="5" />
                        <br />
                        <input type="submit" name="button" id="button" value="บันทึก" />
                    </form>
                </div>
            </div>
            <div id="tabs-3">
                <div id="map_canvas"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            // แทรกโค้ต jquery  
            // กำหนดแบบทั่วไป  
            $("#tabs").tabs();
            $("a[href='#tabs-2']").click(function () {
                initialize2();
            });
            $("a[href='#tabs-3']").click(function () {
                initialize();
            });
        });
    </script>
    <script type="text/javascript">
        var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้  
        var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น  
         // ฟังก์ชันสำหรับสร้างแผนที่ ใน tab ที่ 1 ใช้ชื่อว่า initialize()
        function initialize() { // ฟังก์ชันแสดงแผนที่  
            GGM = new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM  
            // กำหนดจุดเริ่มต้นของแผนที่  
            var my_Latlng = new GGM.LatLng(13.761728449950002, 100.6527900695800);
            var my_mapTypeId = GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง  
            // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas  
            var my_DivObj = $("#map_canvas")[0];
            // กำหนด Option ของแผนที่  
            var myOptions = {
                zoom: 13, // กำหนดขนาดการ zoom  
                center: my_Latlng, // กำหนดจุดกึ่งกลาง  
                mapTypeId: my_mapTypeId // กำหนดรูปแบบแผนที่  
            };
            map = new GGM.Map(my_DivObj, myOptions); // สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map  
            // เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี  
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var pos = new GGM.LatLng(position.coords.latitude, position.coords.longitude);
                    var infowindow = new GGM.InfoWindow({
                        map: map,
                        position: pos,
                        content: "คุณอยู่ที่นี่."
                    });
                    var my_Point = infowindow.getPosition(); // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย  
                    map.panTo(my_Point); // ให้แผนที่แสดงไปที่ตัว marker              
                    map.setCenter(pos);
                }, function () {
                    // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน  
                });
            } else {
                // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง  
            }
        }
         // ฟังก์ชันสำหรับสร้างแผนที่ ใน tab ที่ 2 ใช้ชื่อว่า initialize2()
        function initialize2() { // ฟังก์ชันแสดงแผนที่  
            GGM = new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM  
            // กำหนดจุดเริ่มต้นของแผนที่  
            var my_Latlng = new GGM.LatLng(13.761728449950002, 100.6527900695800);
            var my_mapTypeId = GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง  
            // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas  
            var my_DivObj = $("#map_canvas2")[0];
            // กำหนด Option ของแผนที่  
            var myOptions = {
                zoom: 13, // กำหนดขนาดการ zoom  
                center: my_Latlng, // กำหนดจุดกึ่งกลาง  
                mapTypeId: my_mapTypeId // กำหนดรูปแบบแผนที่  
            };
            map = new GGM.Map(my_DivObj, myOptions); // สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map  
            var my_Marker = new GGM.Marker({ // สร้างตัว marker  
                position: my_Latlng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
                map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
                draggable: true, // กำหนดให้สามารถลากตัว marker นี้ได้  
                title: "คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
            });
            // กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร  
            GGM.event.addListener(my_Marker, "dragend", function () {
                var my_Point = my_Marker.getPosition(); // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย  
                map.panTo(my_Point); // ให้แผนที่แสดงไปที่ตัว marker         
                $("#lat_value").val(my_Point.lat()); // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value  
                $("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value   
                $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value  
            });
            // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom  
            GGM.event.addListener(map, "zoom_changed", function () {
                $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value    
            });
        }
        $(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: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
            }).appendTo("body");
        });
        $(document).mousemove(function (e) {
            $('.logo').offset({
                left: e.pageX,
                top: e.pageY + 20
            });
        });
    </script>
    <img class="logo" src="//ssl.gstatic.com/images/logos/google_logo_41.png" alt="Google">
</body>

</html>


deawx 21-03-2014 09:01
1







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