Jump to content
kwood30

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

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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?

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...