google map api 를 사용할때 center 값을 현재의 geolocation값으로 설정되게 하려고 합니다

Question

google map api 를 사용할때 center 값을 현재의 geolocation값으로 설정되게 하려고 합니다

조회수 1982회

googlemap

googlemapapi

gps

geolocation

center

0

싫어요

JSP 코드

<%@ 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 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 */ }

        //new map
        var map = new google.maps.Map(
                  document.getElementById('map'), options);

        // 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" %>

여기서 이제 gps(geolocation())를 이용하여 center 값을 불러오려고 합니다. javascript를 이용하여 구현을 할 수 있을까요? 도와주세요~~~

그리고 gps에서 옵션 선택시 자동 거리 줌 인 아웃을 할 방법을 알려주세요~~~

(•́ ✖ •̀)
알 수 없는 사용자

댓글 입력

score 0 · Accepted Answer

1. 모르는 게 있으면... 일단 구글에 영어로 물어보기.
google maps javascript center current position 이라고 물어보니 이런 게 나오네요. 올려주신 소스에서 var map = 어쩌구 라인 바로 뒤에 이거 붙이면 될것 같네요.

if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(function (position) {
         initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
         map.setCenter(initialLocation); // 이게 핵심...
     });
 }

2. 구글이 딱히 답을 안해주는 것 같으면... 공식 문서 찾아보기.
Google Maps JS API 문서를 찾아보니 zoom을 동적으로 조정하는 건 setZoom() 메소드 쓰라고 하네요.