Trouble in assigning multiple kml files and getting them to work in dropdown menu

I am trying to embed some kml files for local county bodries but am not
sure how to asign multiple ones as I am coding in dreamweaver. Also I
have made a drop down menu for eack kml file but am not sure how to link
and get it all to work, mainly want the boundries to be shown on the
map at all times and when selected in the dropdown menu, that particular
county is shown on the map. Please see my coding I have done, and if
there is any advice i would appreciate it. I am completely new to this
and trying to teach myself.

var kmlUrl = 'maps/central bedfordshire' ;
   var kmlOptions = {
   suppressInfoWindows: true,
   preserveViewport: false, 
  map: map
 };
var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);

function countiesDropdown(container){
var counties = {
"bedfordshire",
"hertfordshire",
"cambridgeshire",
"northamptonshire",
"buckinghamshire"

}
 var out = "<select><option value=""></option>";</select>
<select> for (var key in counties) {</select>
<select> out += "<option value="&quot; + key + &quot;">" + counties[key] + "</option>";</select>
<select> }</select>
  <select> out += "</select>";
 console.log(out);
 document.getElementById(container).innerHTML = out;
}

I have already inbeded the general map and markers etc and they
work fine hence why have only given the coding that isn’t working. Here
is the HTML part.

  HTML Code:
<div id="menu" style=" position: absolute; margin: 45px 80px;" >
   <select id="Counties">
      <option value="">Select County</option>
      <option value="bedfordshire">Bedfordshire</option>
     <option value="buckinghamshire">Buckinghamshire</option>
     <option value="cambridgeshire">Cambridgeshire</option>                       
    <option value="hertfordshire">Hertfordshire</option>
      <option value="northamptonshire">Northamptonshire</option>

 </select>
 </div>

Hope this enough of an understanding of what i have and am trying to do.

1 Like

Hi, your script was malformed, the countiesDropdown function never would have worked, start writing code with the console open so you can see when there’s errors.

I’ve pieced this much of the code together, it will look for a kml file on a server with the value you select from the drop down. e.g. http://myserver.com/buckinghamshire.kml

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
  #map {
    width: 300px;
    height: 300px;
  }
  </style>
</head>
<body>
  <div id="menu" style=" position: absolute; margin: 45px 80px; z-index: 1">
    <select id="Counties">
      <option value="">Select County</option>
      <option value="bedfordshire">Bedfordshire</option>
      <option value="buckinghamshire">Buckinghamshire</option>
      <option value="cambridgeshire">Cambridgeshire</option>
      <option value="hertfordshire">Hertfordshire</option>
      <option value="northamptonshire">Northamptonshire</option>
    </select>
  </div>
  <div id="map"></div>
  <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
  <script>
  function initMap() {
    var mapDiv = document.getElementById('map');
    var map = new google.maps.Map(mapDiv, {
      center: {
        lat: 44.540,
        lng: -78.546
      },
      zoom: 8
    });
  }
  var changeCounty = function(event) {
    var county = event.target.value;
    var kmlUrl = 'http://myserver.com/' + county + '.kml';
    var kmlOptions = {
      suppressInfoWindows: true,
      preserveViewport: false,
      setMap: map
    };
    var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
  }

  var counties = document.getElementById('Counties')
  counties.addEventListener('change', changeCounty, false);
  </script>
</body>
</html>
1 Like

Thank you, Now with regards to this, how can I change it slightly in inbed just one kml file to display all countie border lines as a perminate fixture on the maps for the UK and then to use the drop down menu as a selection for focusing the map on the countie selected?

I’m not a KML guru :smile: You might need to experiment if your answer doesn’t lie in the google documentation:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.