ใช้ 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


โค้ดทดสอบ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!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
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ