trying to assign function to my dropdown menu with bounds

kwood30 · March 16, 2016

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>

dsonesuk · March 16, 2016

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.

kwood30 · March 16, 2016

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

Sign In

trying to assign function to my dropdown menu with bounds

Recommended Posts

kwood30

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

kwood30

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity