ถามปัญหาเกี่ยวกับ Google map ผมมือใหม่ครับรบกวนพี่ๆช่วยแนะนำด้วย
var img="<img src='http://qrcode.kaywa.com/code/10FF0000/geo:13.38926,99.96269'/>";
var html = "<table width=300><tr><td>"+"<b>ชื่อสถานที่ : " + name + "</b> <br/>ที่อยู่ : " + address+"<br/>"+img+"</td></tr></table>";
Date :
2011-09-29 11:31:29
By :
kalamell
รูปก็ยังไม่ขึ้นอยู่ดีครับ
Date :
2011-09-29 13:51:26
By :
siwarin125
ก็ใส่ตรง ๆ ได้ป่ะหละ
function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<table width=300><tr><td>"+"<b>ชื่อสถานที่ : " + name + "</b> <br/>ที่อยู่ : " + address+"<img src="http://qrcode.kaywa.com/code/10FF0000/geo:13.38926,99.96269"></td></tr></table>";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
Date :
2011-09-29 14:35:19
By :
deawx
ไม่ได้ครับพี่วิน ถ้าไส่ตามที่พี่วินบอก ที่ลิ้งค์ หลัง // จะกลายเป็นคอมเม้น
Date :
2011-09-29 14:55:07
By :
siwarin125
ผมทำได้แล้วครับ ผมแก้แบบนี้
function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<table width=300><tr><td>"+"<b>ชื่อสถานที่ : " + name + "</b> <br/>ที่อยู่ : " + address+"</b><br/><img src='http://qrcode.kaywa.com/code/06FF0000/geo:13.38926,99.96269'/></td></tr></table>";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
ตอนนี้ติดปัญหาคือผมจะดึง ข้อมูลพิกัด lat long จากฐานข้อมูลมาไส่ในลิ้งค์รูป ที่ตัวอักษรสีแดงอ่ะครับ ต้องทำยังไง รบกวนด้วยครับ
<img src='http://qrcode.kaywa.com/code/06FF0000/geo:13.38926 ,99.96269 '/>
Date :
2011-09-29 15:11:22
By :
siwarin125
งง
Date :
2011-09-29 15:50:15
By :
romanztic
เอิ่ม... ผมชื่อ เดี่ยว ครับ (แอบหล่อกว่าคุณวิน เล็กน้อย)
คุณวินชื่อ Win ครับ
สำหรับปัญหาที่ว่าจะดึงยังไง ..ถ้าดึงมาจากตตัวแปรที่เรา Select มาจาก DB เราก็ใส่ตัวแปรนั้นได้เลยครับครับ
Date :
2011-09-29 22:56:06
By :
deawx
ขอโทษครับพี่เดี่ยวผมจำผิดคน มองรูปไม่ได้มองชื่อ หุหุ
อันนี้หน้า showmap.htm ของผมที่ทำไว้ครับ ผมต้องไส่ยังไงอ่าครับพี่เดี่ยว ผมมือใหม่หัดเขียนมากๆครับ
<!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=" type="text/javascript" ></script>
<script src="file:///C|/Users/MOJI/Desktop/js/gmaps.CircleOverlay.js" type="text/javascript"></script>
<script src="file:///C|/Users/MOJI/Desktop/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 = '../images/food.png';
iconBlue.shadow = '../images/shadow.png';
iconBlue.iconSize = new GSize(32, 37);
iconBlue.shadowSize = new GSize(32, 37);
iconBlue.iconAnchor = new GPoint(15, 45);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var icongreen = new GIcon();
icongreen.image = '../images/home.png';
icongreen.shadow = '../images/shadow.png';
icongreen.iconSize = new GSize(32, 37);
icongreen.shadowSize = new GSize(32, 37);
icongreen.iconAnchor = new GPoint(15, 45);
icongreen.infoWindowAnchor = new GPoint(5, 1);
var iconred = new GIcon();
iconred.image = '../images/measure.png';
iconred.shadow = '../images/shadow.png';
iconred.iconSize = new GSize(32, 37);
iconred.shadowSize = new GSize(32, 37);
iconred.iconAnchor = new GPoint(15, 45);
iconred.infoWindowAnchor = new GPoint(5, 1);
var iconwrite = new GIcon();
iconwrite.image = '../images/shop.png';
iconwrite.shadow = '../images/shadow.png';
iconwrite.iconSize = new GSize(32, 37);
iconwrite.shadowSize = new GSize(32, 37);
iconwrite.iconAnchor = new GPoint(15, 45);
iconwrite.infoWindowAnchor = new GPoint(5, 1);
var iconblack = new GIcon();
iconblack.image = '../images/drink.png';
iconblack.shadow = '../images/shadow.png';
iconblack.iconSize = new GSize(32, 37);
iconblack.shadowSize = new GSize(32, 37);
iconblack.iconAnchor = new GPoint(15, 45);
iconblack.infoWindowAnchor = new GPoint(5, 1);
var iconyellow = new GIcon();
iconyellow.image = '../images/restaurant.png';
iconyellow.shadow = '../images/shadow.png';
iconyellow.iconSize = new GSize(32, 37);
iconyellow.shadowSize = new GSize(32, 37);
iconyellow.iconAnchor = new GPoint(15, 45);
iconyellow.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["ร้านอาหาร"] = iconBlue;
customIcons["โฮมสเตย์"] = icongreen;
customIcons["วัด"] = iconred;
customIcons["ร้านของที่ระลึก"] = iconwrite;
customIcons["ร้านเครื่องดื่ม"] = iconblack;
customIcons["ร้านของกิน"] = iconyellow;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
geocoder = new GClientGeocoder();
map.addMapType(G_PHYSICAL_MAP);
map.removeMapType(G_NORMAL_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(13.42456,99.95671), 17);
GDownloadUrl("ajax_markers.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
var sidebar2 = document.getElementById('sidebar2');
sidebar2.innerHTML = '';
if (markers.length == 0) {
sidebar2.innerHTML = 'No results found.';
return;
}
var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
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);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, address);
sidebar2.appendChild(sidebarEntry);
bounds.extend(point);
}
});
}
}
function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<table width=300><tr><td>"+"<b>ชื่อสถานที่ : " + name + "</b> <br/>ที่อยู่ : " + address+"</b><br/><img src='http://qrcode.kaywa.com/code/06FF0000/geo:13.38926,99.96269'/></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/> ------------------------------";
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(file:///C|/Users/MOJI/Desktop/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()" onunload="GUnload()">
<table>
<tbody>
<tr id="cm_mapTR">
<td height="402"> <div id="map_canvas" style="width: 600px; height: 400px"></div> </td>
<td width="180" height="402" valign="top"><div align="center">สถานที่
</div>
<div id="sidebar2" style="overflow: auto; height: 362px; font-size: 11px; color: #000"></div> </td>
</tr>
</tbody>
</table>
<form>
<p class="style3">*
<label for="label"></label>
<input type="image" name="imageField2" src="../images/drink.png" id="label" />
เป็น ร้านเครื่องดื่ม * <img name="" src="../images/measure.png" width="32" height="37" alt="" />เป็น วัด<br />
*
<label for="label2"></label>
<input type="image" name="imageField3" src="../images/food.png" id="label2" />
เป็น ร้านอาหาร * <img name="" src="../images/restaurant.png" width="32" height="37" alt="" /> เป็น ร้านของกิน<br />
*
<label for="label2"></label>
<input name="imageField3" type="image" id="label2" src="../images/home.png" />
เป็น โฮมสเตย์ * <img name="" src="../images/shop.png" width="32" height="37" alt="" /> เป็น ร้านของที่ระลึก</p>
</form>
</body>
</html>
Date :
2011-09-30 10:22:23
By :
siwarin125
เงียบ
Date :
2011-10-01 00:10:30
By :
siwarin125
ขอบคุณครับพี่เดี่ยว ผมจะลองศึกษาดู ไม่ได้ยังไงคงต้องรบกวนพี่เดี่ยว ต่อ
Date :
2011-10-02 13:41:42
By :
siwarin125
ยังทำไม่ได้ครับ ผมจะให้โชว์เฉยๆอ่ะครับ แบบว่าพิกัดเปลี่ยน รูป Qr code ก็จะเปลี่ยนตาม แต่ละสถานที่พิกัดจะไม่เหมือนกันครับ
Date :
2011-10-04 11:14:19
By :
siwarin125
ได้นะครับ ทำไมจะไม่ได้หละ
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Map Test by Deawx</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<style>
html {
height: auto;
}
body {
height: auto;
margin: 0;
padding: 0;
}
#map {
height: auto;
position: absolute;
bottom:0;
left:0;
right:0;
top:0;
}
@media print {
#map {
height: 950px;
}
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var locations = [
['<img src="http://qrcode.kaywa.com/code/06FF0000/geo:15.09234482843765,104.30643081665039"><br>สี่แยก หนองครก', 15.09234482843765, 104.30643081665039, 1],
['<img src="http://qrcode.kaywa.com/code/06FF0000/geo:15.10769597211894, 104.3216872215271"><br>วิทยาลัยเทคนิคศรีสะเกษ', 15.10769597211894, 104.3216872215271, 2],
['<img src="http://qrcode.kaywa.com/code/06FF0000/geo:15.11544363118582, 104.32016372680664"><br>โรงพยาบาลจังหวัดศรีสะเกษ', 15.11544363118582, 104.32016372680664, 3]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(15.105355046221582, 104.31570053100586),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i; for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})
(marker, i));
}
</script>
</body>
</html>
Date :
2011-10-04 12:33:24
By :
deawx
ไม่ทราบว่า พิกัดของพี่เดี่ยวที่ให้มานี่พิมเข้าไปเองหรือว่าดึงข้อมูลแต่ละที่มาจากฐานข้อมูลครับ คือของผมต้องการดึงมาจากฐานข้อมูล
Date :
2011-10-05 12:45:09
By :
siwarin125
ตอนนี้ผมเขียนแบบนี้ครับ คือผมจะดึง lat lng จากตาราง markers มาเก็บไว้ที่ตัวแปร $lat $lng ผมต้องใช้คำสั่งอะไรครับ
<?php
$lat = "13.38926" ;
$lng = "99.96269";
?>
var marker = new GMarker(point, customIcons[type]);
var html = "<table width=300><tr><td>"+"<b>ชื่อสถานที่ : " + name + "</b> <br/>ที่อยู่ : " + address+"</b><br/><img src='http://qrcode.kaywa.com/code/06FF0000/geo:<?php echo $lat?>,<?php echo $lng?>'/></td></tr></table>";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
Date :
2011-10-05 14:30:06
By :
siwarin125
รบกวนสอบถามหน่อยค่ะ ถ้าอยากให้ marker ที่แสดงชื่อและที่อยู่ แสดงพร้อมๆ กันหลายๆ จุด ต้องเขียน code ยังไงคะ
Date :
2011-10-10 15:50:52
By :
top
Load balance : Server 01