Jump to content
kwood30

trying to assign function to my dropdown menu with bounds

Recommended Posts

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>
				

 

Share this post


Link to post
Share on other sites

1) document.getElementById() is case sensitive, so document.getElementById('counties') and document.getElementById('Counties') will be treated as targeting different id references,

2) select dropdown uses onchange event not click, on selection you look at the value of select NOT the options.

3) I don't understand this?

 

$('buckinghamshire').click(function(){
alert(this.value);
});

 

You are supposed to use selector for element, class, id, this looks like you are targeting options attribute values, which be related to option (2) above error.

 

 

IS this supposed to place bound box around selected county on selection?, or all at once?

 

if on selection

Instead of duplicating the same code for

 

//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);

 

etc

 

Why not store lat and long values in array, and use numeric value for options, then you can use this numeric value as index for correct coordinates, only once when required.

Share this post


Link to post
Share on other sites

I am really new to this, so am teaching myself. Through my research this is what I have come up with and why I am asking for help. I just want the dropdown menu to be apply to select one of the counties in it and this will the use the coordinates to focus the map on that county

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