trying to assign function to my dropdown menu with bounds

  • (2 Pages)
  • +
  • 1
  • 2

16 Replies - 655 Views - Last Post: 20 March 2016 - 12:20 PM

#1 kwood30  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 19-February 16

trying to assign function to my dropdown menu with bounds

Posted 16 March 2016 - 05:45 AM

Im am trying to assign the function of my dropdown menu so when you click on the selected county it will focue on that countie. I have written out what I can below, through research as I am new to all this, but am not sure how to link it all together. I know I haven't got the googlemaps attached but I do in my full page, it is just this section i am having trouble in trying to link together.

<!doctype html>
  <html>
  <head>

<script type="text/javascript">

document.getElementById('counties').addEventListener('click', function(e)  {alert(this.value); e.preventDefault();}, false);
$('bedfordshire').click(function(){
alert(this.value);
});
$('buckinghamshire').click(function(){
alert(this.value);
});
$('cambridgeshire').click(function(){
alert(this.value);
});
$('hertfordshire').click(function(){
 alert(this.value);
});
$('northamptonshire').click(function(){
alert(this.value);
});

//bedfordshire
bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(52.33, -0.05));
    bounds.extend(new google.maps.LatLng(51.8, -0.8));
map.fitBounds(bounds);

//buckinghamshire
bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(52.21, -0.33));
bounds.extend(new google.maps.LatLng(51.47, -1.33));
map.fitBounds(bounds);

//cambridgeshire
bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(52.75, -0.55));
bounds.extend(new google.maps.LatLng(51.99, -0.53));
map.fitBounds(bounds);

//hertfordshire
bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(52.09, -0.35));
bounds.extend(new google.maps.LatLng(51.59, -0.80));
map.fitBounds(bounds);

//northamptonshire
bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(52.67, -0.33));
bounds.extend(new google.maps.LatLng(51.94, -1.35));
map.fitBounds(bounds);


</script>

</head>
<body>
<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>

 </body>
</html>




Is This A Good Question/Topic? 0
  • +

Replies To: trying to assign function to my dropdown menu with bounds

#2 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: trying to assign function to my dropdown menu with bounds

Posted 16 March 2016 - 06:28 AM

Are there errors in your browser's console? There will be.

Your element is named 'Counties' not 'counties'.

But your Javascript appears before this element is available on the page. Move the script to the bottom of the page, before the closing body tag.

You should also use the change event, rather than click, of the select element.

//bedfordshire
bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(52.33, -0.05));
    bounds.extend(new google.maps.LatLng(51.8, -0.8));
map.fitBounds(bounds);

Rather than repeating all this code you should store the relevant details in a data structure - the county and lat-lng details; then you can retrieve, and set, the details you need based on the county, probably in a function.
Was This Post Helpful? 0
  • +
  • -

#3 kwood30  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 19-February 16

Re: trying to assign function to my dropdown menu with bounds

Posted 16 March 2016 - 07:02 AM

thank you,

But how do you do what you said?

I am new to all this and am trying to teach myself. Thank you again
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: trying to assign function to my dropdown menu with bounds

Posted 16 March 2016 - 07:19 AM

Do you know how to create functions? Do you know how to work with Javascript arrays and objects (and arrays of objects)? These are essential topics that you need to study and understand.

How are you teaching yourself? Do you have a book or good tutorial?
Was This Post Helpful? 0
  • +
  • -

#5 kwood30  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 19-February 16

Re: trying to assign function to my dropdown menu with bounds

Posted 16 March 2016 - 07:38 AM

I am just learning as I go, I look up how to do each thing, but I end up with about 7 different ways it can be done, so I have ago and then ask for help like I have here to fill in any holes i my of missed.
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: trying to assign function to my dropdown menu with bounds

Posted 16 March 2016 - 08:03 AM

Functions, arrays, objects, arrays of objects, are significant and essential topics from the fundamentals of Javascript and, apparently, holes in your knowledge because of your approach.

I recommend that you halt your current project and study these subjects. We cannot, and should not, attempt to teach these subjects in one or two forum posts.
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: trying to assign function to my dropdown menu with bounds

Posted 16 March 2016 - 08:10 AM

MDN is a significant resource, functions, although this page is perhaps more for reference than, strictly, a tutorial.
Was This Post Helpful? 0
  • +
  • -

#8 kwood30  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 19-February 16

Re: trying to assign function to my dropdown menu with bounds

Posted 16 March 2016 - 08:20 AM

I just find it hard to read about them and do it myself and not get any help. I have done what I have read as you can see, but just could do with the remedy to my issue so I can then learn that way, that how I learn
Was This Post Helpful? 0
  • +
  • -

#9 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: trying to assign function to my dropdown menu with bounds

Posted 16 March 2016 - 08:23 AM

A request for someone to write code for you is against the forum rules and will lead to your question being closed.
Was This Post Helpful? 0
  • +
  • -

#10 kwood30  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 19-February 16

Re: trying to assign function to my dropdown menu with bounds

Posted 16 March 2016 - 10:50 AM

not asking for it to all be done, just a visual aid of an example. Even if its some code that does what I want but for a different thing so I can use it to work it out and write it myself. Just want that helping guidence
Was This Post Helpful? 0
  • +
  • -

#11 felgall  Icon User is offline

  • D.I.C Regular

Reputation: 68
  • View blog
  • Posts: 365
  • Joined: 22-February 14

Re: trying to assign function to my dropdown menu with bounds

Posted 18 March 2016 - 03:43 PM

Start by moving ALL of the Javascript into an external file attached just before the </body> tag (that includes any Javascript jumbled inside of HTML tags - if you don't know how to rewrite those properly to event listeners then post the antiquated jumbled mess you want to convert and someone can then tell you what the proper code should look like for that example so you can then apply the same to any other similar messy code).

Once you have everything in its own file then you can ask for help with the specific things tat don't work.

You might consider posting your code at jsbin.com and linking to it so that people can see for themselves what isn't working.
Was This Post Helpful? 0
  • +
  • -

#12 xclite  Icon User is offline

  • I wrote you an code
  • member icon


Reputation: 1237
  • View blog
  • Posts: 4,029
  • Joined: 12-May 09

Re: trying to assign function to my dropdown menu with bounds

Posted 18 March 2016 - 03:57 PM

You've received good advice. If the next post is still asking for somebody to write code for you, I *will* lock this topic (andrewsw has been very patient).
Was This Post Helpful? 0
  • +
  • -

#13 kwood30  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 19-February 16

Re: trying to assign function to my dropdown menu with bounds

Posted 19 March 2016 - 09:57 AM

I have managed to work it out and do it and it works fine now. Why you think I am asking for people to write code, I do not know! I am asking advice on whats the best way round my issue.

View Postfelgall, on 18 March 2016 - 03:43 PM, said:

Start by moving ALL of the Javascript into an external file attached just before the </body> tag (that includes any Javascript jumbled inside of HTML tags - if you don't know how to rewrite those properly to event listeners then post the antiquated jumbled mess you want to convert and someone can then tell you what the proper code should look like for that example so you can then apply the same to any other similar messy code).

Once you have everything in its own file then you can ask for help with the specific things tat don't work.

You might consider posting your code at jsbin.com and linking to it so that people can see for themselves what isn't working.


Thank you, I will take your advice for when I start a new project. With this one I am trying to do in stages as its really complex. Perhaps I have taken on too much for my knowledge base, but I feel that with the right guidence I can learn better. Everyone had to start somewhere!
Was This Post Helpful? 0
  • +
  • -

#14 felgall  Icon User is offline

  • D.I.C Regular

Reputation: 68
  • View blog
  • Posts: 365
  • Joined: 22-February 14

Re: trying to assign function to my dropdown menu with bounds

Posted 19 March 2016 - 01:51 PM

View Postkwood30, on 20 March 2016 - 02:57 AM, said:

Thank you, I will take your advice for when I start a new project.


Why not for the current project - if you want your Javascript to work properly in modern web browsers you will need to change it the way I suggested anyway. Particularly for big projects, not doing it that way will involve writing 10x as much code that will be 1000x harder to maintain afterwards.
Was This Post Helpful? 0
  • +
  • -

#15 kwood30  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 19-February 16

Re: trying to assign function to my dropdown menu with bounds

Posted 19 March 2016 - 03:51 PM

Putting like that, then I will do. So do I attach the file at the end of the <body> then not in the <head>?
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2