Empty map div
613 views
Skip to first unread message
Coop
Jul 29, 2010, 12:05:15 PM7/29/10
to Google Maps JavaScript API v3
Hello. I am trying to use a form to submit values to MySQL and then
have a map returned that has certain parameters. This is the code
that I am using:
<!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 replaced that line to find out what the server was sending back to
the web page. This is the response:
<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.
Thanks.
have a map returned that has certain parameters. This is the code
that I am using:
<!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 replaced that line to find out what the server was sending back to
the web page. This is the response:
<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.
Thanks.
William Cooper
Jul 29, 2010, 2:43:21 PM7/29/10
to Google Maps JavaScript API v3
Rossko
Jul 29, 2010, 8:36:19 PM7/29/10
to Google Maps JavaScript API v3
> window.onload = loadScript;
This line gets pasted into the webpage long after it has loaded.
Would loadScript() ever be run?
The more usual way to insert dynamic scripts is to create <script>
elements in the document head section, like
http://unixpapa.com/js/dyna.html
This line gets pasted into the webpage long after it has loaded.
Would loadScript() ever be run?
The more usual way to insert dynamic scripts is to create <script>
elements in the document head section, like
http://unixpapa.com/js/dyna.html
William Cooper
Jul 30, 2010, 9:40:18 AM7/30/10
to google-map...@googlegroups.com
Thanks for the reply. I've used very similar code to bring in a table from MySQL without any problems. Both pages are from an example I found online at w3schools. This the page that works with the table: www.makingtreks.com/traillist.aspx. One thing that I forgot to mention in my previous post is that I don't have data for every selection choice. If you need to see the page in action, enter "C", "Less Than 1", and "Easy" on the selection options and then click "Find Trail". The first page works ( www.makingtreks.com/traillist.aspx ). If you select the options that I mentioned earlier, the page returns a table that is populated with the information requested. You won't be able to see this exactly because I have made this page show the information returned from MySQL to determine the cause of the problem on the other page (I thought this was more important than showing the table). I thought that if I followed the same steps, I could get a map that functioned the same way but the map page doesn't work: www.makingtreks.com/traillist2.aspx. The only difference between the two, that I can tell, is that one is enclosed in script tags and one is enclosed in table tags that has the styling in the tags. This is why I thought that it may be a maps issue.
I read the information that you sent (thanks) but I really don't understand it. I am fairly new at all of this and if I don't have a very similar example to look at, then I am lost.
--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
Reply all
Reply to author
Forward
0 new messages