GPS와 마커 사이의지도 경계 설정

Question

지도 경계를 설정하는 방법을 모르겠습니다. 나는 몇 가지 다른 관련 질문을 보았지만 제대로 작동하도록 할 수는 없었습니다. http://jsfiddle.net/ZFyDY/

각 마커, 내가 지금 같은 맵에 대한 경계 조정 후 :

var bounds = new google.maps.LatLngBounds(); 
bounds.extend(gps_coords); 

내가 잘못하고있는 중이 야 무엇을

이 내가 노력하고있어인가?

Answer 1

매번 (각 마커에 대해) 새 빈 경계 개체를 만들지 말고 시작 지점에 하나 만들고 모든 지점을 추가 한 다음지도를 확대하고 가운데에 배치하십시오.

코드 :

function map_init() { 
 
    var mapOptions = { 
 
    zoom: 8, 
 
    center: new google.maps.LatLng(-34.397, 150.644), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 

 
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    // Add GPS location 
 
    /* 
 
    var sensor_image = new google.maps.MarkerImage("#{asset_path " 
 
    sensor.png "}", 
 
    new google.maps.Size(38, 38), 
 
    new google.maps.Point(0, 0), 
 
    new google.maps.Point(19, 19)); 
 
    */ 
 

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

 
     new google.maps.Marker({ 
 
     position: gps_coords, 
 
     map: map, 
 
     // icon: sensor_image 
 
     }); 
 

 
     var bounds = new google.maps.LatLngBounds(); 
 
     bounds.extend(gps_coords); 
 

 
    }, function() { 
 
     // Handle no geolocation support 
 
    }) 
 
    } 
 

 
    //Add Store location 
 
    geocoder = new google.maps.Geocoder(); 
 

 
    geocoder.geocode({ 
 
    'address': "New York, NY" 
 
    }, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 
     var store_coords = results[0].geometry.location; 
 

 
     new google.maps.Marker({ 
 
     position: store_coords, 
 
     animation: google.maps.Animation.DROP, 
 
     map: map 
 
     }); 
 

 
     bounds.extend(store_coords); 
 
     map.fitBounds(bounds); 
 

 
    } 
 
    }); 
 
    geocoder.geocode({ 
 
    'address': "Boston, MA" 
 
    }, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 
     var store_coords = results[0].geometry.location; 
 

 
     new google.maps.Marker({ 
 
     position: store_coords, 
 
     animation: google.maps.Animation.DROP, 
 
     map: map 
 
     }); 
 

 
     bounds.extend(store_coords); 
 
     map.fitBounds(bounds); 
 

 
    } 
 
    }); 
 
    //Configure map 
 
    //bounds.extend(gps_coords); 
 

 
    //bounds.extend(store_coords); 
 

 
    map.fitBounds(bounds); 
 
} 
 
google.maps.event.addDomListener(window,'load', map_init)

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>