Jump to content

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


kwood30
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...