want to use setZoom() in Google map using select

this codes are what i'm trying to get help

---

    <option value="500">500m</option>

    <option value="1000">1km</option>

    <option value="3000">3km</option>

    <option value="5000">5km</option>

</select>



<div id="map"></div>



<script>

    function zoomOption(){
        /* var value= */

        if(value=="500"){
            map.setZoom(16);

        }

        if(value=="1000"){
            map.setZoom(15);

        }

        if(value=="3000"){
            map.setZoom(10);

        }

        if(value=="5000"){
            map.setZoom(7);

        }

        }   

    }

</script>

---

---

---

FROM HERE IT'S TOTAL JSP CODE INCLUDING THE CODES I WANT TO ASK

---

---

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<meta charset="UTF-8">



<%@include file="/importhead.jsp" %>

<div data-role="page" id="store_nearby">

    <%@include file="/header.jsp" %>

    <%@include file="/panel.jsp" %>

    <div id="store_nearby_detail" data-role="content" style="text-align:center;">



    <select id="location_distance">

        <option value="500">500m</option>

        <option value="1000">1km</option>

        <option value="3000">3km</option>

        <option value="5000">5km</option>

    </select>



    <div id="map"></div>



    <script>

        function zoomOption(){
            /* var value= */

            if(value=="500"){
                map.setZoom(16);

            }

            if(value=="1000"){
                map.setZoom(15);

            }

            if(value=="3000"){
                map.setZoom(10);

            }

            if(value=="5000"){
                map.setZoom(7);

            }





            }   

        }

    </script>









    <script>

        /* cordova.plugins.diagnostic.isLocationEnabled(gpsOnOff, gpsError); */

        function initMap(){
            var options = {
                zoom:17,

                center:{lat:37.519747,lng:126.930340},

                disableDefaultUI: true

                /* center: myLatlng,

                mapTypeControl: false,

                draggable: false,

                scaleControl: false,

                scrollwheel: false,

                navigationControl: false, */

                /* streetViewControl: false, */

/*              mapTypeId: google.maps.MapTypeId.ROADMAP */

            }



            function gpsOnOff(available){ 

                if(available){
                    alert('GPS ON');

                    //current location get

                    navigator.geolocation.getCurrentPosition(showLocation, failLocation,{maximumAge : 5000, timeout: 25000, enableHighAccuracy : true});        

                }else{
                    alert('PLEASE TURN ON GPS');

                    cordova.plugins.diagnostic.switchToLocationSettings(); 

                    //navigator.geolocation.getCurrentPosition(showLocation, failLocation,{enableHighAccuracy : true , timeout: 25000});    

                    navigator.geolocation.getCurrentPosition(showLocation, failLocation,{maximumAge : 5000, timeout: 25000, enableHighAccuracy : true});    

                }



            }





            //new map

            var map = new google.maps.Map(

                      document.getElementById('map'), options);

                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function (position) {
                        initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                        map.setCenter(initialLocation); //current position getting codes

                    });

                }







            // The marker, positioned at Uluru

            var marker = new google.maps.Marker({
                position: {lat:37.519747,lng:126.930340},

                map:map,

                icon: {
                    url: 'https://developers.google.com/maps/documentation/javascript/images/circle.png',

                    anchor: new google.maps.Point(10, 10),

                    scaledSize: new google.maps.Size(13, 20)

                }

                /* icon: */

            });

            var infoWindow = new google.maps.InfoWindow({
                content: '<h3>COFFEE SHOP</h3>'

                        /*   '<h4>YEOUIDO DONG YEOUIDAEBANG RO 67GIL 11</h4>' */

            });

            marker.addListener('click', function(){
                infoWindow.open(map, marker);

            });

        }

    </script>

    <script async defer

        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPwhDtefvg2PSzwiBibrJ3FVL4QU79Iyo&callback=initMap">

        </script>

    </div>

    <%@include file="/footer.jsp" %>

</div>