|
|
|
google map api v2 ตัวไหนสามารถค้นหาและดึงข้อมูลมาแสดงได้บ้างค่ะ |
|
|
|
|
|
|
|
สอบถามหน่อยค่ะ พอดีใช้ google map v2 อยู่ แต่ ตอนนี้มันใช่ไม่ได้ จะเปลี่ยนเป็น v3 ก็ไม่ค่อยมีความรู้นะค่ะ
รบกวนพี่ๆหน่อยค่ะ
ขอบคุณมากค่ะ
Code (PHP)
<?session_start();
include("db/connect.php");
$ua = $_SERVER['HTTP_USER_AGENT'];
if (strpos($ua,'MSIE 5')) {
$browser = "IE";
}else if (strpos($ua,'MSIE 6')) {
$browser = "IE";
}else if (strpos($ua,'MSIE 7')) {
$browser = "IE";
}else if (strpos($ua,'MSIE 8')) {
$browser = "IE";
}else if(strpos($ua,'Firefox/1')){
$browser = "FF";
}else if(strpos($ua,'Firefox/2')){
$browser = "FF";
}else if(strpos($ua,'Firefox/3')){
$browser = "FF";
}else{
$browser = "OT";
}
?>
<!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>ค้นหาข้อมูล สถานที่ติดตั้ง</title>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA47FM9vXe8Y84M7V5fXkYg6f8I16q5vjs&sensor=true" type="text/javascript"></script>
<script src="js/gmaps.CircleOverlay.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://maps.google.com/mapfiles/kml/paddle/blu-stars.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://maps.google.com/mapfiles/kml/paddle/grn-stars.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 iconred = new GIcon();
iconred.image = 'http://maps.google.com/mapfiles/kml/paddle/ylw-stars.png';
iconred.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconred.iconSize = new GSize(20, 22);
iconred.shadowSize = new GSize(1, 1);
iconred.iconAnchor = new GPoint(12, 8);
iconred.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["wdm"] = iconBlue;
customIcons["indoor"] = icongreen;
customIcons["outdoor"] = iconred;
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( 13.761728449950002,100.6527900695800), 9);
}
}
function searchLocationsNear() {
var asearch = document.getElementById('asearch').value;
var fsearch = document.getElementById('fsearch').value;
var searchUrl = "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 = 'No results found.';
map.setCenter(new GLatLng( 13.761728449950002,100.6527900695800), 9);
return;
}
var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var fid = markers[i].getAttribute("id");
var idarea = markers[i].getAttribute("idarea");
var fuplink = markers[i].getAttribute("fuplink");
var fport = markers[i].getAttribute("fport");
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type, idarea, fuplink, fport, fid);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, address);
sidebar3.appendChild(sidebarEntry);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
});
}
function createMarker(point, name, address, type, idarea, fuplink, fport, fid) {
var marker = new GMarker(point, customIcons[type]);
var html = "<table width=300><tr><td>"+"Area: "+ idarea +"<br>"+ "Site: " + name +"<br>"+"Uplink: "+fuplink +"<br>"+"Port: "+fport +"port"+"<br>"+ "Device: " + type+"<br>"+"Add: "+address+ "<br>"+"GPS: "+point+"</td></tr></table>";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function createSidebarEntry(marker, name, address) {
var div = document.createElement('div');
var html = "<b>" + name + "</b> <br/>" + address + "<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;
}
// background-image: url(picture/page1952.jpg);
//]]>
</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}
-->
</style></head>
<!-- <body onload="load(),initialize()" onunload="GUnload()"> -->
<body onload="initWithMapStart()">
<form action="#" onsubmit="showAddress(this.address.value); return false">
<table>
<tbody>
<tr>
<td width="600" height="402" rowspan="2"><div id="map_canvas" style="width: 600px; height: 400px"></div> </td>
<td width="180" height="402" valign="top"><div align="center"><img src="pic/search1.jpg" alt="" width="180" height="36" />
<!-- <input name="text" type="text" id="asearch" value="ใส่ข้อมูลที่จะใช้ค้นหา" size="30"/>
ค้นหาจาก:
<select id="fsearch">
<option value="fname" >Site</option>
<option value="idarea" >Area</option> //idfarm=area
<option value="faddress" >Province</option>
<option value="type" >Device</option>
</select>old-->
<input name="text" type="text" id="asearch" value="ใส่ข้อมูลที่จะใช้ค้นหา" size="30"/>
<select id="fsearch">
<option value="fname" >Site</option>
<option value="idarea" >Area</option> //idfarm=area
<option value="faddress" >Province</option>
<option value="type" >Device</option>
</select>
<seleect id = "fsearch">
<select name="type">
<option value="">all device</option>
<option value="indoor">MSAN Indoor</option>
<option value="outdoor">MSAN Outdoor</option>
<option value="wdm">WDM</option>
<!-- <option value="tieofc">Tie OFC</option> -->
</select>
<select name="area">
<option value="">all area</option>
<option value="บน.1.1">บน.1.1</option>
<option value="บน.1.2">บน.1.2</option>
<option value="บน.2.1">บน.2.1</option>
<option value="บน.2.2">บน.2.2</option>
<option value="บน.3.1">บน.3.1</option>
<option value="บน.3.2">บน.3.2</option>
<option value="บน.4.1">บน.4.1</option>
<option value="บน.4.2">บน.4.2</option>
<option disabled="disabled">บภ.1.1</option>
<option value="เพชรบุรี">- เพชรบุรี</option>
<option value="กาญจนบุรี">- กาญจนบุรี</option>
<option value="นครปฐม">- นครปฐม</option>
<option value="ประจวบคีรีขันธ์">- ประจวบคีรีขันธ์</option>
<option value="ราชบุรี">- ราชบุรี</option>
<option value="สมุทรสงคราม">- สมุทรสงคราม</option>
<option value="สมุทรสาคร">- สมุทรสาคร</option>
<option disabled="disabled">บภ.1.2</option>
<option value="อยุธยา">- อยุธยา</option>
<option value="สุพรรณบุรี">- สุพรรณบุรี</option>
<option value="อ่างทอง">- อ่างทอง</option>
<option value="สระบุรี">- สระบุรี</option>
<option value="ลพบุรี">- ลพบุรี</option>
<option value="สิงห์บุรี">- สิงห์บุรี</option>
<option disabled="disabled">บภ.3.1</option>
<option value="เชียงราย">- เชียงราย</option>
<option value="แพร่">- แพร่</option>
<option value="แม่ฮ่องสอน">- แม่ฮ่องสอน</option>
<option value="พะเยา">- พะเยา</option>
<option value="ลำปาง">- ลำปาง</option>
<option value="ลำพูน">- ลำพูน</option>
<option value="เชียงใหม่">- เชียงใหม่</option>
<option value="น่าน">- น่าน</option>
<option disabled="disabled">บภ.3.2</option>
<option value="ตาก">- ตาก</option>
<option value="นครสวรรค์">- นครสวรรค์</option>
<option value="พิจิตร">- พิจิตร</option>
<option value="พิษณุโลก">- พิษณุโลก</option>
<option value="สุโขทัย">- สุโขทัย</option>
<option value="อุตรดิตถ์">- อุตรดิตถ์</option>
<option value="อุทัยธานี">- อุทัยธานี</option>
<option value="ชัยนาท">- ชัยนาท</option>
<option value="เพชรบูรณ์">- เพชรบูรณ์</option>
<option value="กำแพงเพชร">- กำแพงเพชร</option>
</select>
</select>
<!-- <tr>
<td align="center">
<form name="search_file" method="post" action="all_document.php">
<TABLE border="0" width="520" cellspacing="0" cellpadding="2">
<TR>
<TD>Name site :</TD>
<TD><input type="text" name="site" style="180"></TD>
<TD>
<select name="group">
<option value="">all device</option>
<option value="msanindoor">MSAN Indoor</option>
<option value="msanoutdoor">MSAN Outdoor</option>
<option value="wdm">WDM</option>
<option value="tieofc">Tie OFC</option>
</select>
</TD>
<TD width="20" align="center">
</TD>
<TD><input type="submit" name="submit" value="ค้นหา"><input type="hidden" name="topic" value="<?=$topic;?>"><input type="hidden" name="sub_topic" value="<?=$sub_topic;?>"></TD>
</TR>
</TABLE>
</form>
</td>
</tr> -->
<input type="button" onclick="searchLocationsNear()" value="เริ่มค้นหา"/>
</p>
</div>
<div id="sidebar3" style="overflow: auto; height: 295px; font-size: 11px; color: #000"></div>
</td>
</tr>
</tbody>
</table>
<input type= button value="Refresh" onClick="javascript:location.reload();">
<!-- <a href="index.php">BACK</a>
<a href ="index.php"> Back</a>
<input class="button" name="submit" type="Back" value="กลับ" ><a href = "index.php"/> -->
<input type=button onClick="window.history.back()" value="Back">
<form>
<p class="style3">
<label for="label"></label>
<input type="image" name="imageField2" src="http://maps.google.com/mapfiles/kml/paddle/blu-stars.png" id="label" />
Device WDM<!-- <br /> -->
<label for="label2"></label>
<input type="image" name="imageField3" src="http://maps.google.com/mapfiles/kml/paddle/grn-stars.png" id="label2" />
Device Indoor <!-- </p> -->
<label for="label3"></label>
<input type="image" name="imageField4" src="http://maps.google.com/mapfiles/kml/paddle/ylw-stars.png" id="label3" />
Device Outdoor </p>
</form>
</form>
</body>
</html>
|
|
|
|
|
Date :
2012-12-18 11:55:40 |
By :
wongkhajang |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
รอผู้มีความรู้ มาช่วยไขปัญหา ให้ค่ะ อยากรู้ด่วนๆค่ะ
มันจะดึกข้อมูลจากฐานข้อมูลมานะค่ะ แล้วแสดงผล
|
|
|
|
|
Date :
2012-12-18 13:32:30 |
By :
wongkhajang |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
http://forth577.forth.co.th/map.htm
ตามเวปนี้นะค่ะ มันจะฟ้อง
ใช้โค้ดอันนี้ค่ะ
Code (PHP)
<? session_start();
include("db/connect.php");
$ua = $_SERVER['HTTP_USER_AGENT'];
if (strpos($ua,'MSIE 5')) {
$browser = "IE";
}else if (strpos($ua,'MSIE 6')) {
$browser = "IE";
}else if (strpos($ua,'MSIE 7')) {
$browser = "IE";
}else if (strpos($ua,'MSIE 8')) {
$browser = "IE";
}else if(strpos($ua,'Firefox/1')){
$browser = "FF";
}else if(strpos($ua,'Firefox/2')){
$browser = "FF";
}else if(strpos($ua,'Firefox/3')){
$browser = "FF";
}else{
$browser = "OT";
}
?>
<!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>ค้นหาข้อมูล สถานที่ติดตั้ง</title>
<!-- <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAKaJQ6galA0QmFhNdQzYuwRQnaT__a1y-hZdnJBN4Ggj_4W3wVRTkKlGxp0EJvRTbiAqcn-FCYSTDog"
type="text/javascript"></script> -->
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=AIzaSyDQUFTpuOlvR6F6GNejjIQAWqQtg33yNug" type="text/javascript"></script>
<script src="js/gmaps.CircleOverlay.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://maps.google.com/mapfiles/kml/paddle/blu-stars.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://maps.google.com/mapfiles/kml/paddle/grn-stars.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 iconred = new GIcon();
iconred.image = 'http://maps.google.com/mapfiles/kml/paddle/ylw-stars.png';
iconred.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconred.iconSize = new GSize(20, 22);
iconred.shadowSize = new GSize(1, 1);
iconred.iconAnchor = new GPoint(12, 8);
iconred.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["wdm"] = iconBlue;
customIcons["indoor"] = icongreen;
customIcons["outdoor"] = iconred;
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( 13.761728449950002,100.6527900695800), 9);
}
}
function searchLocationsNear() {
var asearch = document.getElementById('asearch').value;
var fsearch = document.getElementById('fsearch').value;
var searchUrl = "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 = 'No results found.';
map.setCenter(new GLatLng( 13.761728449950002,100.6527900695800), 9);
return;
}
var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var fid = markers[i].getAttribute("id");
var idfarm = markers[i].getAttribute("idfarm");
var fproducer = markers[i].getAttribute("fproducer");
var fcollection = markers[i].getAttribute("fcollection");
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type, idfarm, fproducer, fcollection, fid);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, address);
sidebar3.appendChild(sidebarEntry);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
});
}
function createMarker(point, name, address, type, idfarm, fproducer, fcollection, fid) {
var marker = new GMarker(point, customIcons[type]);
var html = "<table width=300><tr><td>"+"Area: "+ idfarm +"<br>"+ "Site: " + name +"<br>"+"Uplink: "+fproducer +"<br>"+"Port: "+fcollection +"port"+"<br>"+ "Device: " + type+"<br>"+"Add: "+address+ "<br>"+"GPS: "+point+"</td></tr></table>";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function createSidebarEntry(marker, name, address) {
var div = document.createElement('div');
var html = "<b>" + name + "</b> <br/>" + address + "<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;
}
// background-image: url(picture/page1952.jpg);
//]]>
</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}
-->
</style></head>
<body onload="load(),initialize()" onunload="GUnload()">
<form action="#" onsubmit="showAddress(this.address.value); return false">
<table>
<tbody>
<tr>
<td width="600" height="402" rowspan="2"><div id="map_canvas" style="width: 600px; height: 400px"></div> </td>
<td width="180" height="402" valign="top"><div align="center"><img src="pic/search1.jpg" alt="" width="180" height="36" />
<input name="text" type="text" id="asearch" value="ใส่ข้อมูลที่จะใช้ค้นหา" size="30"/>
ค้นหาจาก:
<select id="fsearch">
<option value="fname" >Site</option>
<option value="idfarm" >Area</option> //idfarm=area
<option value="faddress" >Province</option>
<option value="type" >Device</option>
</select>
<input type="button" onclick="searchLocationsNear()" value="เริ่มค้นหา"/>
</p>
</div>
<div id="sidebar3" style="overflow: auto; height: 295px; font-size: 11px; color: #000"></div>
</td>
</tr>
</tbody>
</table>
<input type= button value="Refresh" onClick="javascript:location.reload();">
<!-- <a href="index.php">BACK</a>
<a href ="index.php"> Back</a>
<input class="button" name="submit" type="Back" value="กลับ" ><a href = "index.php"/> -->
<input type=button onClick="window.history.back()" value="Back">
<form>
<p class="style3">
<label for="label"></label>
<input type="image" name="imageField2" src="http://maps.google.com/mapfiles/kml/paddle/blu-stars.png" id="label" />
Device WDM<!-- <br /> -->
<label for="label2"></label>
<input type="image" name="imageField3" src="http://maps.google.com/mapfiles/kml/paddle/grn-stars.png" id="label2" />
Device Indoor <!-- </p> -->
<label for="label3"></label>
<input type="image" name="imageField4" src="http://maps.google.com/mapfiles/kml/paddle/ylw-stars.png" id="label3" />
Device Outdoor </p>
</form>
</form>
</body>
</html>
|
|
|
|
|
Date :
2012-12-18 13:54:17 |
By :
wongkhajang |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ของน้อง lek ลองเปลี่ยน Api เป็น
<script src="//maps.google.com/maps?file=api&v=2&sensor=false&key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI" type="text/javascript"></script>
แทนอันเดิม มันออกไม๊ครับ
|
|
|
|
|
Date :
2012-12-19 01:22:42 |
By :
deawx |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ทดลองแล้วค่ะ
ยังฟ้อง เหมือนเดิมนะค่ะ
มันเป็นที่อะไรค่ะ
|
|
|
|
|
Date :
2012-12-19 19:30:16 |
By :
wongkhajang |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="http://maps.google.com/maps?file=api&v=2.x&hl=th&sensor=false&key=ABQIAAAAgIgYh221l8TPag-xvZi8yxT2WCNIZ23xGsEDcFY5GQLcHkLRwhQ7dZS94-nrPkQS6yXEzGhd1GXxIA" type="text/javascript"></script>
ผมลองทดสอบตัวนี้ได้นะ
|
ประวัติการแก้ไข 2012-12-19 21:18:26
|
|
|
|
Date :
2012-12-19 21:17:43 |
By :
deawx |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ใช้โค้ดนี้ <script src="http://maps.google.com/maps?file=api&v=2.x&hl=th&sensor=false&key=ABQIAAAAgIgYh221l8TPag-xvZi8yxT2WCNIZ23xGsEDcFY5GQLcHkLRwhQ7dZS94-nrPkQS6yXEzGhd1GXxIA" type="text/javascript"></script>
ได้ผลตามรูปนะค่ะ
จะมีวีธีการ ขอโค้ด v2 ใหม่ อย่างไรค่ะ
|
|
|
|
|
Date :
2012-12-19 21:59:20 |
By :
wongkhajang |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 05
|