สอบถาม google map
ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถาม google map
สอบถาม google map
Copy
สวัสดีคะ พอดีหนูลองนำโค๊ดนี้มาลองใช้ดูคะ แต่ขึ้นออกมาดังภาพ หนูลองใช้ google api key แต่ก็ยังไม่ขึ้น หนูลองโหลด jquery แล้วก็ยังไม่ขึ้นคะ หนูลองมาหลายรอบแล้วคะ ช่วยให้คำแนะนำหนูหน่อยนะคะ<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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:450px;
height:500px;
margin:auto;
margin-top:50px;
}
</style>
</head>
<body>
<br>
<div style="margin:auto:width:80%;">
<div id="map_canvas"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Marker=[]; // สำหรับปักหมุด
var obj_marker; // สำหรับเก็บค่าพิกัดและข้อมูลจากฐานข้อมูล
var limit_show=10; // กำหนดแสดงรายการไม่เกิน
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด
var icon=[]; // สำหรับกำหนด รูปให้แต่ละ marker
function initialize() { // ฟังก์ชันแสดงแผนที่
GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
// กำหนดจุดเริ่มต้นของแผนที่
var my_Latlng = new GGM.LatLng(13.761728449950002,100.6527900695800);
// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
var my_DivObj=$("#map_canvas")[0];
// กำหนด Option ของแผนที่
var myOptions = {
zoom: 5, // กำหนดขนาดการ zoom
center: my_Latlng , // กำหนดจุดกึ่งกลาง
mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่
mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่
position:GGM.ControlPosition.TOP, // จัดตำแหน่ง
style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style
}
};
map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
// ดึงข้อมูลจากฐานข้อมูลที่สร้างมาในรูปแบบไฟล์ json
$.getJSON( "get_marker.php", function( data ) {
obj_marker=data; // เก็บค่าไว้ในตัวแปร ไว้ใช้งาน
var m=0;
$.each(obj_marker,function(i,k){ // วนลูปแสดงการปักหมุด
if(m<limit_show){ // ปักหมดได้ไม่เกิน limit_show
icon[i] = new GGM.MarkerImage("myfile/"+obj_marker[i].icon, // url ภาพ ใส่แบบเต็ม หรือแบบ path ก็ได้
new GGM.Size(50, 60), //กำหนดความกว้าง สูงของ icons
new GGM.Point(0,0), // จุดเริ่มต้นของรูปภาพ ใช้ 0,0
new GGM.Point(25, 60) // จุดปลายของพิกัดเทียบกับรูป ปกติ (0,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป)
);
var markerLatLng=new GGM.LatLng(obj_marker[i].latitude,obj_marker[i].longitude);
my_Marker[i] = new GGM.Marker({ // สร้างตัว marker
position:markerLatLng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
icon:icon[i], // แสดงเป็นรูปของแต่ละ marker นั้น
map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
title:obj_marker[i].province_name // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
// ส่วนของ infowindow สำหรับทดสอบ ดึงจากชื่อ titile
infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array
content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow
});
// กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง
// infowindow[i] = new GGM.InfoWindow({
// content:$.ajax({
// url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล
// data:'placeID='+obj_marker[i].province_id, // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
// async:false
// }).responseText
// });
// ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ marker
GGM.event.addListener(my_Marker[i],"click", function(){ // เมื่อคลิกตัว marker แต่ละตัว
if(infowindowTmp){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่
infowindow[infowindowTmp].close(); // ถ้ามีให้ปิด infowindow ที่เปิดอยู่
}
infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก
infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน
});
m++;
}
});
});
// กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
GGM.event.addListener(map, 'zoom_changed', function() {
// วนลูปล้างค่าเก่า ก่อนสร้างปักหมุดใหม่
if(my_Marker.length>0){
for(i=0;i<my_Marker.length;i++){
my_Marker[i].setMap(null);
}
}
var m=0;
var map_zoom=map.getZoom();
// zoom เท่าไหร่ แสดงเท่าไหร่ เงื่อนไขกำหนดตามต้องการ
if(map_zoom<=6){
limit_show=10;
}else if(map_zoom<=7){
limit_show=30;
}else if(map_zoom<=8){
limit_show=40;
}else if(map_zoom<=20){
limit_show=100;
}else{
limit_show=10;
}
$.each(obj_marker,function(i,k){ // วนลูปแสดงการปักหมุด
if(m<limit_show){ // ปักหมดได้ไม่เกิน limit_show
icon[i] = new GGM.MarkerImage("myfile/"+obj_marker[i].icon, // url ภาพ ใส่แบบเต็ม หรือแบบ path ก็ได้
new GGM.Size(50, 60), //กำหนดความกว้าง สูงของ icons
new GGM.Point(0,0), // จุดเริ่มต้นของรูปภาพ ใช้ 0,0
new GGM.Point(25, 60) // จุดปลายของพิกัดเทียบกับรูป ปกติ (0,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป)
);
var markerLatLng=new GGM.LatLng(obj_marker[i].latitude,obj_marker[i].longitude);
my_Marker[i] = new GGM.Marker({ // สร้างตัว marker
position:markerLatLng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
icon:icon[i], // แสดงเป็นรูปของแต่ละ marker นั้น
map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
title:obj_marker[i].province_name // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
// ส่วนของ infowindow สำหรับทดสอบ ดึงจากชื่อ titile
infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array
content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow
});
// กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง
// infowindow[i] = new GGM.InfoWindow({
// content:$.ajax({
// url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล
// data:'placeID='+obj_marker[i].province_id, // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
// async:false
// }).responseText
// });
// ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ marker
GGM.event.addListener(my_Marker[i],"click", function(){ // เมื่อคลิกตัว marker แต่ละตัว
if(infowindowTmp){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่
infowindow[infowindowTmp].close(); // ถ้ามีให้ปิด infowindow ที่เปิดอยู่
}
infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก
infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน
});
m++;
}
});
});
}
$(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>
</html>
Jsk
183.89.36.xxx
24-03-2017
19:55:12
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
สนับสนุนเว็บไซต์เรา จ่ายด้วย 
Author Ninenik Narkdee
2024 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ