I am working on a website for my landscape architecture master's thesis centered around the Google Earth API. Through out the site I have various test questions that I pass along as hidden fields from page to page to be entered into my database at the end. My problem is: I am trying to create a button that refreshes my Google earth div container ("APEarth") without refreshing the whole page. Currently, the button refreshes the whole page creating null entries for all the previous test questions. Any help would be greatly appreciated. My code is below. Just as a side note, my skills are very limited, so specific coding help would be greatly appreciated.
<?php /*?>The items below are all the AP Elements in the Design View that make up the website <?php */?>
<style type="text/css">
<!--
#APBody {
position:absolute;
left:0px;
top:0px;
width:1000px;
height:700px;
z-index:1;
margin-top: 12pt;
margin-left: 12pt;
}
#APUpperTitleBlock {
position:absolute;
left:0px;
top:0px;
width:1000px;
height:50px;
z-index:2;
}
#APBottomTitleBlock {
position:absolute;
left:0px;
width:1000px;
height:50px;
z-index:6;
bottom: 0px;
}
#APEarth {
position:absolute;
top:73px;
width:800px;
height:577px;
z-index:4;
right: 0px;
border-color: #000;
border-width: 2 px;
}
#ApContinue {
position:absolute;
left:0px;
top:51px;
width:1000px;
height:18px;
z-index:8;
text-align: right;
}
#APLayers {
position:absolute;
left:0px;
top:73px;
width:200px;
height:576px;
z-index:9;
font-family: Arial, "Arial Bold", "Arial Bold Italic", "Arial Black", "Arial Italic";
font-size: 14px;
font-weight: bold;
}
-->
</style>
<title>Scenario Three</title>
<style type="text/css">
<!--
#APBody #APLayers p {
font-weight: normal;
font-family: Arial, "Arial Bold", "Arial Bold Italic", "Arial Black", "Arial Italic";
}
#GoogleEarthReset {
position:absolute;
left:4px;
top:4px;
width:192px;
height:13px;
z-index:1;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
<div id="APBody">
<div id="APUpperTitleBlock"><img src="Images/ScenarioThree_UTitleBlock.jpg" width="1000" height="50"></div>
<div id="APBottomTitleBlock"><img src="Images/Website_LTitleBlock.jpg" width="1000" height="50"></div>
<div id="ApContinue">
<form method="post" action="ScenarioThreeTest.php">
<?php /*?>Begin hidden pretest answers<?php */?>
<input type="hidden" name="UniqueID" value="<?php echo $_POST['UniqueID']; ?>" />
<input type="hidden" name="GroupID" value="<?php echo $_POST['GroupID']; ?>" />
<input type="hidden" name="1_Age" value="<?php echo $_POST['1_Age']; ?>" />
<input type="hidden" name="2_Race" value="<?php echo $_POST['2_Race']; ?>" />
<input type="hidden" name="3_Education" value="<?php echo $_POST['3_Education']; ?>" />
<input type="hidden" name="4_Occupation" value="<?php echo $_POST['4_Occupation']; ?>" />
<input type="hidden" name="5_Income" value="<?php echo $_POST['5_Income']; ?>" />
<input type="hidden" name="6_SWM_Is" value="<?php echo $_POST['6_SWM_Is']; ?>" />
<input type="hidden" name="7_Landuse" value="<?php echo $_POST['7_Landuse']; ?>" />
<input type="hidden" name="8_Location" value="<?php echo $_POST['8_Location']; ?>" />
<input type="hidden" name="9_Participation" value="<?php echo $_POST['9_Participation']; ?>" />
<input type="hidden" name="10_Comments_Blog_Etc" value="<?php echo $_POST['10_Comments_Blog_Etc']; ?>" />
<input type="hidden" name="11_Web" value="<?php echo $_POST['11_Web']; ?>" />
<?php /*?>Begin hidden Scearnio One Test answers<?php */?>
<input type="hidden" name="12_Scenario_One" value="<?php echo $_POST['12_Scenario_One']; ?>" />
<input type="hidden" name="13_Sustainable" value="<?php echo $_POST['13_Sustainable']; ?>" />
<input type="hidden" name="14_Effectiveness" value="<?php echo $_POST['14_Effectiveness']; ?>" />
<input type="hidden" name="15_Use_Techniques" value="<?php echo $_POST['15_Use_Techniques']; ?>" />
<input type="hidden" name="16_Willing_Scenario_One" value="<?php echo $_POST['16_Willing_Scenario_One']; ?>" />
<input type="hidden" name="17_Comments_Scenario_One" value="<?php echo $_POST['17_Comments_Scenario_One']; ?>" />
<?php /*?>Begin hidden Scenario Two Test answers<?php */?>
<input type="hidden" name="18_Scenario_Two" value="<?php echo $_POST['18_Scenario_Two']; ?>">
<input type="hidden" name="19_Sustainable" value="<?php echo $_POST['19_Sustainable']; ?>">
<input type="hidden" name="20_Effectiveness" value="<?php echo $_POST['20_Effectiveness']; ?>">
<input type="hidden" name="21_Use_Techniques" value="<?php echo $_POST['21_Use_Techniques']; ?>">
<input type="hidden" name="22_Willing_Scenario_Two" value="<?php echo $_POST['22_Willing_Scenario_Two']; ?>">
<input type="hidden" name="23_Comments_Scenario_Two" value="<?php echo $_POST['23_Comments_Scenario_Two']; ?>">
<?php /*?>Continue to Scenario Three Button<?php */?>
<input type="submit" value="Continue to Scenario Three Test" />
</form>
</div>
<div id="APLayers">
<form id="form1" name="form1" method="post" action="">
<p>
<input type="submit" name="Refresh View" id="Refresh View" value="Refresh View" />
<br />
<br />
<a href="GEHelpVideo.html" target="_blank">Google Earth Help Video</a><a href="GEHelpVideo.html"></a></p>
</form>
<p><strong>Introduction: </strong></p>
<p><em>Problem and/or Opportunity Identification:</em></p>
<p>The Big Hollow drainage-way provides a unique opportunity for dense development. Its proximity to the urban core of State College and The Pennsylvania State University allows for continuity of development and alternative transportation. It also contains the necessary infrastructure to accomodate new development. </p>
<p><em>Goal Establishment:<br />
</em><br />
1. Expand and enhance the availability of different housing types and<br />
<br />
2. Expand and enhance urban district growth with new commercial and industrial development.</p>
</div>
<div id="APEarth"></div>
</div>
<?php /*?>End Design View Elements<?php */?>
<?php /*?>The following is the codefor Google Earth on GoDaddy.com<?php */?>
<script src="http://www.google.com/jsapi?key=ABQIAAAAASFuJKi2srzH7vU9dQ775BSMepAERdnJfYrR64vZA9ytMBD-kBTzNLiWgdo_rLSrLhNdv2e5GaHvjg"> </script>
<script type="text/javascript">
//Google Earth HTML
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('APEarth', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
// add a navigation control
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
// add an overview map
ge.getOptions().setOverviewMapVisibility(true);
//add the status bar
ge.getOptions().setStatusBarVisibility(true);
//add the scale legend
ge.getOptions().setScaleLegendVisibility(true);
ge.getOptions().setUnitsFeetMiles(true);
// add some standsard google earth layers
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
//add Big Hollow Well data KML File
var href1 = 'http://www.iecoplanningstudio.com/Google_Earth_Files/Scenario3Wells.kml';
google.earth.fetchKml(ge, href1, function(kmlObject) {
if (kmlObject)
ge.getFeatures().appendChild(kmlObject);});
//add Big Hollow existing zoning KML File
var href3 = 'http://www.iecoplanningstudio.com/Google_Earth_Files/Scenario3ExLanduse.kml';
google.earth.fetchKml(ge, href3, function(kmlObject) {
if (kmlObject)
ge.getFeatures().appendChild(kmlObject);});
//add Big Hollow proposed zoning KML File
var href4 = 'http://www.iecoplanningstudio.com/Google_Earth_Files/Scenario3PropLanduse.kml';
google.earth.fetchKml(ge, href4, function(kmlObject) {
if (kmlObject)
ge.getFeatures().appendChild(kmlObject);});
//add Big Hollow Video Placemark KmL File
// var href5 = 'http://www.iecoplanningstudio.com/Google_Earth_Files/Landuse_Conflict_Video.kml';
// google.earth.fetchKml(ge, href5, function(kmlObject) {
// if (kmlObject)
// ge.getFeatures().appendChild(kmlObject);});
//add Big Hollow Existing Buildings KML File
var href6 = 'http://www.iecoplanningstudio.com/Google_Earth_Files/Scenario3ExBuildings.kml';
google.earth.fetchKml(ge, href6, function(kmlObject) {
if (kmlObject)
ge.getFeatures().appendChild(kmlObject);});
//add Big Hollow Proposed Buildings KML File
var href7 = 'http://www.iecoplanningstudio.com/Google_Earth_Files/Scenario3PropBuildings.kml';
google.earth.fetchKml(ge, href7, function(kmlObject) {
if (kmlObject)
ge.getFeatures().appendChild(kmlObject);});
//add Big Hollow Potential Sinkhole KML File
var href8 = 'http://www.iecoplanningstudio.com/Google_Earth_Files/Potential_Sinkhole.kml';
google.earth.fetchKml(ge, href8, function(kmlObject) {
if (kmlObject)
ge.getFeatures().appendChild(kmlObject);});
///--------------------------------------------------------------------------------------------------------
//Test Placemark
var placemark = ge.createPlacemark('');
// Define a custom icon.
var icon = ge.createIcon('');
icon.setHref('http://maps.google.com/mapfiles/kml/shapes/movies.png');
var style = ge.createStyle(''); //create a new style
style.getIconStyle().setIcon(icon); //apply the icon to the style
placemark.setStyleSelector(style); //apply the style to the placemark
// Set the placemark's location.
var point = ge.createPoint('');
point.setLatitude( 40.800827);
point.setLongitude(-77.881896);
placemark.setGeometry(point);
// Add the placemark to Earth.
ge.getFeatures().appendChild(placemark);
placemark.setName('Land Use Video!');
google.earth.addEventListener(placemark, 'click', function(event) {
// prevent the default balloon from popping up
event.preventDefault();
var balloon = ge.createHtmlStringBalloon('');
balloon.setFeature(placemark); // optional
balloon.setMaxWidth(400);
// YouTube video embed... the in the beginning is a fix for IE6
balloon.setContentString(
' <object width="400" height="300"><param name="movie" '
+ 'value="
+ '<param name="allowFullScreen" value="true"/>'
+ '<embed src="http://www.youtube.com/watch?v=oN3TNoRudfE?hl=en&fs=1" '
+ 'type="application/x-shockwave-flash" allowfullscreen="true" '
+ 'width="400" height="300"></embed></object>');
ge.setBalloon(balloon);
});
///--------------------------------------------------------------------------------------------------------
//Get the Current View
var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
//Set New Latitude and Longitude
lookAt.setLatitude(40.794709);
lookAt.setLongitude(-77.887323);
lookAt.setRange(10000);
// Add to the current tilt
lookAt.setTilt(lookAt.getTilt() + 60);
//Update View
ge.getView().setAbstractView(lookAt);
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
//End Google Earth Coding
</script>
