PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

รบกวนพี่ๆช่วยแก้ไขหรือแนะนำวิธีการปรับปรุง จาก Google map API v2 เป็น Google map API v.3

รบกวนพี่ๆช่วยแก้ไขหรือแนะนำวิธีการปรับปรุง จาก Google map API v2 เป็น Google map API v.3
รบกวนพี่ๆช่วยแก้ไขหรือแนะนำวิธีการปรับปรุง จาก Google map API v2 เป็น Google map API v.3
ช่วยผมด้วยครับ 
ขอบคุณมากๆ ครับ

ตัวอย่างโค้ด
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>map edl</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAKaJQ6galA0QmFhNdQzYuwRQnaT__a1y-hZdnJBN4Ggj_4W3wVRTkKlGxp0EJvRTbiAqcn-FCYSTDog" 
    type="text/javascript"></script>
    <script src="jquery1.6.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    var circle = null;
    var circle2 = null;
    var map;
    var geocoder;


    var iconBlue = new GIcon(); 
    iconBlue.image = 'http://newsirius13.thport.com/picture/c004.png';
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(20, 22);
    iconBlue.shadowSize = new GSize(1, 1);
    iconBlue.iconAnchor = new GPoint(12, 8);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var icongreen = new GIcon(); 
    icongreen.image = 'http://newsirius13.thport.com/picture/c003.png';
    icongreen.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    icongreen.iconSize = new GSize(20, 22);
    icongreen.shadowSize = new GSize(1, 1);
    icongreen.iconAnchor = new GPoint(12, 8);
    icongreen.infoWindowAnchor = new GPoint(5, 1);


    var customIcons = [];
    customIcons["ปิด"] = iconBlue;
    customIcons["เปิด"] = icongreen;

    function load() {
      if (GBrowserIsCompatible()) {
	map = new GMap2(document.getElementById("map_canvas"));
	geocoder = new GClientGeocoder();
	map.addMapType(G_PHYSICAL_MAP);
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng(17.963405,102.611468), 11);
	
      }
	}

   function searchLocationsNear() {
   var asearch = document.getElementById('asearch').value;
   var fsearch = document.getElementById('fsearch').value;
     var searchUrl = "../map/ex_11/ex_11/search.php?fsearch=" + fsearch + "&asearch=" + asearch ;
     GDownloadUrl(searchUrl, function(data) {
       var xml = GXml.parse(data);
       var markers = xml.documentElement.getElementsByTagName('marker');

       var sidebar3 = document.getElementById('sidebar3');
       sidebar3.innerHTML = '';
       if (markers.length == 0) {
         sidebar3.innerHTML = 'nodata';
         map.setCenter(new GLatLng(17.963405,102.611468), 11);
         return;
       }

       var bounds = new GLatLngBounds();
       for (var i = 0; i < markers.length; i++) {
	     /*   var fid = markers[i].getAttribute("id");*/
            var polemunber_m = markers[i].getAttribute("polemunber_m");
            var pointtype = markers[i].getAttribute("pointtype");
           /* var fcollection = markers[i].getAttribute("fcollection");*/
            var poletype = markers[i].getAttribute("poletype");
            var district_name = markers[i].getAttribute("district_name");
       /*     var type = markers[i].getAttribute("type");*/
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, poletype, district_name, polemunber_m, pointtype);
            map.addOverlay(marker);

         var sidebarEntry = createSidebarEntry(marker, polemunber_m, district_name);
         sidebar3.appendChild(sidebarEntry);
         bounds.extend(point);
       }
       map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
     });
 }

  function createMarker(point, poletype, district_name, polemunber_m, pointtype) {
      var marker = new GMarker(point, customIcons[poletype]);
      var html = "<table width=300><tr><td>"+"id:  "+ polemunber_m +"<br>"+ "name:   " + poletype +"<br>"+"address:  "+district_name +"<br>"+"lastname:  "+pointtype+"</td></tr></table>"; 
      GEvent.addListener(marker, 'click', function() {
       marker.openInfoWindowHtml(html);	
      });	

      return marker;
    }
function createSidebarEntry(marker, polemunber_m, district_name) {
  var div = document.createElement('div');
  var html = "<b>"+"id:  " + polemunber_m + "</b> <br/>"+"id:  " + district_name + "<br/> ------------------------------ <br/>" ;
  div.innerHTML = html;
  div.style.cursor = 'pointer';
  div.style.marginBottom = '5px';
  GEvent.addDomListener(div, 'click', function() {
    GEvent.trigger(marker, 'click');
  });
  GEvent.addDomListener(div, 'mouseover', function() {
    div.style.backgroundColor = '#eee';
  });
  GEvent.addDomListener(div, 'mouseout', function() {
    div.style.backgroundColor = '#fff';
  });

  return div;
}



    //]]>

  </script>
  <style type="text/css">
<!--
body {
	background-image: url(picture/page1952.jpg);
}
.style1 {color: #FF0000}
.style2 {color: #FF9B9B}
.style3 {
	font-size: 14px;
	font-weight: bold;
}
.style4 {color: #0000FF}
.style5 {color: #00FF00}

-->
#lyrtooltip {
     position:absolute;
     border:1px solid #FFA500;
     background-color: white;
     padding:3px;
     text-align:left;
}
<!--
@import url("../laofont.css");
table {
	font: 9pt  arial,helvetica, sans-serif
}
body {
	color: #000000;/*themecolour5%0;*/
	line-height: 20px;
	background-repeat: repeat-x;/*themecolour5;*/
	font: 9pt  arial,helvetica, sans-serif;
	background-image: url();
}
p {
	margin-top: 0px;
	margin-bottom: 0px;

	}
	blockquote {
	margin-top: 0px;
	margin-bottom: 0px;
	color: #000000;/*themecolour5%0;*/
	margin-right: 0px;
}
ol {
	margin-top: 0px;
	margin-bottom: 0px;
	color: #000000;/*themecolour5%0;*/
}


#header {
	position: absolute;
	height: 53px;
	width: 457px;
	top: 56px;
	z-index: 5;
	right: -13px;
}

#logo {
	position: absolute;
	height: 148px;
	width: 208px;
	left: 11px;
	top: 0px;
	z-index: 2;
}

#hnavigation {
	position: absolute;
	height: auto;
	width: 95%;
	left: 50px;
	top: 154px;
	z-index: 3;
}

#bgimage {
	position: absolute;
	height: 51px;
	width: 3px;
	top: 7px;
	right: 22px;
	z-index: 1;
}
#content {
	position: absolute;
	height: auto;
	width: auto;
	left: 30px;
	top: 200px;
	right: 60px;
	z-index: 2;
}
#content ul {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 20px;
	color: #000000;/*themecolour5%0;*/
	list-style-image: url(addmeber_files/addmeber_bullet.gif);
}
h1 {
	font-size: 18px;
	color: #000000;/*themecolour5%0;*/
	margin-top: 0px;
	margin-bottom: 3px;
}
h2 {
	font-size: 16px;
	color: #ff00bf;/*themecolour3;*/
	margin-top: 3px;
	margin-bottom: 3px;
}
#content a:link {
	color: #000000;/*themecolour5%0;*/
}
#content a:visited {
	color: #999999;
}
#content a:link:hover {
	color: #788ea4;/*themecolour1;*/
}
.highlightbox {
	padding: 5px;
	color: #333333;
	border: 1px solid #666666;
	background-color: #fff7cc;/*themecolour2%180;*/
	background-image: url(addmeber_files/Arrow_panel_bg.gif);
	background-repeat: repeat;
}
.topbar {
	background-image: url(addmeber_files/addmeber_topbar.gif);
	background-repeat: repeat-x;
}
.content {
	padding-left: 25px;
}
a.testlink:link {
	font-family: "Saysettha OT";
	font-size: 12px;
	color: #000000;
	text-decoration: none;
}
.inlineimg {vertical-align: middle; }
a.testlink:visited {
	font-family: "Saysettha OT";
	font-size: 12px;
	color: #000000;
	text-decoration: none;
}
.navbar {	font-size: 11px;
}
.topinfo-inner {  border: 1px  #F9FAFA;
  border-bottom: none;
  border-right: none;
  padding: 5px;
  height: 52px;
}
.topinfo-right {  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  margin: 0 0 7px 257px;
}
.smallfont {	font-size: 13px;
}
.time {	color: #666686;
}
.topinfo-center {  background: #E7EBED;
  border: 1px solid #C1CBCF;
  float: left;
  width: 248px;
  margin: 0 0 7px 0;
}
.alt1 {	background: #F1ECE1;
	border: 1px solid #FFFFFF;
}
.alt1Active {	background: #F1ECE1;
	border: 1px solid #FFFFFF;
}
.alt2 {	background: #FBF7ED;
}
.alt2Active {	background: #FBF7ED;
}
.tborder {	background: #C6B897;
	color: #000000;
	border: 1px solid #0B198C;
}
.vbmenu_control {	background: #2C353C url(images/lustrous/gradients/gradient_tcat.gif) repeat-x top left;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: bold;
	padding: 3px 6px 3px 6px;
	white-space: nowrap;
}
body,td,th {
	font-family: Saysettha OT;
}
a {
	font-family: Saysettha OT;
}
h1,h2,h3,h4,h5,h6 {
	font-family: Saysettha OT;
}
.tcat {	background: #2C353C url(images/lustrous/gradients/gradient_tcat.gif) repeat-x top left;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	padding: 0 0 0 6px;
	line-height: 30px;
}
.tfoot {	background: #E8E1D1;
	color: #00070C;
}
.thead {	background: #FFFFFF repeat-x top left;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	white-space: nowrap;
}
div.thead {padding: 3px 4px; }
td.thead {padding: 3px 4px; }
.style35 {font-size: 14pt}
-->
ol.submenu {
     list-style-type:none;
     border:1px solid #A5BACF; /* กรอบ sub เมนู */
     background-color:#f0f0f0; /* สีพื้นของ submenu */
     display:block;
     position:absolute;
     visibility:hidden;
}
ol.submenu li {
     padding:2px 0 2px 0;
     margin:0px;
}
ol.submenu a {
     padding:2px 8px 2px 8px;
     color:#000000; /* สีลิงค์ในเมนู */
}
ol.submenu a:hover {
     padding:2px 8px 2px 5px;
     border-left:3px solid gray; /* highlight เมื่อเมาส์อยู่บนเมนู */
     color:#000000; /* สีลิงค์เมื่อเมาส์อยู่บนเมนู */
}
body,td,th {
	font-family: Saysettha OT;
}
h1,h2,h3,h4,h5,h6 {
	font-family: Saysettha OT;
}
ol.submenu1 {     list-style-type:none;
     border:1px solid #000000; /* กรอบ sub เมนู */
     background-color:#f0f0f0; /* สีพื้นของ submenu */
     display:block;
     position:absolute;
     visibility:hidden;
}
ol.submenu1 {     list-style-type:none;
     border:1px solid #000000; /* กรอบ sub เมนู */
     background-color:#f0f0f0; /* สีพื้นของ submenu */
     display:block;
     position:absolute;
     visibility:hidden;
}
div#footer {	position:absolute;
	width:95%;
	text-align:center;
	left: 32px;
}

<!--
A:link {Color: blue}
A:visited {Color: blue}
A:hover {font-weight: underline; Color: red}
// .style38 {color: #0066FF}
.style39 {color: #333333}
-->
.browse_page{
	clear:both;
	margin-left:12px;
	height:35px;
	margin-top:5px;
	display:block;
}
.browse_page a,.browse_page a:hover{
	display:block;
	height:18px;
	width:18px;
	font-size:10px;
	float:left;
	margin-right:2px;
	border:1px solid #CCCCCC;
	background-color:#F4F4F4;
	color:#333333;
	text-align:center;
	line-height:18px;
	font-weight:bold;
	text-decoration:none;
}
.browse_page a:hover{
	border:1px solid #0A85CB;
	background-color:#0A85CB;
	color:#FFFFFF;
}
.browse_page a.selectPage{
	display:block;
	height:18px;
	width:18px;
	font-size:10px;
	float:left;
	margin-right:2px;
	border:1px solid #0A85CB;
	background-color:#0A85CB;
	color:#FFFFFF;
	text-align:center;
	line-height:18px;
	font-weight:bold;
}
.browse_page a.SpaceC{
	display:block;
	height:18px;
	width:18px;
	font-size:10px;
	float:left;
	margin-right:2px;
	border:0px dotted #0A85CB;
	font-size:11px;
	background-color:#FFFFFF;
	color:#333333;
	text-align:center;
	line-height:18px;
	font-weight:bold;
}
.browse_page a.naviPN{
	width:50px;
	font-size:12px;
	display:block;
	height:18px;
	float:left;
	border:1px solid #0A85CB;
	background-color:#0A85CB;
	color:#FFFFFF;
	text-align:center;
	line-height:18px;
	font-weight:bold;	
}
.browse_page a.naviPN:hover{
	width:50px;
	font-size:12px;
	display:block;
	height:18px;
	float:left;
	border:1px solid #0A85CB;
	background-color:#0A85CB;
	color:#FFFFFF;
	text-align:center;
	line-height:18px;
	font-weight:bold;	
}
  </style></head>
<body onload="load(),initialize()" onunload="GUnload()">
    <form action="#" onsubmit="showAddress(this.address.value); return false">
  <table width="1063"> 
  <tbody> 
  <tr>
    <td width="600" height="402" rowspan="2"><div id="map_canvas" style="width: 600px; height: 400px"></div> </td>
    <td width="451" height="402" valign="top"><div align="center">
        <input name="text" type="text" id="asearch" value="" size="10"/>
          ຈາກລາຍການ: 
          <select id="fsearch"> 
            
            <option value="polemunber_m" selected>id</option>
            <option value="pointtype" >lastname</option>
            <option value="district_name" >address</option>
          </select>
          <input type="button" onclick="searchLocationsNear()" value="search"/>
          </p>
        </div>
    <div id="sidebar3" style="overflow: auto; height: 295px; font-size: 11px; color: #000"></div> 
	</td>
    </tr> 
    </tbody>
  </table>


  <input type=button value="back" onClick="javascript:location.reload();">
</form>
</body>
</html>


โดย:  Selo IP: 115.84.102.xxx วันที่: 06-09-2011 เวลา: 09:11:10

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 1

 <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAKaJQ6galA0QmFhNdQzYuwRQnaT__a1y-hZdnJBN4Ggj_4W3wVRTkKlGxp0EJvRTbiAqcn-FCYSTDog" >

 

ตรงนี้ก็ไปเอา http://code.google.com/apis/maps/ ที่เป็น version 3 มาใส่ โดยเลือกตามที่น้องต้องการ ว่าต้องการ api ตัวไหน ก็ใส่พารามิเตอร์ไป ตามที่ต้องการ



โดย:  Kitfortune IP: 58.8.231.xxx วันที่: 07-09-2011 เวลา: 13:08:26