001.
error_reporting
(E_ALL ^ E_NOTICE);
002.
mysql_connect(
$dbserver
,
$dbuser
,
$dbpass
)
or
die
(
"เชื่อมต่อฐานข้อมูลไม่ได้ "
);
003.
mysql_select_db(
$dbname
)
or
die
(
"เลือกฐานข้อมูลไม่ได้"
);
004.
mysql_query(
"SET NAMES UTF8"
);
005.
?>
006.
007.
<meta http-equiv=
"content-type"
content=
"text/html; charset=UTF-8"
/>
008.
<style>
009.
010.
html, body, div, span, applet, object, iframe,
011.
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
012.
a, abbr, acronym, address, big, cite, code,
013.
del, dfn, em, font, img, ins, kbd, q, s, samp,
014.
small, strike, strong, sub, sup, tt,
var
,
015.
b, u, i, center,
016.
dl, dt, dd, ol, ul, li,
017.
fieldset, form, label, legend,
018.
table, caption, tbody, tfoot, thead, tr, th, td {
019.
margin: 0;
020.
padding: 0;
021.
border: 0;
022.
outline: 0;
023.
font-size: 100%;
024.
vertical-align: baseline;
025.
background: transparent;
026.
}
027.
.img_left{ float:left; margin-right:5px; margin-bottom:5px; border:1px dotted #999999; background-color:#f2f2f2; padding:2px;}
028.
.cls{ clear:both;}
029.
.font_map{ font-family:Tahoma, Arial, serif; font-size:13px;}
030.
div#map_canvas { width:100%; height:100%; }
031.
</style>
034.
035.
******
037.
******
038.
039.
<script type=
"text/javascript"
>
040.
$(
function
() {
041.
$(
'#map_canvas'
).gmap3({
042.
map: {
043.
options: {
044.
center: [12.2646459999999999, 99.812830299999990],
045.
zoom: 9,
046.
mapTypeId: google.maps.MapTypeId.ROADMAP,
047.
mapTypeControl: true,
048.
mapTypeControlOptions: {
049.
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
050.
},
051.
}
052.
},
053.
marker: {
054.
values: [
055.
<?php
056.
$sql
= mysql_query(
"select * from pran_marker Order by markerid DESC"
);
057.
$num
= mysql_num_rows(
$sql
);
058.
if
(
$num
>0){
059.
while
(
$r
=mysql_fetch_array(
$sql
)) {
060.
++
$i
;
061.
$i
!=
$num
?
$k
=
','
:
$k
=
''
;
062.
?>
063.
{latLng:[<?php
echo
$r
[latitude]?>, <?php
echo
$r
[longitude]?>], data:
"<div class='font_map'><img src='<?php echo $r[Pic]?>' width='75' height='75' alt='<?php echo $r[places]?>' class='img_left' /><strong><a href='#' title='<?php echo $r[places]?>' target='_blank'><?php echo $r[places]?></a></strong><br /><br /><?php echo $r[Address]?><div class='cls'></div><a href='#' title='<?php echo $r[places]?>' target='_blank'>ดูที่เหลือ</a></div>"
, options:{icon:
"<?php echo $r[raincolor]?>"
}}<?php
echo
$k
?>
064.
<?php
065.
}
066.
}
067.
?>
068.
],
069.
events: {
070.
mouseover:
function
(marker, event, context) {
071.
var
map = $(this).gmap3(
"get"
),
072.
infowindow = $(this).gmap3({
073.
get: {
074.
name:
"infowindow"
075.
}
076.
});
077.
if
(infowindow) {
078.
infowindow.open(map, marker);
079.
infowindow.setContent(context.data);
080.
}
else
{
081.
$(this).gmap3({
082.
infowindow: {
083.
anchor: marker,
084.
options: {
085.
content: context.data
086.
}
087.
}
088.
});
089.
}
090.
},
091.
closeclick:
function
() {
092.
infowindow.close();
093.
},
094.
mouseout:
function
() {
095.
var
infowindow = $(this).gmap3({
096.
get: {
097.
name:
"infowindow"
098.
}
099.
});
100.
}
101.
}
102.
}
103.
});
104.
});
105.
</script>
106.
<div id=
"map_canvas"
></div>