php เกี่ยวกับแผนที่ google map ค่ะ ดึงจากดาต้าเบส แต่ทำยังไงก็ไม่ขึ้น
นั่งแก้เป็นวันแล้ว แต่ก็ไม่ขึ้นซักทีค่ะ ช่วยดูให้หน่อยนะคะว่าผิดพลาดตรงไหน
Code (PHP)
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="https://raw.github.com/jbdemonte/gmap3/master/gmap3.js"></script>
<script type="text/javascript">
$(function () {
$('#map_canvas').gmap3({
map: {
options: {
zoom: 16,
center: new google.maps.LatLng(15.1066667, 104.56999999999994),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
}
},
marker: {
values: [
<?php
$sql = mysql_query("select * from place");
$latitude=$rs[latitude];
$longitude=$rs[longitude];
$pic=$rs[pic];
$placename=$rs[placename];
$address=$rs[address];
$tel=$rs[tel];
?>
[ <?=$id?>, <?=$latitude?>, <?=$longitude?> , <?=$pic?> , <?=$placename?> , <?=$address?> , <?=$tel?> ]
];
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]),
draggable : false,
title : locations[i][0],
icon: locations[i][3] ,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][4]);
infowindow.open(map, marker);
}
})
(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', init);
</script>
Tag : PHP, MySQL
Date :
2013-02-14 17:46:57
By :
กูเกิ้ลแม็พ
View :
3010
Reply :
11
วิธีนั้นลองแล้วค่ะ แต่ก็ไม่ได้อยู่ดี
Code (PHP)
{latLng:[<?=$r[latitude]?>, <?=$r[longitude]?>], data:"<div class='font_map'><img src='<?=$r[pic]?>' width='75' height='75' alt='<?=$r[placename]?>' class='img_left' /><strong><a href='#' title='<?=$r[placename]?>' target='_blank'><?=$r[placename]?></a></strong><br /><br /><?=$r[address]?><div class='cls'></div><a href='#' title='<?=$r[placename]?>' target='_blank'>ดูที่เหลือ</a></div>", options:{icon: "marker.png"}}<?=$k?>
นี่ค่ะผลลัพธ์ http://www.kanthararom.com/map.php มันโชว์ แต่ว่ารูปที่แสดงมันไม่ขึ้น มันใช้รูป :{icon: "marker.png"}} แทนทั้งหมด ทั้งที่เก็บชื่อไฟล์ภาพไว้ใน pic ค่ะ ถ้าลองลบส่วน :{icon: "marker.png"}} ออกคือจะไม่โชว์จุดมาร์กเกอร์เลย
ช่วยแนะนำหน่อยนะคะ แล้วก็ อีกอย่างคือ พอกด icon marker แล้วมันไม่มีหน้าต่างขาวๆของแผนที่โชว์รายละเอียดอ่ะคะ
ปล.อันนี้โค้ดทั้งหมดค่ะ
Code (PHP)
<?php
$hostname = "localhost";
$user = "kanthara";
$password = "twins999";
$dbname = "kanthara_db";
$tblname = "register";
mysql_connect($hostname, $user, $password) or die("can not contact");
mysql_select_db($dbname) or die("can not contact");
?>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.img_left{ float:left; margin-right:5px; margin-bottom:5px; border:1px dotted #999999; background-color:#f2f2f2; padding:2px;}
.cls{ clear:both;}
.font_map{ font-family:Tahoma, Arial, serif; font-size:13px;}
div#map_canvas { width:100%; height:100%; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="https://raw.github.com/jbdemonte/gmap3/master/gmap3.js"></script>
<script type="text/javascript">
$(function () {
$('#map_canvas').gmap3({
map: {
options: {
zoom: 16,
center: new google.maps.LatLng(15.1066667, 104.56999999999994),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
}
},
marker: {
values: [
<?php
$sql = mysql_query("select * from place");
$num = mysql_num_rows($sql);
if ($num>0){
while ($r=mysql_fetch_array($sql)) {
++$i;
$i != $num ? $k=',' : $k='';
?>
{latLng:[<?=$r[latitude]?>, <?=$r[longitude]?>], data:"<div class='font_map'><img src='<?=$r[pic]?>' width='75' height='75' alt='<?=$r[placename]?>' class='img_left' /><strong><a href='#' title='<?=$r[placename]?>' target='_blank'><?=$r[placename]?></a></strong><br /><br /><?=$r[address]?><div class='cls'></div><a href='#' title='<?=$r[placename]?>' target='_blank'>ดูที่เหลือ</a></div>", options:{icon: "marker.png"}}<?=$k?>
<?php
}
}
?>
],
events: {
mouseover: function (marker, event, context) {
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({
get: {
name: "infowindow"
}
});
if (infowindow) {
infowindow.open(map, marker);
infowindow.setContent(context.data);
} else {
$(this).gmap3({
infowindow: {
anchor: marker,
options: {
content: context.data
}
}
});
}
},
closeclick: function () {
infowindow.close();
},
mouseout: function () {
var infowindow = $(this).gmap3({
get: {
name: "infowindow"
}
});
}
}
}
});
});
</script>
<div id="map_canvas"></div>
Date :
2013-02-15 01:28:09
By :
กูเกิ้ลแม็พ
ปล.คือในดาต้าเบส แต่ละสถานที่จะใช้รูปไม่เหมือนกันค่ะ
เช่นสถานีตำรวจก็รูปนึง โรงบาลก็รูปนึง โรงเรียนก็รูปนี้ประมาณนี้ค่ะ จะดึงภาพมาโชว์ยังไง
Date :
2013-02-15 01:30:57
By :
กูเกิ้ลแม็พ
อ้าวดีจัง ... ขอบคุณหลาย ๆ ค่าา
มีปัญหาอีกคือพอคลิกที่มาร์กเกอร์แล้วจะให้มันขึ้นหน้าแต่งสีขาวเล็ก ๆ แสดงข้อมูลค่ะ
ลองเอาโค้ด infowindows จาก google map มาลองใส่แล้วแต่ก็ไม่ได้
คลิกแล้วไม่ขึ้นอะไรเลย
Code (PHP)
events: {
mouseover: function (marker, event, context) {
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
if (infowindow) {
infowindow.open(map, marker);
infowindow.setContent(context.data);
} else {
$(this).gmap3({
infowindow: {
anchor: marker,
options: {
content: context.data
}
}
});
}
},
closeclick: function () {
infowindow.close();
},
mouseout: function () {
var infowindow = $(this).gmap3({
get: {
name: "infowindow"
}
});
}
}
}
});
});
</script>
พี่ช่วยแนะนำหน่อยนะคะ
ข้อมูลที่จะแสดงใน window มี placename , address , tel จากตาราง place ค่ะ
Date :
2013-02-15 15:50:45
By :
กูเกิ้ลแม็พ
ลองเอาโค้ดผมไปประยุกต์ดูครับ ..
ผมได้ทดสอบแล้ว มันใข้ได้ปกติ
Date :
2013-02-15 17:16:40
By :
deawx
พี่ deawx คะ หนูมีปัญหามาให้พี่ช่วยดู (อีกแล้วค่ะ ==')
คือว่าหนูนั่งแก้โค้ดทั้งงงหมด จนแสดงผลเ็ป็นที่น่าพอใจแล้ว
ก็คือขึ้นข้อมูลทั้งหมดปกติ
แล้วหนูก็เพิ่มข้อมูลสถานที่ลงดาต้าเบส
แต่พอ รีเฟรช หน้าแผนที่แล้วสถานที่ใหม่ที่เพิ่มเข้ามามันไม่ขึ้นเลยอ่ะคะ
หนูอยากรู้ว่าตรงคำสั่ง Select มันมีอะไรผิดพลาดหรือเปล่าคะ หนูพยายามนั่งแก้แล้ว เอาโค้ดที่เคยใช้มาใส่ก็ไม่ได้ คือแก้ไปนิดหน่อยมันก็ขึ้นจอขาวไม่โชว์แผนที่ตลอดเลย ต้อง ctrl+z แล้วกลับมาเริ่มต้นใหม่ เป็นงี้หลายทีละค่ะ 5555 หนูทำไม่ได้จริง ๆ พี่ช่วยดูให้หน่อยนะคะ ขอบคุณล่วงหน้าอีกครั้งค่ะ
Code (PHP)
<?php
$sql = mysql_query("select * from place");
$num = mysql_num_rows($sql);
if ($num>0){
while ($r=mysql_fetch_array($sql)) {
++$i;
$i != $num ? $k=',' : $k='';
?>
{latLng:[<?=$r[latitude]?>, <?=$r[longitude]?>], data:"<img src='<?=$r[pic]?>' width='50' height='50' class='img_center' /><br><strong><?=$r[placename]?></a></strong><br><br><?=$r[address]?>
<br><target='_blank'>เบอร์โทรศัพท์ : </a></div> <?=$r[tel]?>", options:{icon: "<?=$r[pic]?>"}}<?=$k?>
<?php
}
}
?>
Date :
2013-02-19 01:18:47
By :
กูเกิ้ลแม็พ
มันไม่ขึ้น เพราะมันหาไฟล์รูปไม่เจอครับผม รูป marker อ่ะครับ
"NetworkError: 404 Not Found - http://www.kanthararom.com/repair.jpg"
"NetworkError: 404 Not Found - http://www.kanthararom.com/school.jpg"
"NetworkError: 404 Not Found - http://www.kanthararom.com/repair.jpg"
"NetworkError: 404 Not Found - http://www.kanthararom.com/school.jpg"
Date :
2013-02-19 03:30:54
By :
deawx
โพส username กับ password จริง แบบนี้ไม่ปลอดภัยนะครับ แก้ไข ลบออกก็ดีนะครับ เดียวเจอเด็กลองของ ฐานข้อมูลหายหมดนะครับ
เตือนด้วยความหวังดีครับ ^^
Date :
2013-02-19 11:48:49
By :
Hm
ขอบคุณสำหรับคำเตือนค่ะ คุณ Hm เปลี่ยนพาสเรียบร้อยแล้วค่ะ คราวหน้าจะไม่สะเพร่าอีก
ปล.ที่สำัคัญขอขอบคุณพี่เดียวมาก ๆ ค่ะ
ตอนนี้งานส่วนกูเกิ้ลแมพผ่านลุล่วงไปได้ด้วยดี
Date :
2013-02-20 00:57:07
By :
กูเกิ้ลแม็พ
ยินดีนำเด้อจ้า
Date :
2013-02-20 02:34:29
By :
deawx
Load balance : Server 05