Having trouble in assigning multiple kml files and getting them to work with a dropdown menu

[kwood30]

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="" + key + "">" + 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.

<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.

[justsomeguy]

Check your browser's developer console for error messages, that Javascript has select tags all over the place that are going to cause errors.

[kwood30]

i dont get errors up. what do i need to do or change?

[dsonesuk]

look at selects tags surrounding js????

 

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>";

 

Use single quotes to hold string text (html etc), then it won't conflict with double quotes used for attribute values.

[justsomeguy]

If you don't see error messages for those errant select tags then you're probably not looking in the right place. When you have your site open in a web browser you can open the browser's developer tools, all modern browsers have them (try pressing F12, otherwise check my signature for links). The developer tools have a console which will list the error messages.

[kwood30]

Does this look better?

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

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

What I am generally trying to do is inbed a kml file to display all UK county border lines and then use the drop down menu to foucs on the county selected on the google map. Can you help me with this?

[justsomeguy]

Yes, that code looks better. Are you getting any Javascript error messages now? What part are you missing? You're already loading a KML file, right, is that working? Can you put all information into one KML file, or just load each file individually and add each layer to the map?

[dsonesuk]

We really cant comment any further, your code creates dropdown of specific counties, there is no indication how this creation of dropdown is triggered, or what is supposed to happen when selection is made.

[kwood30]

I have revised the issue with KML and have put up a new post regarding what I have changed, if anyone could help with that please

[Chikwado]

W3schools have created a website with google map search for it may be it will work for you.

[kwood30]

I have created my own KML file but having trouble getting it to load with my coding. I am just wanting it as an overlay to show all the border lines for the counties