-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmap.html
80 lines (80 loc) · 4.3 KB
/
map.html
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
<!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>แผนที่ Goo</title>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function myMaps() {
var mapsGoo=google.maps;
var Position=new mapsGoo.LatLng(13.723419,100.476232);//ละติจูด,ลองติจูด เริ่มต้น โดยผมให้เริ่มต้นที่ กรุงเตบ
var myOptions = {
center:Position,//ตำแหน่งแสดงแผนที่เริ่มต้น
zoom:8,//ซูมเริ่มต้น คือ 8
mapTypeId: mapsGoo.MapTypeId.ROADMAP //ชนิดของแผนที่
};
var map = new mapsGoo.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new mapsGoo.InfoWindow();
var marker = new mapsGoo.Marker({//เรียกเมธอดMarker(ปักหมุด)และกำหนดออปชั่น
position: Position,
draggable:true
//title:"Hello World!"
});
var Posi=marker.getPosition();//เลือกเมธอดแสดงตำแหน่งของตัวปักหมุด
$('#mapsLat').val(Posi.lat());//ละติจูดของMarker
$('#mapsLng').val(Posi.lng());//ลองติจูดของMarker
marker.setMap(map);//แสดงตัวปักหมุดโลด!!
//ตรวจจับเหตุการณ์ต่างๆ ที่เกิดใน google maps
mapsGoo.event.addListener(marker, 'dragend', function(ev) {//ย้ายหมุด
var location =ev.latLng;
$('#mapsLat').val(location.lat());//เอาค่าละติจูดไปแสดงที่ Tag HTML ที่มีแอตทริบิวต์ id ชื่อ mapsLat
$('#mapsLng').val(location.lng());//เอาค่าลองติจูดไปแสดงที่ Tag HTML ที่มีแอตทริบิวต์ id ชื่อ mapsLng
});
mapsGoo.event.addListener(marker, 'click', function(ev) {//คลิกที่หมุด
var location =ev.latLng;
$('#mapsLat').val(location.lat());//เอาค่าละติจูดไปแสดงที่ Tag HTML ที่มีแอตทริบิวต์ id ชื่อ mapsLat
$('#mapsLng').val(location.lng());//เอาค่าลองติจูดไปแสดงที่ Tag HTML ที่มีแอตทริบิวต์ id ชื่อ mapsLng
infowindow.setContent('ละติจูด:'+location.lat()+'ลองติจูด:'+location.lng());
infowindow.open(map, marker);
});
mapsGoo.event.addListener(map,'zoom_changed',function(ev){//ซูมแผนที่
zoomLevel = map.getZoom();//เรียกเมธอด getZoom จะได้ค่าZoomที่เป็นตัวเลข
$('#mapsZoom').val(zoomLevel);//เอาค่า Zoom Level ไปแสดงที่ Tag HTML ที่มีแอตทริบิวต์ id ชื่อ zoom
});
//infowindow.setContent("จุ๊กกรู๊");
//infowindow.open(map, marker);
}
$(document).ready(function(){
myMaps();
});
</script>
</head>
<body>
<div id="map_canvas" style="width:650px; height:450px"></div><br />
<form action="" method="post">
ละติจูด: <input type="text" size="20" id="mapsLat" /><br /><br />
ลองติจูด <input type="text" size="20" id="mapsLng" /><br /><br />
ซูม <input type="text" size="3" id="mapsZoom" value="8" /><br /><br />
<input name="bt_savemaps" type="button" value="บันทึกข้อมูล" />
</form>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
</html>