āļĢู้āļัāļāļāļēāļĢāļŠāļĢ้āļēāļ polylines āđāļ google map v3 āļāļāļāļี่ 1
jQuery :
āđāļ้āļāđāļĨāļ°āļัāļ§āļāļĒ่āļēāļāļ่āļāđāļāļี้ āđāļ็āļāđāļāļ§āļāļēāļāļāļēāļĢāļŠāļĢ้āļēāļāđāļŠ้āļ polylines āđāļāđāļāļāļี่
āđāļāļĒāļāļēāļĢāļĨāļēāļāđāļĨืāļāļāļุāļāđāļĢิ่āļĄāļ้āļāļ้āļ§āļĒ marker āđāļĨ้āļ§āļŠāļĢ้āļēāļāđāļŠ้āļ polylines āļāļēāļĄ
āļāļģāđāļŦāļ่āļāļี่āļัāļāļŦāļĄุāļ āļĄีāļัāļ§āļāļĒ่āļēāļāļāļēāļĢāļĨāļ āđāļŠ้āļ polylines āļāļāļāļāļēāļāđāļāļāļี่
āļูāļāļģāļāļิāļāļēāļĒāđāļāđāļ้āļāļāļĢāļ°āļāļāļ
<!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;*/}#map_control_tool{ position:relative; width:550px; margin:auto; margin-top:5px; background-color:#F1F7E6;}</style>
</head>
<body>
<div style="margin:auto;width:600px;padding-top:50px;"> <div id="map_canvas"></div> <div id="map_control_tool"> <input type="button" name="button" id="button" value="Clear Map Polylines" onclick="clearMapPolylines();" /> </div></div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript">var map; // āļāļģāļŦāļāļāļัāļ§āđāļāļĢ map āđāļ§้āļ้āļēāļāļāļāļāļัāļāļ์āļัāļ āđāļื่āļāđāļŦ้āļŠāļēāļĄāļēāļĢāļāđāļĢีāļĒāļāđāļ้āļāļēāļ āļāļēāļāļŠ่āļ§āļāļื่āļāđāļ้var GGM; // āļāļģāļŦāļāļāļัāļ§āđāļāļĢ GGM āđāļ§้āđāļ็āļ google.maps Object āļāļ°āđāļ้āđāļĢีāļĒāļāđāļ้āļāļēāļāđāļ้āļ่āļēāļĒāļึ้āļvar arr_path=[]; // āļāļģāļŦāļāļāļัāļ§āđāļāļĢāļŠāļģāļŦāļĢัāļāđāļ็āļāļ่āļēāļāļēāđāļĢāļĒ์ āļāļģāđāļŦāļ่āļ pathvar makePolyline; // āļāļģāļŦāļāļāļัāļ§āđāļāļĢ āļัāļāļ์āļั่āļ āļŠāļĢ้āļēāļāđāļŠ้āļ polylinesvar objPolylines=[]; // āļāļģāļŦāļāļāļัāļ§āđāļāļĢāļŠāļģāļŦāļĢัāļāđāļ็āļāļ่āļē object āļāļāļ polylinesfunction 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 var my_Marker = new GGM.Marker({ // āļŠāļĢ้āļēāļāļัāļ§ marker position: my_Latlng, // āļāļģāļŦāļāļāđāļ§้āļี่āđāļีāļĒāļ§āļัāļāļุāļāļึ่āļāļāļĨāļēāļ map: map, // āļāļģāļŦāļāļāļ§่āļē marker āļี้āđāļ้āļัāļāđāļāļāļี่āļื่āļ instance āļ§่āļē map draggable:true, // āļāļģāļŦāļāļāđāļŦ้āļŠāļēāļĄāļēāļĢāļāļĨāļēāļāļัāļ§ marker āļี้āđāļ้ title:"āļāļĨิāļāļĨāļēāļāđāļื่āļāļŦāļēāļāļģāđāļŦāļ่āļāļุāļāļี่āļ้āļāļāļāļēāļĢ!" // āđāļŠāļāļ title āđāļĄื่āļāđāļāļēāđāļĄāļēāļŠ์āļĄāļēāļāļĒู่āđāļŦāļืāļ }); // āļāļģāļŦāļāļ event āđāļŦ้āļัāļāļัāļ§ marker āđāļĄื่āļāļŠิ้āļāļŠุāļāļāļēāļĢāļĨāļēāļāļัāļ§ marker āđāļŦ้āļāļģāļāļēāļāļāļ°āđāļĢ GGM.event.addListener(my_Marker, "dragend", function() { var my_Point = my_Marker.getPosition(); // āļŦāļēāļāļģāđāļŦāļ่āļāļāļāļāļัāļ§ marker āđāļĄื่āļāļāļāļĨāļēāļāđāļĨ้āļ§āļāļĨ่āļāļĒ arr_path.push(my_Point); // āđāļิ่āļĄāļ่āļēāļāļģāđāļŦāļ่āļ āļāļēāļāļัāļ§ marker āļāļģāđāļŦāļ่āļāļĨ่āļēāļŠุāļ map.panTo(my_Point); // āđāļŦ้āđāļāļāļี่āđāļŠāļāļāđāļāļี่āļัāļ§ marker āļĨ่āļēāļŠุāļ makePolyline(arr_path); // āļŠ่āļāļ่āļēāļāļģāđāļŦāļ่āļāđāļ array āđāļāļŠāļĢ้āļēāļāđāļŠ้āļ polylines āđāļāđāļāļāļี่// console.log(arr_path); });
// āļāļģāļŦāļāļ event āđāļŦ้āļัāļāļัāļ§āđāļāļāļี่ āđāļĄื่āļāļĄีāļāļēāļĢāđāļāļĨี่āļĒāļāđāļāļĨāļāļāļēāļĢ zoom GGM.event.addListener(map, "zoom_changed", function() { $("#zoom_value").val(map.getZoom()); // āđāļāļēāļāļāļēāļ zoom āļāļāļāđāļāļāļี่āđāļŠāļāļāđāļ textbox id=zoom_value });
}
makePolyline=function(arr_path){// console.log(arr_path.length); var i=arr_path.length-1; objPolylines[i] = new GGM.Polyline({ // āļāļģāļŦāļāļāļĢูāļāđāļāļāļāļāļāđāļŠ้āļ polylines path: arr_path,// array āļāļģāđāļŦāļ่āļāļี่āđāļ็āļāļ่āļē lat,lon strokeColor: "#FF0000", // āļŠี strokeOpacity: 1.0, // āļāļ§āļēāļĄāđāļāļĢ่āļāđāļŠ strokeWeight: 2 //āļāļ§āļēāļĄāļŦāļ้āļēāļāļāļāđāļŠ้āļ }); objPolylines[i].setMap(map); // āļŠāļĢ้āļēāļāđāļŠ้āļ polylines āđāļāđāļāļāļี่// console.log(arr_path);// console.log(objPolylines);}clearMapPolylines=function(){ arr_path=[]; for(i=0;i<objPolylines.length;i++){// console.log(i); objPolylines[i].setMap(null); }
// console.log(arr_path);}$(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>
