Javascript and google maps api version 3 changing the MapeTypeId via user input

Question

I have been experimenting with google maps API ver 3. I'm having problems dynamically altering google MapTypeid so that a user can change the map type via a select box. I want code that's not bloated and passes the value of a select box to google maps and a change of map style is reflected in the HTML DIV showing that map.

For testing purposes, I constructed 4 if statements that tested for selected index value of HTML select box and then display a map based upon that selection. If i continue like this with other select boxes that change map views on other maps, my code is going to get very long, bloated and spaghetti-like.

// here is what i have done so far/

JAVASCRIPT 

 // display current flight info 
document.getElementById("currentplot").innerHTML='Chase Vehicle at '+'<p>'+ lattitude.toFixed(6)+' : '+ longitude.toFixed(6)+' </p>';
document.getElementById("copilot").innerHTML=' Camera Zoom : '+ userzoom;
document.getElementById("cockpitstatus").innerHTML='Altitude : '+'<p>'+ altitude +' miles'+' </p>';

        // this was debugging printout code using document.write but  now it works 
        // i have kept it and used it in little flight info divs etc 
};

function changemapview(){
 var newmap=document.maptype.mapstyle.options[document.maptype.mapstyle.selectedIndex].value;
 // newmap does contain ROADMAP TERRAIN ETC it's tested and been writtten out to the screen
 // now lets get newmap into google
//BUG TO FIX need to find a way of getting newmap into MapTypeId.TERRAIN ETC
// SO WE CAN REMOVE THE IF STATEMENTS AND REPLACE WITH ONE LINE OF CODE OR MUCH SHORTER CODE


if(userzoom<=0){userzoom=1}
if(userzoom>=20){userzoom=20}

 var latlng = new google.maps.LatLng(lattitude, longitude);// THESE ARE MY GLOBAL LATS AND LONG

if(document.maptype.mapstyle.selectedIndex==0){

    var myOptions = {
      zoom: userzoom,
     center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP,

    };
    }


if(document.maptype.mapstyle.selectedIndex==1){

    var myOptions = {
      zoom: userzoom,
      center: latlng,
     mapTypeId: google.maps.MapTypeId.TERRAIN,

    };
    }


    if(document.maptype.mapstyle.selectedIndex==2){

    var myOptions = {
      zoom: userzoom,
      center: latlng,
     mapTypeId: google.maps.MapTypeId.SATELLITE,

    };
    }

    if(document.maptype.mapstyle.selectedIndex==3){

    var myOptions = {
      zoom: userzoom,
      center: latlng,
   mapTypeId: google.maps.MapTypeId.HYBRID,

    };
    }
    // TRY TO FIND A WAY OF DOING THIS WITHOUT IF STATEMENTS


     var map = new google.maps.Map(document.getElementById("copilotsmap"), 
        myOptions);



        var marker = new google.maps.Marker({
      position: latlng,
      title:"copilot this is your last synchronised flight positon"});

       marker.setMap(map);  
        // end of google sample code 
        // this function changes the copilots map style 

}

<!-- above are functions  to dispaly a google maps from google sample code but we are-->
<!-- using variables and click behaviour NOT Magic numbers to display markers etc on flight path-->
function checkbutton(){
// it will be checked anyway if it has come here
if(document.mapchange.updatemap.checked)
{ document.mapchange.updatemap.checked=false;
changemapview();
}
}

HTML

<!-- in the middle is a flight panel -->
<div id="flightpanel"> <p> Flight Panel </p>   </div>
<!-- a div to put cockpit readouts etc into-->
<div id="cockpitview"> <p> Cockpit View </p>

 </div>
<!-- an empty div for displaying the output of our map data at current zoom and lattitude / longitude -->
<div id="currentzoom" >

</div>

<!-- a div in the middle for engine controls-->
<div id="enginepanel">  <p> Engine Panel </p></div>

<!-- another empty div for the co pilots map-->
<div id="copilotsmap"> </div>

<!-- dashboard is on coplilots side --> 
<div id="dashboard">  

  <form id="maptype" name="maptype">
        <label>Change Map Style
            <select name="mapstyle" id="mapstyle"  onchange="changemapview();">
                    <option>ROADMAP</option>
                    <option>TERRAIN</option>
                    <option>SATELLITE</option>
                    <option>HYBRID</option>
            </select>
            </label> Co-Pilots Dashboard
 </form>
<!-- below here are more select boxes etc that all work unrelated to the question 
</div>

how do i get ride of all the if statements i want to do something like this if possible

    var myOptions = {
      zoom: userzoom,
     center: latlng,
  // mapTypeId: google.maps.MapTypeId.ROADMAP,

    };

instead of saying

 mapTypeId: google.maps.MapTypeId.ROADMAP,

i want to say

mapTypeId: google.maps.MapTypeId.(whatever is in a variable or function)

i have tried this kind of approach with no luck

myOptions.mapTypeId:='google.maps.MapTypeId'+newmap,' 

// and various similar combinations 

Answer 1

var myMapTypes = new Array('ROADMAP','TERRAIN','SATELLITE','HYBRID');
var newMap = myMapTypes[parseInt(document.maptype.mapstyle.selectedIndex)];
var myOptions = {
    zoom: userzoom,
    center: latlng,
    mapTypeId: google.maps.MapTypeId[newMap]
};

Range checking on the array index and so forth left out for brevity/clarity/laziness/etc. Probably a good idea to at least make sure parseInt() returns a value greater than or equal to zero and less than myMapTypes.length.