title: Update google map from select dropdown menu
body: <p>I need to be able to update a google map from a html select dropdown menu.  Bit of a n00b so any info would be much appreciated.  I have the following JS / Google map api v3 code to work with.</p>
  
  <p>Using the select dropdown menu i will need to be able to update the map using the varibales, i.e select <code>bromley_route638.setMap(map);</code> from a dropdown menu.  Thanks!</p>
  
  <pre><code>        &lt;script&gt;
      // Mapping variables
              var global_strokeColor = "#FF0000";
              var global_strokeOpacity = 1.0;
              var global_strokeWeight = 2;
  
              //BROMLEY BOROUGH
              var bromley_centrepoint = new google.maps.LatLng(51.408664,0.114405);
  
              var school_bromley_beaverwood = new google.maps.LatLng(51.41859298,0.089179345);
              var school_bromley_bishpjustus = new google.maps.LatLng(51.382522,0.045018);
  
              // Route 638
              var bromley_route638 = new google.maps.Polyline({
                path: [new google.maps.LatLng(51.408664,0.114405),new google.maps.LatLng(51.412973,0.114973),new google.maps.LatLng(51.417979,0.097195),new google.maps.LatLng(51.421214,0.023720)],
                strokeColor: global_strokeColor,
                strokeOpacity: global_strokeOpacity,
                strokeWeight: global_strokeWeight
              });
  
            function initialize() {
              var myLatLng = bromley_centrepoint;
              var myOptions = {
                zoom: 13,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.TERRAIN
              };
  
  
             var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
             bromley_route638.setMap(map);
  
            }
          &lt;/script&gt;
          &lt;/head&gt;
          &lt;body onload="initialize()"&gt;
            &lt;div id="map_canvas"&gt;&lt;/div&gt;
  &lt;div id="asd"&gt;
    &lt;form style="float:left; "&gt;
        &lt;select name="mapchange"&gt;
          &lt;option onclick=""&gt;school 1&lt;/option&gt;
          &lt;option onclick=""&gt;school 2&lt;/option&gt;
      &lt;/select&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  
          &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt;
  &lt;title&gt;Bus Routes&lt;/title&gt;
  &lt;link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
      function updateMap(selectControl)   {
          switch(selectControl.value)
          {
      case school1:
        var polyline = new google.maps.Polyline({
    path: [
    new google.maps.LatLng(51.408664,0.114405),
    new google.maps.LatLng(51.412973,0.114973),
    new google.maps.LatLng(51.417979,0.097195),
    new google.maps.LatLng(51.421214,0.023720)],
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  
        var latLng = new google.maps.LatLng(51.41859298,0.089179345)
        break;
      case school2:
        var polyline = new google.maps.Polyline({
    path: [
    new google.maps.LatLng(51.408664,0.114405),
    new google.maps.LatLng(51.412973,0.114973),
    new google.maps.LatLng(51.417979,0.097195),
    new google.maps.LatLng(51.421214,0.023720)],
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  
    });
  
        var latLng = new google.maps.LatLng(51.382522,0.045018)
        break;
      default:
        break;
      }
      initialize(polyline, latLng);
      }
  
      function initialize(polyline, schoolLatLng) {
          var myLatLng = schoolLatLng;
          var myOptions = {
            zoom: 13,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.TERRAIN
          };
  
  
         var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
         polyline.setMap(map);
  
        }
  
      //end
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body onload="initialize()"&gt;
  
  &lt;div id="map" style="width:600px; height:600px; display:block;"&gt;
      &lt;div id="map_canvas" style="width:600px; height:600px;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;form style="float:left; "&gt;
      &lt;select name="mapchange"&gt;
          &lt;option onchange="updateMap" value="school1"&gt;school 1&lt;/option&gt;
          &lt;option onchange="updateMap" value="school2"&gt;school 2&lt;/option&gt;
      &lt;/select&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;
  
  
  
     &lt;/
  
  html&gt;
  </code></pre>