화면의 마커에 맞게지도 및 확대/축소

Question

다음 코드는 방문자의 GPS 위치를 감지하고 Google Maps JavaScript v3지도에 표시합니다. 원하는대로 모든 것이 작동하지만 원하는대로 코드를 중앙에 배치하거나 확대하지 않을 수 있습니다 - 아시아의 표준 위치를 사용하면 간단합니다! 마커를지도에 맞추기를 원합니다.

var rendererOptions = { 
    draggable: false 
}; 

if(navigator.geolocation) { 
    var timeoutVal = 10 * 1000 * 1000; 

    navigator.geolocation.watchPosition(
     displayPosition, 
     displayError, 
     { enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 } 
    ); 
} else { 
    alert('Din webbläsare stödjer inte någon geologisk lokalisering med hjälp av HTML5'); 
} 

var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
var directionsService = new google.maps.DirectionsService(); 
var marker_gps; 
var map_gps; 
var options_gps; 





function displayPosition(position) { 


    /*********************** 
    ** GPS-POSITION ** 
    ************************/ 

    directionsDisplay = new google.maps.DirectionsRenderer(); 
    localStorage.coor = position.coords.latitude.toFixed(6) + ',' + position.coords.longitude.toFixed(6); 

    var gps_coor = new google.maps.LatLng(position.coords.latitude.toFixed(6), position.coords.longitude.toFixed(6)); 

    if(typeof(marker) != 'undefined') marker.setMap(null); 

    localStorage.accuracy = position.coords.accuracy; 
    document.getElementById('accuracy').innerHTML = number_format(localStorage.accuracy) + ' meter'; 

    directionsDisplay.setMap(map_gps); 
    directionsDisplay.setPanel(document.getElementById('directions-panel')); 

    marker_gps = new google.maps.Marker({ 
     position: gps_coor, 
     draggable: false, 
     map: map_gps 
    }); 

    var circle_gps = new google.maps.Circle({ 
     center: gps_coor, 
     radius: position.coords.accuracy, 
     map: map_gps, 
     fillColor: '#3333ff', 
     fillOpacity: 0.2, 
     strokeColor: '#3333ff', 
     strokeOpacity: 0.5, 
     strokeWeight: 1 
    }); 



    /***************************** 
    ** FÄRDSÄTT (DISTANS) ** 
    ******************************/ 

    var start = new google.maps.LatLng(position.coords.latitude.toFixed(6), position.coords.longitude.toFixed(6)); 
    var stop = new google.maps.LatLng(<?php echo $photo['coordinates_latitude'].','.$photo['coordinates_longitude']; ?>); 

    var request = { 
     origin: start, 
     destination: stop, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 

    directionsService.route(request, function(response, status) { 
     if(status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     } 
    }); 

    directionsService.route(request, function(response, status) { 
     if(status == google.maps.DirectionsStatus.OK) { 
      var distance = (response.routes[0].legs[0].distance.value/1000).toFixed(0); 
      var duration = secondsToString(response.routes[0].legs[0].duration.value); 

      document.getElementById('distance').innerHTML = 'Cirka ' + distance + ' kilometer'; 
      document.getElementById('duration').innerHTML = 'Cirka ' + duration; 

      directionsDisplay.setDirections(response); 
     } 
    }); 


} 



function initialize_gps() { 
    var coor = new google.maps.LatLng(localStorage.coor); 
    var bounds = new google.maps.LatLngBounds(); 

    options_gps = { 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: google.maps.LatLng(localStorage.coor), 
     streetViewControl: false 
    } 

    map_gps = new google.maps.Map(document.getElementById('map-distance'), options_gps); 
    map_gps.fitBounds(bounds); 
} 







function secondsToString(seconds) { 
    var numdays = Math.floor(seconds/86400); 
    var numhours = Math.floor((seconds % 86400)/3600); 
    var numminutes = Math.floor(((seconds % 86400) % 3600)/60); 

    return (numdays != 0 ? (numdays == 1 ? '1 dag' : numdays + ' dagar') + ', ' : '') 
     + (numhours != 0 ? (numhours == 1 ? '1 timme' : numhours + ' timmar') + (numdays != 0 ? ', ' : ' och ') : '') 
     + (numminutes != 0 ? (numminutes == 1 ? '1 minut' : numminutes + ' minuter') : ''); 
} 

function displayError(error) { 
    var errors = { 
     1: 'Permission denied', 
     2: 'Position unavailable', 
     3: 'Request timeout' 
    }; 

    alert('Error: ' + errors[error.code]); 
} 

어떻게 작동하나요?

미리 감사드립니다.

EDIT

여기에 initialize_gps 편집 기능의 일부. 이 부분은 효과가 없었습니다. 새로운 일은 없었습니다. 예전처럼 아시아를 중심으로지도를 그립니다.

function initialize_gps() { 
    var coor = new google.maps.LatLng(localStorage.coor); 
    var bounds = new google.maps.LatLngBounds(); 

    options_gps = { 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: google.maps.LatLng(localStorage.coor), 
     streetViewControl: false 
    } 

    map_gps = new google.maps.Map(document.getElementById('map-distance'), options_gps); 
    map_gps.fitBounds(bounds); 
} 

편집 나는 jsFiddle에 복사 붙여 넣기 전체 코드가 있습니다. 링크 : http://jsfiddle.net/edgren/WRxt4/

Answer 1

마커 세트에지도 표시 피팅에 대한 일반적인 솔루션은, 그 경계를 가지는 map.fitBounds를 호출 (bounds.extend 호출하여) 빈 google.maps.LatLngBounds object에 추가하는 것입니다.