편집 기록

프로필 엽토군님의 편집

날짜2018.12.28

현재 google map의 크기를 select의 <option> value와 setZoom을 이용해서 크기 조정을 하려고 하고 있어요 도와주세요~

googlemap

setzoom

zoom

option

value

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

이부분을 잘 봐주세요~~~

참고: 전체 코드

<%@ 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켜짐');
                    //현재 내 위치 좌표 받을 때 처리 함수
                    navigator.geolocation.getCurrentPosition(showLocation, failLocation,{maximumAge : 5000, timeout: 25000, enableHighAccuracy : true});        
                }else{
                    alert('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>여의도 커피집</h3>'
                        /*   '<h4>여의도동 여의대방로 67길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>

프로필 알 수 없는 사용자님의 편집

날짜2018.12.27

현재 google map의 크기를 select의 <option> value와 setZoom을 이용해서 크기 조정을 하려고 하고 있어요 도와주세요~

googlemap

setzoom

zoom

option

value

500m 1km 3km 5km

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

이부분을 잘 봐주세요~~~

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

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

<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켜짐');
                //현재 내 위치 좌표 받을 때 처리 함수
                navigator.geolocation.getCurrentPosition(showLocation, failLocation,{maximumAge : 5000, timeout: 25000, enableHighAccuracy : true});        
            }else{
                alert('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>여의도 커피집</h3>'
                    /*   '<h4>여의도동 여의대방로 67길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" %>