การแสดง ข้อมูลใน infowindows ของ google map ด้วย ajax ใน jQuery
10 September 2010ตัวอย่างโค้ด ต่อไปนี้ เหมาะสำหรับคนที่ต้องการแสดง รายละเอียดของสถานที่ใดที่หนึ่ง
บนแผนที่ google ตัวอย่าง เช่น ต้องการแสดงที่ตั้งของบริษัท บน google map พร้อมกับแสดง
infowindows หรือ popup แสดงรายละเอียดของสถานที่นั้น เช่น แสดงเบอร์โทร อีเมลล์ ที่ตั้ง เป็นต้น
โดยใช้ ajax ดึงข้อมูล จากไฟล์ที่เราได้ทำการจัดรูปแบบข้อมูลการแสดงรายละเอียด ของสถานที่
มาแสดง เมื่อทำการโหลดแผนที่ขึ้นมา หรือเมื่อคลิกที่ตำแหน่ง ของสถานที่จากตัว marker
ตัวอย่างโค้ด
<!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>
<style type="text/css">
html { height: 100% }
body {
height:100%;
margin:0;padding:0;
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:12px;
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas {
width:550px;
height:400px;
margin:auto;
margin-top:100px;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<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() {
infowindow.open(map,my_Marker); // ให้แสดง 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>
</body>
</html>
โค้ดไฟล์ placeDetail.php จัดรูปแบบ ตามต้องการ
<?php
header("Content-type:text/html; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
?>
<table width="300" border="0" cellspacing="2" cellpadding="0">
<tr>
<td width="10" rowspan="4">
<img src="http://www.thetalentjungle.com/hospitality_blog/media/1/20080216-w-hotel-residences-doha.jpg"
width="130" height="80">
</td>
<td width="10"> </td>
<td width="264">ชื่อสถานที่</td>
</tr>
<tr>
<td> </td>
<td>ที่ตั้ง </td>
</tr>
<tr>
<td> </td>
<td>รายละเอียด</td>
</tr>
<tr>
<td> </td>
<td><a href="http://www.thetalentjungle.com/hospitality_blog/media/1/20080216-w-hotel-residences-doha.jpg"
target="_blank">ลิ้งค์อ่านเพิ่ม</a></td>
</tr>
</table>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
25 Sep 08 ตรวจสอบโดเมน Domain ด้วย Ajax อ่าน 3193 18 Sep 10 ดึงข้อมูล จากฐานข้อมูล สร้าง รายการเครือข่าย แบบ tree ด้วย php อ่าน 2662 31 Mar 09 ดึงข้อมูลจากฐานข้อมูลเป็น excel ด้วย php รองรับภาษาไทย อ่าน 5629 25 Sep 08 หาตำแหน่งของ element แนวแกน x แกน y ด้วยฟังก์ชันของ jQuery อ่าน 2583 07 Dec 09 การเลื่อน scrollbar อัตโนมัติตาม การเลื่อนขึ้นลง ของ mouse ด้วย jQuery อ่าน 2934 27 Nov 09 แก้ปัญหาความกว้าง option ของ select tag ใน ie ด้วย jQuery และ css อย่างง่าย อ่าน 2530 17 Oct 08 แสดงตัวอย่างรูป ก่อน upload image preview berfore upload อ่าน 9068 20 Mar 10 ใช้ jQuery สร้าง การเลื่อนโฟกัส ของ textbox ด้วยลูกศร บนแป้นพิมพ์ คีบอร์ด keyboard อ่าน 3001 15 Oct 08 สร้างลิ้งค์มีรูปภาพแสดงนามสกุลไฟล์ อ่าน 2663 01 Feb 09 สร้างกล่องแจ้งข้อความ คล้าย MSN ด้วย jQuery อ่าน 6022 15 Oct 08 สร้าง box แบบสวยงาม ด้วย CSS อ่าน 7591 11 Oct 10 แสดงการแบ่งหน้า แบบ ajax ด้วย jQuery php และ css อ่าน 5954 25 Sep 08 ปิดหน้า Browser โดยไม่ต้องมีข้อความยืนยัน อ่าน 3667 17 Jan 11 เทคนิค วิธี การแสดงข้อมูล ด้วยเงื่อนไข วันที่ date ใน mysql อ่าน 3187 02 Dec 10 แทรก emoticon ด้วย javascript ฟังก์ชัน ให้กับ ckeditor อ่าน 2280 12 Sep 10 จัดรูปแบบ ScaleControlOptions ใน Google Map อ่าน 1162 07 Sep 11 นาฬิกาเวลา จาก server อย่างง่าย อ่าน 932 21 Apr 10 สร้างเส้นทาง เพื่อ หาระยะทาง ใน google map ด้วย jQuery อ่าน 7431 16 Aug 09 jQuery UI คือ อะไร อ่าน 4318 26 Aug 10 ใช้ comments.get เรียกและ บันทึก facebook comment ล่าสุด ลงฐานข้อมูล ด้วย jQuery อ่าน 2378