แผนที่ google map
ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา แผนที่ google map
แผนที่ google map
Copy
code ด้านล่างนี้เป็นการแสดงแผนที่ใน google map สมมติว่าเรามีที่อยู่รอไว้แล้วในช่อง Address อยากให้เมื่อ run ไฟล์ html นี้ครั้งแรกให้แสดงแผนที่ตามที่อยู่โดยไม่ต้องคลิกปุ่ม Find ไม่ทราบต้องเขียนคำสั่งอะไรเพิ่มครับ ?
<!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=Windows-874" />
<title>Google Map API 3 Finding Address</title>
<style type="text/css">
html { height: 100% }
body {
height:100%;
margin:0;
padding:0;
font-family:tahoma, "Tahoma", sans-serif, Verdana;
font-size:12px;
margin-left: 1px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
}
/* ?????????? */
#map_canvas {
width:1050px;
height:450px;
}
</style>
</head>
<div id="map_canvas" style="margin:auto"></div>
Address <input name="namePlace" type="text" id="namePlace" value='63ถนนกาญจนาภิเษกอ.บางใหญ่จ.นนทบุรี' size="50" />
<input type="button" name="SearchPlace" id="SearchPlace" value="Find" />
<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="button" name="btnAddr" id="btnAddr" value="Find" />
</form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var geocoder; // ????????????????? ???? Geocoder Object ???????????????????????????
var map; // ??????????? map ?????????????????? ????????????????????????? ??????????????
var my_Marker; // ???????????????????????? marker
var marker;
var GGM; // ??????????? GGM ??????? google.maps Object ???????????????????????????
function initialize() { // ??????????????????
GGM=new Object(google.maps); // ?????????? google.maps Object ??????????? GGM
geocoder = new GGM.Geocoder(); // ?????????? google.maps.Geocoder Object
// ?????????????????????????
var my_Latlng= new GGM.LatLng(16.15547064629932,99.94126978082886);
var my_mapTypeId=GGM.MapTypeId.HYBRID; // ???????????????????????? ROADMAP
// ????? DOM object ???????????????????? ????????? div id=map_canvas
var my_DivObj=$("#map_canvas")[0];
// ????? Option ?????????
var myOptions = {
zoom: 15, // ???????????? zoom
center: my_Latlng , // ???????????????? ????????? my_Latlng
mapTypeId:my_mapTypeId // ????????????????? ????????? my_mapTypeId
};
map = new GGM.Map(my_DivObj,myOptions); // ????????????????????????????????? map
my_Marker = new GGM.Marker({ // ???????? marker ??????????? my_Marker
position: my_Latlng,// ??????????????????????????????
map: map, // ???????? marker ??????????????????? instance ??? map
draggable:true, // ???????????????????? marker ??????
title:"Drag ->Drop" // ???? title ????????????????????????
});
GGM.event.addListener(my_Marker, 'dragbegin', function() {
$("#namePlace").val("");
});
// ????? 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
$("#namePlace").val("");
if(geocoder){ // ??????????????? Geocoder Object
geocoder.geocode({
//address: AddressSearch // ????????????????????????
latLng:new google.maps.LatLng(my_Point.lat(),my_Point.lng())
},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
$("#namePlace").val(results[1].formatted_address);
}else{
// ?????????????????????????
alert("????????????: " + status);
$("#namePlace").val("");// ???????? textbox id=namePlace ??????????????????????
}
});
}
});
// ????? event ??????????????? ???????????????????????? zoom
GGM.event.addListener(map, 'zoom_changed', function() {
$("#zoom_value").val(map.getZoom()); // ??????? zoom ??????????????? textbox id=zoom_value
});
}
$(function(){
// ???????????????????????????????????????
var searchPlace=function(){ // ???????? ?????????????????? ???? searchPlace
var AddressSearch=$("#namePlace").val();// ????????? textbox ????????????????????
if(geocoder){ // ??????????????? Geocoder Object
geocoder.geocode({
address: AddressSearch // ????????????????????????
//latLng:new google.maps.LatLng(16, 100)
},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("????????????: " + status);
$("#namePlace").val("");// ???????? textbox id=namePlace ??????????????????????
}
});
}
}
// ?? addr ????????
var codeLatLng=function(){
var lat = $("#lat_value").val();
var lon = $("#lon_value").val();
if(geocoder){ // ??????????????? Geocoder Object
geocoder.geocode({
//address: AddressSearch // ????????????????????????
latLng:new google.maps.LatLng(lat,lon)
},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
$("#namePlace").val(results[1].formatted_address);
}else{
// ?????????????????????????
alert("????????????: " + status);
$("#namePlace").val("");// ???????? textbox id=namePlace ??????????????????????
}
});
}
}
$("#btnAddr").click(function(){ // ???????????????? id=SearchPlace ????????????????????????????
//alert('ddd'); // ????????????????????????????
codeLatLng();
});
$("#SearchPlace").click(function(){ // ???????????????? id=SearchPlace ????????????????????????????
searchPlace(); // ????????????????????????????
});
$("#namePlace").keyup(function(event){ // ?????????????????????????????
if(event.keyCode==13){ // ???????????????? ??????????? Enter ????????????????????????????
searchPlace(); // ????????????????????????????
}
});
});
$(function(){
// ???? ????? google map api ??????????????????????????
$("<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>
Vee
28-02-2012
10:30:21
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
สนับสนุนเว็บไซต์เรา จ่ายด้วย 
Author Ninenik Narkdee
2024 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ