 |
อยากทำให้ google map มันเลื่อนตาม scrollbar ข้างๆอะครับ |
| |
 |
|
|
 |
 |
|
ลองเอา Code ที่เขียนไว้มาดูครับ 
|
 |
 |
 |
 |
| Date :
2013-04-21 06:58:12 |
By :
mr.win |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ได้แล้วครับ ขอบคุณคับ
|
| |
|
|
| |
| Date :
2013-04-21 10:31:28 |
By :
hizeddddd |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
Code (PHP)
<!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>Google Map API 3 - 01</title>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery.scroll-follow.js"></script>
<style type="text/css">
html {
height: 100%
}
body {
margin: 0;
padding: 0;
height: 2000px;
font-family: Georgia;
font-size: 0.9em;
line-height: 1.4em;
}
.example2 {
position: relative;
width: 180px;
margin: 10px;
padding: 20px 20px 20px;
border: 2px solid #42CBDC;
}
p {
margin: 7px 0 0 0;
}
a {
color: blue;
text-decoration: underline;
cursor: pointer;
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas {
width:550px;
position:relative;
height:400px;
margin:auto;
margin-top:100px;
}
</style>
<script type="text/javascript">
$( document ).ready( function ()
{
$( '.example2' ).scrollFollow(
{
speed: 600,
offset: 60,
}
);
}
);
</script>
</head>
<body>
<div id="map_canvas"class="example2">
</div>
<!--map -->
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var my_Marker; // กำหนดตัวแปรสำหรับเก็บตัว marker
var infowindow; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
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
my_Marker = new GGM.Marker({ // สร้างตัว marker
position: my_Latlng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
// draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้
title:"คลิกเพื่อดูรายละเอียดของสถานที่!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
infowindow = new GGM.InfoWindow({
content:$.ajax({
url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูลจากไฟล์ placeDetail.php มาแสดง
async:false
}).responseText
});
// กำหนด event ให้กับตัว marker เมื่อคลิกที่ตัว marker ให้แสดง infowindows
GGM.event.addListener(my_Marker, 'click', function() {
infowindow.open(map,my_Marker); // ให้แสดง infowindows รายละเอียดสถานที่ ทุกครั้งที่โหลดแผนที่แล้ว
});
// กำหนด event ให้กับตัวแผนที่ เมื่อส่วนของแผนที่ทำการโหลดเรียบร้อยแล้ว
GGM.event.addListener(map, 'tilesloaded', function() {
// ให้แสดง infowindows รายละเอียดสถานที่ ทุกครั้งที่โหลดแผนที่แล้ว
});
}
$(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>
<!--map -->
</body>
</html>
google map ตัวนี้มันใช้ได้คับ
แต่ที่ผมใช้เป็นแบบของพี่ deawx แต่mapมันไม่ขึ้น 
|
| |
|
|
| |
| Date :
2013-04-21 22:27:28 |
By :
hizeddddd |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
จัดไปครับ
|
| |
|
|
| |
| Date :
2013-04-22 06:24:23 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
