แผนที่ google map

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา แผนที่ google map

แผนที่ google map

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 101.51.226.xxx 28-02-2012 10:30:21

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1

www.hotcodephp.blogspot.com

ลองดูในนี้ครับ



223.27.233.xxx 20-07-2012 11:35
 ความคิดเห็นที่ 2

 ขอบคุณนะครับ



vee 125.25.143.xxx 20-07-2012 14:20






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ