Trying to assign function to my dropdown menu with bounds

JavaScript
, ,
1

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.

[code]
<!doctype html>

[/code]
2

Never repeat yourself like this, it’s a sign that you’re not doing things correctly.

I’m not sure why you changed back to click events on the dropdown, my answer in your previous thread was closer to what you want. This example shows how you can save lat lng for each county in an object and pull them out when you change the select.

var changeCounty = function(event) {
  var county = event.target.value;
  extendBounds(county);

  e.preventDefault();
}

var countySelect = document.getElementById('Counties')
countySelect.addEventListener('change', changeCounty, false);

var countyBounds = {
 bedfordshire: {
   lat: 52.33,
   lng: -0.05
 }
}

var extendBounds = function(key) {
  var county = countyBounds[key];
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(new google.maps.LatLng(county.lat, county.lng));
  map.fitBounds(bounds);
}

I’m not sure why you had 2 lat lng’s for each but if that is required then you can save 4 points for each county,

bedfordshire: {
   lat1: 52.33,
   lng1: -0.05,
   lat2: 52.33,
   lng2: -0.05
 }

Or in an array

bedfordshire: [{
  lat: 52.33,
  lng: -0.05
}, {
  lat: 52.33,
  lng: -0.05
}]
3

thank you for your help. I researched after your last post and came up with what I posted here. I’m learning as I go along lol
The two sets of latlng is to point out the whole county for the map. Thanks again

4

This is what I have done and its not working?

`var changeCounty = function(event) {
  var county = event.target.value;
  extendBounds(county);

  e.preventDefault();
}

var countySelect = document.getElementById('counties')
countySelect.addEventListener('change', changeCounty, false);

bedfordshire: {
   lat1: 52.33,
   lng1: -0.05,
   lat2: 51.8,
   lng2: -0.8
 }
 buckinghamshire: {
   lat1: 52.21,
   lng1: -0.33,
   lat2: 51.47,
   lng2: -1.33
 }
 cambridgeshire: {
   lat1: 52.75,
   lng1: -0.55,
   lat2: 51.99,
   lng2: -0.53
 }
 hertfordshire: {
   lat1: 52.09,
   lng1: -0.35,
   lat2: 51.59,
   lng2: -0.80
 }
 northamptonshire: {
   lat1: 52.67,
   lng1: -0.33,
   lat2: 51.94,
   lng2: -1.55
 } 
}

var extendBounds = function(key) {
  var county = countyBounds[key];
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(new google.maps.LatLng(county.lat, county.lng));
  map.fitBounds(bounds);
}
<div id="menu" style=" position: absolute; margin: 45px 89px;" > 

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

In the console you’ll see errors in your code. You need an object around your counties { ... } and to comma separate all the objects in there.

var countyBounds = {
   bedfordshire: {
    lat1: 52.33,
    lng1: -0.05,
    lat2: 51.8,
    lng2: -0.8
  },
  buckinghamshire: {
    lat1: 52.21,
    lng1: -0.33,
    lat2: 51.47,
    lng2: -1.33
  },
  cambridgeshire: {
    lat1: 52.75,
    lng1: -0.55,
    lat2: 51.99,
    lng2: -0.53
  },
  hertfordshire: {
    lat1: 52.09,
    lng1: -0.35,
    lat2: 51.59,
    lng2: -0.80
  },
  northamptonshire: {
    lat1: 52.67,
    lng1: -0.33,
    lat2: 51.94,
    lng2: -1.55
  }
}

And you’ll need to change your function to use the new properties.

var extendBounds = function(key) {
  var county = countyBounds[key];
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(new google.maps.LatLng(county.lat1, county.lng1));
  bounds.extend(new google.maps.LatLng(county.lat2, county.lng2));
  map.fitBounds(bounds);
}
1 Like
6

thank you

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.