Hello. I am trying to use a form to submit values to MySQL and then
have a Google map returned that has certain parameters. I have modeled this code after an example I found on w3schools. I believe that this is strictly a javascript coding problem. This is the code
that I am using:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#filter {
height: 5%;
width: 73%;
margin-top: 5px;
margin-left: 2%;
border: 3px solid black;
padding: 1%;
overflow: auto }
#txtHint {
height: 20%;
width: 73%;
margin-top: 5px;
margin-left: 2%;
border: 3px solid black;
padding: 1%;
overflow: auto
}
#maplist {
height: 60%;
width: 75%;
margin-top: 5px;
margin-left: 2%;
border: 3px solid black }
</style>
<script type="text/javascript">
function showTrail(str)
{
if (str=="")
{
document.getElementById("maplist").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET","traillist2.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="filter">
<form name="filterform">
<select id="scenery" onchange="">
<option value="">Select Scenery Rating:</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="f">F</option>
</select>
<select id="length" onchange="">
<option value="">Select Trail Length</option>
<option value="g">Less than 1</option>
<option value="h">1-2.9</option>
<option value="i">3-4.9</option>
<option value="j">5-6.9</option>
<option value="k">7-8.9</option>
<option value="l">More than 9</option>
</select>
<select id="difficulty" onchange="">
<option value="">Select Trail Difficulty</option>
<option value="m">Easy</option>
<option value="n">Moderate</option>
<option value="o">Strenuous</option>
</select>
<input id="combined" type="button" value=" Find Trail!
"onclick="showTrail(this.form['scenery'].value +
this.form['length'].value + this.form['difficulty'].value)"/>
</form>
</div>
<div id="maplist"></div>
</body>
</html>
The code is designed to drop the map into the "maplist" div. In the
code above, you see that I have the line
"alert(xmlhttp.responseText);"
which was originally
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;"
I wrote the php page so it would return code as shown below. This is the actual responseText received from the alert.
Code:
script type="text/javascript">
var map;
function initialize() {
var latlng = new google.maps.LatLng(34.65, -83.9);
var options = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var infoWindow = new google.maps.InfoWindow;
var html;
var map = new google.maps.Map(document.getElementById('map_canvas'),
options);
var point = new google.maps.LatLng(
parseFloat(34.558350),
parseFloat(-84.250122));
var marker = new google.maps.Marker({
position : point,
map : map,
icon : 'http://labs.google.com/ridefinder/images/mm_20_red.png'
});
var html = '<div><br><b>Amicalola Falls State Park - Creek Trail</
b><br><br><b>Trail Length: </b>0.5 miles<br><b>Scenery
Rating: </b>C<br><b>Difficulty Rating: </
b>Easy<br><b>Trail Features: </b>Stream<br><br><font
size:large><font face="Tahoma, Geneva, sans-serif" size="1"
color="#000071"><strong><a href="http://www.digitaltrailguide.com/
amicalolafallsstateparkcreekmountainlaurelspringtrails.aspx">View This
Trail</a></strong></font></div>';
bindInfoWindow(marker, map, infoWindow, html);
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?
sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
I thought that this code would be dropped into the div and the map
would populate. The main reason that I believed that is because if I
manually copy and paste the responseText listed above into the div
then the map loads perfectly. Of course, the page isn't dynamic
then. Maybe I just don't understand what is going on here. I also
thought that the responseText is a string instead of what is shown in
the alert box and maybe I should parse it somehow. If this is the
case, I have no idea how to even get started. I have used this same
method successfully to create a table with values generated from
MySQL. Please help. I have been stumped with this issue for some
time now and I am no closer to a solution. I am also fairly new to
web design (javascript, php, MySQL) so sometimes the terminology is a
major barrier for me.
Before you post, read our: 
