Googleマップに正常にロードされるkmlファイルがあります。同じページに、ユーザーがマーカーを追加する場所を入力できるテキスト ボックスがありますが、これも機能します。
私が問題を抱えているのは、ユーザーが kml ファイルの境界外の場所を入力した場合、マップは kml と新しいマーカーの両方を含むようにズームされないことです。
preserveViewport=false の場合、kml に合わせてズームします。true の場合、新しいマーカーに合わせてズームします。
$(document).ready(function () {
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var ctaLayer = new google.maps.KmlLayer('KMLLOCATION', { preserveViewport: false });
ctaLayer.setMap(map);
var marker = new google.maps.Marker({ position: new google.maps.LatLng(LAT, LONG), map: map, title: 'You are here', clickable: false, icon: '/media/youarehere.png' });
var bounds = new google.maps.LatLngBounds();
var ll = new google.maps.LatLng(LAT, LONG);
bounds.extend(ll);
map.fitBounds(bounds);
});
編集
正しい方向に向けてくれた geocodezip に感謝します。これは動作する私の更新されたコードです。
$(document).ready(function () {
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var layer = new google.maps.KmlLayer('KMLLOCATION', { map: map, preserveViewport: true });
var marker = new google.maps.Marker({ position: new google.maps.LatLng(LAT, LONG), map: map, title: 'You are here', clickable: false, icon: '/media/youarehere.png' });
google.maps.event.addListener(layer, 'defaultviewport_changed', function() {
var bounds = layer.getDefaultViewport();
var ll = new google.maps.LatLng(LAT, LONG);
bounds.extend(ll);
map.fitBounds(bounds);
});
});