google dynamic marker of maps
what i want to do is:
when i select on combo box item, get items from database and show all marker where i have select . but it doesn't work. Here are my code:index.php
<?php
session_start();
$_SESSION['sum']=0;
include("database/connect_conf.php");
if(!connection()){
echo 'Not connect: '.mysql_error();
}else{
connection();
}
if(!db_select()){
echo 'Not connect to Dabatase: '.mysql_error();
}else{
db_select();
}
$string="SELECT count(province_id) AS c FROM tbl_cep_forum";
$get_result=mysql_query($string);
if($get_result){
$j=1;
while($value=mysql_fetch_array($get_result)){
$_SESSION['sum']=$_SESSION['sum']+$value['c'];
$j++;
}
}
?>
<!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>Google Maps AJAX + mySQL/PHP Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAR0TWf73rulOP_SnETQPFKxRj5djmSsmVAgDaRb1psFcJlThRhxSjxifqM96NjrBsBn2XrZWSE-QQqQ"
type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="includes/style_map.css" />
<script type="text/javascript" src="includes/jquery-1.5.min.js"></script>
<script type="text/javascript" src="includes/interactive_map.js"></script>
<script type="text/javascript" src="includes/js_map.js"></script>
<script type="text/ecmascript" src="includes/ajax_google.js"></script>
<script type="text/javascript">
//<![CDATA[
var iconRed = new GIcon();
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize = new GSize(12, 20);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var customIcons= iconRed;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(12.5, 104.98386), 7);
// Change this depending on the name of your PHP file
GDownloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// var pro_id=markers[i].getAttribute("id");
var name = markers[i].getAttribute("name");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var address = markers[i].getAttribute("address");
var description = markers[i].getAttribute("description");
var marker = createMarker(point, name, address, type,name,description);
// marker.url='http://www.jaukjey.com';
map.addOverlay(marker);
}
});
}
}
function createMarker(point, name, address, type,id,description) {
var marker = new GMarker(point, customIcons);
var html_a = "<b>" + name + "</b> <br/>"+ type;
// var html = "<b>" + name + "</b> <br/>" + type;
GEvent.addListener(marker, 'click', function() {
// window.location.href = marker.url;
var imag_info='<img class="city_photo" src="images/cities/sydney.jpg" alt="sydney" width="75" height="75" />';
var sideHtml='<div class="city_info"><div id="'+name+'" class="dot" continent="'+name+'">'+imag_info+'<br><b>Addres:</b></br><h2>Province Name:....</h2><br></br>'+description+'</div></div>';
$('.detail_container').fadeOut(500,function(){
$('.detail_container .city_detail').html(sideHtml);
$(".detail_container").fadeIn(500);
})
// $(".city_detail").html(sideHtml);
var div=document.getElementById(id);
marker.openInfoWindowHtml(html_a);
});
return marker;
}
/*function Get marker by province*/
function phpajax_get_Province(){
$('#t2').load('phpajax_get_uniq_province.php').show();
var get_name=$('#continent').val();
$.post('phpajax_get_uniq_province.php', { continent: get_name },
function(return_data){
$('#t2').html(return_data).show();
});
alert('Province name is: '+ get_name);
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(12.5, 104.98386), 7);
// Change this depending on the name of your PHP file
GDownloadUrl("phpajax_get_uniq_province.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// var pro_id=markers[i].getAttribute("id");
var name = markers[i].getAttribute("name");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var address = markers[i].getAttribute("address");
var description = markers[i].getAttribute("description");
var marker = createMarker(point, name, address, type,name,description);
map.addOverlay(marker);
//alert('Has reloded!'+ name+"<br></br>"+ type);
}
});
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()" bgcolor="#99b3cc">
<div id="menu_title"><a href="">Forum</a><a href="">Training</a></div>
<div class="map_contianer">
<div id="map" style="width: 600px; height: 500px;"></div>
<!-- Form -->
<form id="mapForm" name="mapForm" class="form_continent" method="post" action="">
<select name="continent" id="continent" onchange="javascript:phpajax_get_Province();">
<?php
$str="select * from tbl_cep_province";
$result=mysql_query($str);
if($result){
$i=1;
while($value=mysql_fetch_array($result)){
?>
<option value="<?php echo $value['id'];?>">
<?php echo $value['name'];?>
</option>
<?php }
$i++;
}else{echo 'Can not select table number.';}?>
<option value="ALL" selected="selected">Show all provinces</option>
</select>
</form>
<table class="collape_main_contianer" border="0">
<tr><td class="list_event_province">
<div style="background-color:#00F; padding-left:5px; font-size:18px; font-weight:bold;">All Medias</div>
<ul>
<li><a href="">Download Video</a></li>
<li><a href="">Download Audio</a></li>
</ul>
<div style="background-color:#00F; padding-left:5px; font-size:18px; font-weight:bold;">Total All Forum: <?php echo $_SESSION['sum'];?></div>
</td></tr>
<tr><td>
<div class="detail_container">
<!-- City details -->
<div class="city_detail">
<!-- City -->
<h3>Choose a province</h3>
<p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula.</p>
<p>Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam.</p>
<p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula.</p>
<p>Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam.</p>
<p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula.</p>
<p>Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam.</p>
</div>
</div>
</td></tr>
</table>
</div>
<div id="t2">return value here</div>
<div id="left_content"><p class="grey" align="justify">
<?php
$str="SELECT tbl_cep_province.id,tbl_cep_province.name FROM tbl_cep_province";
$result=mysql_query($str);
if($result){
$i=1;
while($get_values=mysql_fetch_array($result)){
//$_SESSION['name_province']=$values['id'];
$string="SELECT tbl_cep_province.name,count(province_id) AS c
FROM tbl_cep_forum
INNER JOIN tbl_cep_province ON tbl_cep_province.id = tbl_cep_forum.province_id
WHERE tbl_cep_forum.province_id='".$get_values['id']."'";
$get_result=mysql_query($string);
if($get_result){
$j=1;
while($value=mysql_fetch_array($get_result)){?>
<table cellpadding="0" cellspacing="1">
<tr bgcolor="#ECECEC" onMouseOver="this.style.backgroundColor='transparent'" onMouseOut="this.style.backgroundColor='#ECECEC'">
<td style="width:150px; float:left; padding-left:10px;"><?php echo $value['name'];?></td><td style="padding-left:10px; width:30px; float:left;"><?php echo $value['c'];?></td></tr>
</table>
<?php
$j++;
}
}
$i++;
}
}
?>
</p>
</div>
<div class="city_detail_container">
<!-- City -->
<div class="city_detail" id="sydney">
<img class="city_photo" src="images/cities/sydney.jpg" alt="sydney" width="75" height="75" />
<div class="city_info">
<h2>Sydney 123</h2>
<h3>Australia</h3>
<p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos commodo in interdum vitae leo.</p>
</div>
</div>
<div class="clear_both"></div>
</div><!--close city_detail_container-->
</div><!--Close map_container-->
</body>
</html>
phpajax_get_uniq_province.php
<?php
require("database/connect_conf.php");
if(!connection()){
echo 'Not connect: '.mysql_error();
}else{
connection();
}
if(!db_select()){
echo 'Not connect to Dabatase: '.mysql_error();
}else{
db_select();
}
if (isset($_POST['continent'])){
$name=$_POST['continent'];
?>
<script type="text/javascript">alert('The post name is set!');</script>
<?php
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
// Opens a connection to a MySQL server
//include("images/template/dots.png");
// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE name='$name'";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'name="' . parseToXML($row['name']) . '" ';
echo 'address="' . parseToXML($row['address']) . '" ';
echo 'description="' . parseToXML($row['description']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'type="' . $row['type'] . '" ';
echo '/>';
}
// End XML file
echo '</markers>';
}else{
?>
<script type="text/javascript">alert('Can not get post');</script>
<?php
}
?>
phpsqlajax_genxml.php
<?php
require("database/connect_conf.php");
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
// Opens a connection to a MySQL server
//include("images/template/dots.png");
if(!connection()){
echo 'Not connect: '.mysql_error();
}else{
connection();
}
if(!db_select()){
echo 'Not connect to Dabatase: '.mysql_error();
}else{
db_select();
}
// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fet开发者_开发问答ch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'name="' . parseToXML($row['name']) . '" ';
echo 'address="' . parseToXML($row['address']) . '" ';
echo 'description="' . parseToXML($row['description']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'type="' . $row['type'] . '" ';
echo '/>';
}
// End XML file
echo '</markers>';
?>
Your first drama may be that you are calling the same PHP script, through jQuery, using the $.load() function and the $.post() function:
$('#t2').load('phpajax_get_uniq_province.php').show();
var get_name=$('#continent').val();
$.post('phpajax_get_uniq_province.php', { continent: get_name },
I have little doubt that is the first of many issues. You really do need to cut the code into pieces, run them independently, using Firebug or similar to view the interactions, and then combine it as you prove each segment as error-free.
加载中,请稍侯......
精彩评论