1

I have a little Problem which makes me freaky

I've programmed a Google Maps Website with my own marker. On StackOverflow i found most of the solutions but not the last one.

The funny Thing is, my code is working, if the Website runs on a webserver. But html has to run without any webserver. So i can't find out, why my Website is working on the IE with the webserver, but not without it. With not working i mean, i can see the map, but not the markers.

The Firefox makes no Problem, he runs the Website with and without the server

If you can help me, i would get really happy and relieved

Here my Code:

`

//+++++++++++ Hier werden die Adresslisten eingelesen++++++


var l1 = "FSadressliste.xml" ;
var l2 = "MSadressliste.xml" ;
var l3 = "PAadressliste.xml" ; 
var l4 = "SKadressliste.xml" ;
var l5 = "SSadressliste.xml" ; 
var l6 = "TKadressliste.xml" ; 
var l7 = "TSadressliste.xml" ;
var l8 = "UWadressliste.xml" ; 
var l9 = "VKadressliste.xml" ;


//+++++++++++ Hier werden die Bilder/Icons eingelesen++++++

var customIcons = {
  fs: {
    icon: 'FS.png'
  },
  ms: {
    icon: 'MS.png'
  },
  pa: {
    icon: 'PA.png'
  },
  sk: {
    icon: 'SK.png'
  },
  ss: {
    icon: 'SS.png'
  },
  tk: {
    icon: 'TK.png'
  },
  ts: {
    icon: 'TS.png'
  },
  uw: {
    icon: 'UW.png'
  },
  vk: {
    icon: 'VK.png'
  }
};




//+++++++++++ Hier erstellen wir Arrays für die Marker++++++++++

var markerGroups = {
  "fs": [],
  "ms": [],
  "pa": [],
  "sk": [],
  "ss": [],
  "tk": [],
  "ts": [],
  "uw": [],
  "vk": []
};

//+++++++++++ Hier die Map erstellt++++++

function load() {
   var map = new google.maps.Map(document.getElementById("map"), {
          center: {lat: 47.560393, lng: 9.093359},
          zoom:11

  });


  var infoWindow = new google.maps.InfoWindow;

  //+++++++++++ Hier werden die Adresslisten ausgewertet und die Marker erstellt++++++

  //+++++++++++ Hier werden die Adressen der Freileitungsschalter ausgewertet und die Marker erstellt++++++  
      downloadUrl( l1 , function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon

          });
          if (!markerGroups[type]) markerGroups[type] = [];
            markerGroups[type].push(marker);
          bindInfoWindow(marker, map, infoWindow, html);    
        }
      });     

  //+++++++++++ Hier werden die Adressen der Messstationen ausgewertet und die Marker erstellt++++++          
      downloadUrl( l2 , function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,                
            icon: icon.icon
          });
          if (!markerGroups[type]) markerGroups[type] = [];
            markerGroups[type].push(marker);
          bindInfoWindow(marker, map, infoWindow, html);    
        }
      });   

  //+++++++++++ Hier werden die Adressen der Produktionsanlagen ausgewertet und die Marker erstellt++++++         
      downloadUrl( l3 , function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          if (!markerGroups[type]) markerGroups[type] = [];
            markerGroups[type].push(marker);
          bindInfoWindow(marker, map, infoWindow, html);    
        }
      });

  //+++++++++++ Hier werden die Adressen der Schaltkabinen ausgewertet und die Marker erstellt++++++
      downloadUrl( l4 , function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          if (!markerGroups[type]) markerGroups[type] = [];
            markerGroups[type].push(marker);
          bindInfoWindow(marker, map, infoWindow, html);    
        }
      });

  //+++++++++++ Hier werden die Adressen der Schaltstationen ausgewertet und die Marker erstellt++++++
      downloadUrl( l5 , function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          if (!markerGroups[type]) markerGroups[type] = [];
            markerGroups[type].push(marker);
          bindInfoWindow(marker, map, infoWindow, html);    
        }
      });

  //+++++++++++ Hier werden die Adressen der Trennkabinen ausgewertet und die Marker erstellt++++++
      downloadUrl( l6 , function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          if (!markerGroups[type]) markerGroups[type] = [];
            markerGroups[type].push(marker);
          bindInfoWindow(marker, map, infoWindow, html);    
        }
      });

  //+++++++++++ Hier werden die Adressen der Trafostationen ausgewertet und die Marker erstellt++++++
      downloadUrl( l7 , function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          if (!markerGroups[type]) markerGroups[type] = [];
            markerGroups[type].push(marker);
          bindInfoWindow(marker, map, infoWindow, html);    
        }
      });

  //+++++++++++ Hier werden die Adressen der Unterwerke ausgewertet und die Marker erstellt++++++
      downloadUrl( l8 , function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          if (!markerGroups[type]) markerGroups[type] = [];
            markerGroups[type].push(marker);
          bindInfoWindow(marker, map, infoWindow, html);    
        }
      });

  //+++++++++++ Hier werden die Adressen der Verteilkabinen ausgewertet und die Marker erstellt++++++
      downloadUrl( l9 , function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
        });
          if (!markerGroups[type]) markerGroups[type] = [];
            markerGroups[type].push(marker);
          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 downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}


function toggleGroup(type) {
  for (var i = 0; i < markerGroups[type].length; i++) {
    var marker = markerGroups[type][i];
    if (!marker.getVisible()) {
      marker.setVisible(true);
    } else {
      marker.setVisible(false);
    }
  }
}

`

This is the HTML Code, it just Displays the map and the Checkboxes to show/hide markers:

<body onload="load()">
<div id="map" style="float:left; width: 1124px; height: 940px; border: 1px solid black"></div>

<div id="sidebar" style="float:left; width: 190px; height: 200px; border: 1px solid black">

   <input id="uwCheckbox" type="checkbox" onclick="toggleGroup('uw')" checked="checked" />
   <font color=blue>Unterwerke</font>

   <br/>
   <input id="ssCheckbox" type="checkbox" onclick="toggleGroup('ss')" checked="checked"/>
   <font color=red>Schaltstationen</font>

   <br/>
   <input id="skCheckbox" type="checkbox" onclick="toggleGroup('sk')" checked="checked"/>
   <font color=orange>Schaltkabinen</font>


   <br/>
   <input id="tkCheckbox" type="checkbox" onclick="toggleGroup('tk')" checked="checked"/>
   <font color=green>Trennkabinen</font>

   <br/>
   <input id="msCheckbox" type="checkbox" onclick="toggleGroup('ms')" checked="checked"/>
   Messstationen

   <br/>
   <input id="vkCheckbox" type="checkbox" onclick="toggleGroup('vk')" checked="checked"/>
   <font color=#8904B1>Verteilkabinen</font>

   <br/>
   <input id="fsCheckbox" type="checkbox" onclick="toggleGroup('fs')" checked="checked"/>
   <font color=#58D3F7>Freileitungsschalter</font>

   <br/>
   <input id="tsCheckbox" type="checkbox" onclick="toggleGroup('ts')" checked="checked"/>
   <font color=#FF00E5>Trafostationen</font>

   <br/>
   <input id="paCheckbox" type="checkbox" onclick="toggleGroup('pa')" checked="checked"/>
   <font color=#A5DF00>Produktionsanlagen</font>


</div>

and one of the XML-files:

<mapr_markers>
          <marker name="UW Amriswil" address="Amriswil" lat="47.548073" lng="9.313464" type="uw"/>
          <marker name="UW Arbon" address="Arbon" lat="47.502347" lng="9.410775" type="uw"/>
          <marker name="UW Bischofszell" address="Bischofszell" lat="47.500574" lng="9.243699" type="uw"/>
          <marker name="UW FrauenfeldOst" address="FrauenfeldOst" lat="47.572749" lng="8.914427" type="uw"/>
          <marker name="UW FrauenfeldWest" address="FrauenfeldWest" lat="47.562203" lng="8.887554" type="uw"/>
          <marker name="UW Hasli" address="Hasli" lat="47.592189" lng="9.006187" type="uw"/>
          <marker name="UW Ifwil" address="Ifwil" lat="47.464317" lng="8.945181" type="uw"/>
          <marker name="UW KreuzllngenOst" address="KreuzllngenOst" lat="47.633962" lng="9.201323" type="uw"/>
          <marker name="UW KreuzllngenWest" address="KreuzllngenWest" lat="47.649714" lng="9.152670" type="uw"/>
          <marker name="UW NeuMuenchwilen" address="NeuMuenchwilen" lat="47.472727" lng="8.989533" type="uw"/>
          <marker name="UW Schlattlngen" address="Schlattlngen" lat="47.657092" lng="8.775852" type="uw"/>
          <marker name="UW Steckborn" address="Steckborn" lat="47.658691" lng="8.990843" type="uw"/>
          <marker name="UW Sulgen" address="Sulgen" lat="47.525419" lng="9.180990" type="uw"/>
          <marker name="UW Waengi" address="Waengi" lat="47.498224" lng="8.949127" type="uw"/>
          <marker name="UW Weinfelden" address="Weinfelden" lat="47.560393" lng="9.093359" type="uw"/>

the other function i tried, to get the XMLHttpRequest:

    function downloadUrl(url, callback) {
  var request = null;
    if(window.XMLHttpRequest){ //Google Chrome, Mozilla Firefox, Opera, Safari, IE 7
        request = new XMLHttpRequest();
    }
    else if(window.ActiveXObject){ // Internet Explorer 6 und niedriger
        try{
            request = new ActiveXObject("Msxml2.XMLHTTP.6.0");
        } catch(e){
            try{
                request = new ActiveXObject("Msxml2.XMLHTTP.3.0");
            }
            catch(e){}
        }
    }

  request.onreadystatechange = function() {
    if (request.readyState == 4) { 
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

--------- EDIT

There is an Access denied, at the Point, where im calling the: request.open('GET', url, true);

but I cannot add my site to the trusted sites, because my Website is local ("offline") and everything what is local saved, for IE its a trusted site.

I also added "everyone" to the Folder permissions with full control.

a-town
  • 11
  • 3
  • can you post html also, or a fiddle? – xrgb Apr 11 '16 at 13:30
  • 1
    In what way is it 'not working' using IE? Map not displaying? Markers not displaying? – xrgb Apr 11 '16 at 13:45
  • the markers are not displaying, i just see the map but when i put the Website on a webserver, then it works with IE – a-town Apr 11 '16 at 13:50
  • 1
    It's probably a problem with using the ActiveXObject. It seems like Microsoft recommends checking for existing of window.XMLHttpRequest and using that FIRST, then defaulting to ActiveXObject. Also, to use AtiveXObject locally you probably have to change security settings in IE. – xrgb Apr 11 '16 at 14:15
  • I tested a new function which you can see in the question part, nothing changed, in the IE i did everything to accept it (security), nothing.. any orher ideas? :-) – a-town Apr 12 '16 at 14:28
  • Can you use the console or debugger to narrow down where it is failing on IE? – xrgb Apr 12 '16 at 16:34
  • There is an Access denied, at the Point, where im calling the: request.open('GET', url, true); but I cannot add my site to the trusted site, because my Website is local ("offline") and everything what is local saved, for IE its a trusted site.. – a-town Apr 13 '16 at 10:05
  • I think you need to add the site you are downloading files from - this might be helpful - http://stackoverflow.com/questions/22098259/access-denied-in-ie-10-and-11-when-ajax-target-is-localhost – xrgb Apr 13 '16 at 13:14
  • Everything is local only the map is loaded from Google, but the map is loading only the markers are not displaying, so i can't add any local site to trusted sites or somewhere.. The link you posted was about the problem to get files from the Internet. but thank you very much! – a-town Apr 18 '16 at 13:02
  • Are you sure? the question seemed specifically to deal with problems when using ajax with localhost – xrgb Apr 19 '16 at 21:02

0 Answers0