-1

This is my first Google Maps js project. I have used the Google Earth for some time. I have a page that has a drop list of KML URLs. Initially the map needs to center on a selected point. This works find. After the droplist selection it needs to load a KML file. The KML file I use is the same as used in Google Earth. I am viewing with chrome and see no errors.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Test Google Maps Project\</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://www.google.com/jsapi?key=MY_API_KEY" type="text/javascript"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script type="text/javascript">
     var map;
     function initialize() 
     {
      var csmap = new google.maps.LatLng(40.8471706333333,-72.6395958166667);
      var mapOptions = 
      {
        zoom: 15,
        center: csmap 
      }
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
     }

     google.maps.event.addDomListener(window, 'load', initialize);

     function fetchKmlFromOption() {
      //Load the selected KML
      var kmlUrlBox = document.getElementById('KMLSelector');
      var kmlUrl = kmlUrlBox.value;
      if (kmlUrl !='Clear') {
        var geoLayer = new google.maps.KmlLayer(kmlUrl);
        geoLayer.setMap(map);
      }
     }

    </script>
  </head>
  <body onload="initialize()" style="font-family: arial, sans-serif; font-size: 13px; border: 0;"  bgcolor="#E6CFCF">
    <CENTER>
    <div id="main">
     <H1>Test Google Maps - KML Loader</H1>
     <H2>Google Maps API Demo</H2>
     Select KML option :
      <select id='KMLSelector' onchange='fetchKmlFromOption()'>
       <option value='Clear'>Clear loaded KML</option>
       <option value='THIS-IS-FIRST-KML-URL'>Fetch First KML</option>
       <option value='THIS-IS-SECOND-KML-URL'>Fetch Second KML</option>
       <option value='THIS-IS-THIRD-KML-URL'>Fetch Third KML</option>
      </select>
      <BR>
      <div id="map-canvas" style="width: 1000px; height: 600px;"></div>
    </div>
    <br>
    </CENTER>
  </body>
</html>
2
  • You will need to provide a public URL (or URLs) that exhibit the problem for us to tell what is going on. Another option would be to check the returned status (KmlStatus) of the KmlLayer to see if it loaded successfully.
    – geocodezip
    Jul 7, 2014 at 20:46
  • The page is located at : 'mebcs.com/gabreskiairportGM'
    – MarkB
    Jul 7, 2014 at 20:57

1 Answer 1

0

There are multiple issues

  1. (minor)you call initialize 2 times:

    <body onload="initialize()" ....>
    

    and

    google.maps.event.addDomListener(window, 'load', initialize);
    

    remove 1 call.

  2. the url contains illegal characters(spaces), encode the url via encodeURI

  3. each time you select a layer from the list you create a new layer, but there is a limit for the number of layers

  4. 2 of the 3 layers are a bit large, there is a limit of 3MB for the filesize(the size of these layers is 3MB). The documentation isn't clear whether the size-limit applies to a single layer or all layers, but as it appears it's related to all layers. So when you load a 3MB-layer you can't load further layers. Possible solution: always load only a single layer:

    function fetchKmlFromOption() {
      //use a single layer
       if(!map.get('kml')){
         map.set('kml',new google.maps.KmlLayer);
       }
       kml=map.get('kml');
      //Load the selected KML
      var kmlUrlBox = document.getElementById('KMLSelector'),
          kmlUrl = kmlUrlBox.value,
          kml=map.get('kml');
    if (kmlUrl !='Clear'){ kml.setValues({'url':encodeURI(kmlUrl),map:map});
    }else{ kml.setMap(null); } }

  5. Although the layers may be loaded you will see nothing when you use this style for your placemarks:

     <Style id="hideLabel">
      <LabelStyle>
       <scale>0</scale>
      </LabelStyle>
     </Style>
    

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.