Nu har jeg forsøgt at tage tyren ved hornene.
Jeg har slettet alt "overflødigt" kode fra jsp-siden, og sat 2 test-pins ind. Resultatet er, at siden vises fint nok i Firefox. Men i IE kommer der stadig fejl.
Siden er vel efterhånden så simpel som muligt. Men hvorfor bliver IE ved med at brokke sig?
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><!--VIRKER-->
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">--><!--TIL CHECK AF SYNTAX (IF USED DURING RUNTIME THEN THE PAGE WONT SHOW!!!)-->
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Testpage</title>
<script type="text/javascript" defer src="
http://maps.google.com/maps/api/js?sensor=false&language=DK®ion=DK"></script> <script type="text/javascript" defer>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
//func= addLoadEvent(function){}
window.onload = func;
}else {
//document.write("<table border=\"1\"><tr><td></td></tr></table>");
initialize();
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
//Doesn't seem to have any effect:'
//Setup the map
addLoadEvent(function() {
//load();
//showAddress("raleigh, nc");
initialize();
})
var geocoder = null;
var map = null;
var coordinates = null;
var numberOfMarkers=0;
var hasLogoutBeenPressed="false";
/***************************************************************************************************
********************When page is loaded a GeoCoder is initialized and the 'addressVar' is***********
********************added to the map****************************************************************
***************************************************************************************************/
function load()
{
geocoder = new google.maps.Geocoder();
geocoder.getLocations(addressVar, addToMap());
}
/***************************************************************************************************
********************This function adds the point to the map*****************************************
***************************************************************************************************/
function addToMap(response)
{
//called in initialization of page:
//Retrieve the object
place = response.Placemark[0];
// Retrieve the latitude and longitude
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
point.toString();
// Center the map on this point
map.setCenter(point, 13);
// Create a marker
marker = new GMarker(point);
// Add the marker to map
map.addOverlay(marker);
// Add address information to marker
marker.openInfoWindowHtml(place.address);
}
var markerFromDB=new Array();
function initialize() {
var latlng = new google.maps.LatLng(55.8619, 9.8475);
var markerlocations = new Array();
markerlocations=[new google.maps.LatLng(55.94368,9.89451), new google.maps.LatLng(55.97368,9.84451)];
var myOptions = {zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
function deleteThisPinInTheDatabase(value)
{
window.location = deletePinUrl+value;
}
//to modify the url to contain the typed value:
function testResults(value) {
var TestVar=value;
//somehow the javascript-function CAN'T handle if the value ends with '0'. This is handled when the pin is created then.
//If the latitude/longtitude of the pin ends with '0' then it's deleted as it has no effect anyway
window.location = testResultsUrl+TestVar;
}
function deletePin(form){
var TestVar = form.dataField.value;
point=null;
srchType = null;
document.getElementById("srchType")=null;
windows.location = deletePinUrl+TestVar;
}
function modifyPin(form){
var TestVar = form.dataField.value;
if(TestVar.charAt(0)=='(' && TestVar.charAt(0)==')'){
TestVar=Testvar.subString(1, TestVar.length()-1);
}
//if NO ' is set around the videoUrl then the google-parser will produce an error!!!
window.location = modifyPinUrl+TestVar+"&modify=true&linkURL="+document.loginForm.linkURL.value+"&category="+document.loginForm.category.value+"&embedVideo='"+document.loginForm.embedVideo.value+"'&description="+document.loginForm.description.value+"'&location="+document.loginForm.location.value;
}
for(i=0; i<markerlocations.length; i++)
{
markerFromDB[i]=new google.maps.Marker(
{ position: markerlocations[i],
map: map,
title: "Dobbeltklik for at ændre indholdet."
});
google.maps.event.addListener(markerFromDB[i], 'click',
function(){
markerClick(this);
}
);
google.maps.event.addListener(markerFromDB[i], 'rightclick',
function(event) {
markerRightClick(this);
}
);
function markerRightClick(mark)
{
for(var m3=0; m3<markerFromDB.length; ++m3)
{
if(markerFromDB[m3]==mark)
{
var answer=confirm("Er du sikker på, at du vil slette disse data fra databasen?");
if(answer){
deleteThisPinInTheDatabase(markerlocations[m3]);
markerFromDB[m3].setMap(null);
markerlocations[m3].setMap(null);
markerFromDB[m3]=null;
}
return;
}
}
}
google.maps.event.addListener(markerFromDB[i], 'dblclick',
function(){
markerDblClick(this);
}
);
}
function markerDblClick(mark)
{
for(var m2=0; m2<markerFromDB.length; ++m2)
{
if(markerFromDB[m2]==mark)
{
testResults(markerlocations[m2]);
return;
}
}
}
function markerClick(mark)
{
for(var m=0; m<markerFromDB.length; ++m)
{
if(markerFromDB[m]==mark)
{
map.set_center(markerlocations[m]);
map.set_zoom(16);
return;
}
}
}
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
load();
}
var markerPosition;
function placeMarker(location) {
//when manually mouseclick to set pin:
/***************************************************************************************************
********************only allow 1 marker to be put on the map at a time******************************
***************************************************************************************************/
if(numberOfMarkers<1){
var marker = new google.maps.Marker({
position: location,
draggable: true,
map: map
});
numberOfMarkers++;
/***************************************************************************************************
********************To handle a single rightclick to delete marker on map***************************
***************************************************************************************************/
//HAS to be placed here because the listener NEEDS a reference to each marker. The marker is generated in this function!
google.maps.event.addListener(marker, "rightclick", function() {
deleteMarker(this);
});
function deleteMarker(mark)
{
mark.setMap(null);
numberOfMarkers--;
var srchType = document.getElementById("srchType");
//save the position of the marker in the hidden form-value
srchType.value="";
}
}
markerPosition=marker.position;
/***************************************************************************************************
********************save a javascript-variable in a variable in the form****************************
***************************************************************************************************/
//get reference to hidden value in form
var srchType = document.getElementById("srchType");
//save the position of the marker in the hidden form-value
srchType.value=markerPosition;
map.setCenter(location);
}
/***************************************************************************************************
********************Pinpoints a location on the map from the coordinates entered********************
***************************************************************************************************/
function codeLatLng()
{
var input;
if(input != null){
input = null;
}
//the writen coordinates from the textfield:
input = document.getElementById("coordinates").value;
var latlngStr, lat, lng, latlng;
if(latlngStr!=null){
latlngStr=null;
}
if(lat!=null){
lat=null;
}
if(lng!=null){
lng=null;
}
if(latlng!=null){
latlng=null;
}
if(document.getElementById("srchType") != null){
document.getElementById("srchType").value = "";
}
latlngStr = input.split(",",2);
lat = Number(latlngStr[0]);
lng = Number(latlngStr[1]);
latlng = new google.maps.LatLng(lat, lng);
if (geocoder)
{
geocoder.geocode({'latLng': latlng}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK)
{
if (results[1])
{
if(numberOfMarkers<1){
map.setZoom(13);
if(coordinates!=null){
coordinates=null;
}
coordinates=results[0].geometry.location;
var hiddenElem;
if(hiddenElem != null){
hiddenElem =null;
}
//store variable in hidden field:
hiddenElem = document.getElementById("hid");
if(hiddenElem){
hiddenElem.value = coordinates;
}
var srchType;
if(srchType != null){
srchType =null;
}
//store variable in hidden field as in mouseClick
//get reference to hidden value in form
srchType = document.getElementById("srchType");
//save the position of the marker in the hidden form-value
srchType.value=latlng;
//Initial way to do it, but it's not accurate:
//map.setCenter(results[0].geometry.location);
//instead of inaccurate way:
map.setCenter(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
//HAS to be placed here because the listener NEEDS a reference to each marker. The marker is generated in this function!
google.maps.event.addListener(marker, "rightclick", function() {
deleteMarker(this);
});
numberOfMarkers++;
function deleteMarker(mark)
{
mark.setMap(null);
numberOfMarkers--;
mark=null;
document.getElementById("srchType")=null;
var srchType = document.getElementById("srchType");
//save the position of the marker in the hidden form-value
srchType.value="";
}
}else
{
alert("Du har allerede indsat en pin. Hvis du vil sætte en ny pin, skal den gamle først slettes via et højreklik via musen på pin'en!");
}
}else
{
alert("Result[] ikke result[1]");
}
}else{
if(status == google.maps.GeocoderStatus.ZERO_RESULTS)
{
alert("Fejl i Google: Google opfatter det angivne som en ikke-eksisterende adresse eller en 'afsides beliggenhed'.");
}else{
alert("Koordinaterne ikke fundet: " + status);
}
}
});
}else{
alert("Fejl i GeoCoder som er en del af Google");
}
}
function test(){
var hiddenElem = document.getElementById("hidden");
if(hiddenElem)
hiddenElem.value = marker;
}
</script>
<link rel="stylesheet" href="dialog.css" media="all" type="text/css"/>
<link rel="stylesheet" href="example-variants.css" media="all" type="text/css"/> <!-- optional: black drip style -->
<style type="text/css">
.btnExample {
color: #FFF;
background: #0000ff;
font-weight: bold;
border: 1px solid #900;
}
.btnExample:hover {
color: #0000ff;
background: #FFF;
}
</style>
<style type="text/css">
.dialog {
position:relative;
margin:0px auto;
min-width:8em;
max-width:760px; /* based on image dimensions - not quite consistent with drip styles yet */
color:#fff;
z-index:1;
margin-left:0px; /* default, width of left corner */
margin-bottom:0px; /* spacing under dialog */
}
.dialog .content,
.dialog .t,
.dialog .b,
.dialog .b div {
background:transparent url(../src/dialog2-blue-800x1600.png) no-repeat top right;
_background-image:url(../src/dialog2-blue.gif);
}
.dialog .content {
position:relative;
_overflow-y:hidden;
padding:0px 0px -20px 0px;
}
.dialog .t {
/* top+left vertical slice */
position:absolute;
left:0px;
top:0px;
width:12px; /* top slice width */
margin-left:-12px;
height:100%;
_height:1600px; /* arbitrary long height, IE 6 */
background-position:top left;
}
.dialog .b {
/* bottom */
position:relative;
width:100%;
}
.dialog .b,
.dialog .b div {
height:30px; /* height of bottom cap/shade */
font-size:1px;
}
.dialog .b {
background-position:bottom right;
}
.dialog .b div {
position:relative;
width:12px; /* bottom corner width */
margin-left:-12px;
background-position:bottom left;
}
.dialog .hd,
.dialog .bd,
.dialog .ft {
position:relative;
}
.dialog .wrapper {
/* extra content protector - preventing vertical overflow (past background) */
position:static;
max-height:1000px;
overflow:auto; /* note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */
}
.dialog h1,
.dialog p {
margin:0px; /* margins will blow out backgrounds, leaving whitespace. */
padding:0px 0px 0px 0px;
}
.dialog h1 {
padding-bottom:0px;
}
</style>
</head>
<body onload="addLoadEvent();" >
<!-- test if the browser is Firefox which the application is developed to fit: -->
<noscript>
<p style="font-weight: bold">JavaScript must be enabled in order for you to use this site.
However, it seems JavaScript is either disabled or not supported by your browser.
To view the maps and use the other features on this site you must enable JavaScript by
changing your browser-options and then try again.
</p>
</noscript>
<script TYPE="text/javascript">
<!-- --> <HR>
<!-- --> <P ALIGN=center><STRONG>Your browser does not appear to
<!-- --> support JavaScript.
<!-- --> <BR>This form will not be useful to you
<!-- --> without a browser that supports JavaScript.</STRONG></P>
<!-- --> <HR>
<!--
if (0 < navigator.userAgent.indexOf("Opera/3")) {
document.write ("<HR><P ALIGN=center><BIG>Opera 3.x"
+ " Warning</BIG></P>");
document.write ("<P>Versions 3.0 through 3.51 of the Opera Web"
+ " browser contain flaws that prevent the hemisphere"
+ " indication and designation from working properly."
+ " It is recommended that you use another browser to"
+ " view and use this page.<HR>");
}
-->
</script>
<div id="tableDiv" style="height: 27%">
<table border="0" width="100%" style="margin-right: -10px; margin-bottom: -35px; margin-top: -10px; margin-left: 0px; padding: -10px;">
<tr>
<td>
Test:
</td>
</tr>
</table>
</div>
<div id="map_canvas" style="width:100%; height:73%"></div>
<object id="obj" style="visibility: hidden"></object>
</body>
</html>
