Масштабирование и центрирование геокодированного места с помощью Google Maps api

Question

Я работаю с Google Maps api для одного из моих приложений. У меня есть текстовое поле, в которое пользователь вводит имя места. Он должен геокодировать имя места пользователя, указанное в текстовом поле, и масштабировать и центрировать это имя геокодированного места. Я добился успеха в геокодировании, но масштабирование и центр не так ожидаются. Отображается код и выходной снимок. Черный прямоугольник на изображении - это имя места, которое было геокодировано на основе ввода пользователя в текстовое поле. Но масштабирование и центрирование находятся где-то в углу карты. Я хочу, чтобы имя геокодированного места было расположено в центре карты.

var mapProp = { 
    center: x, 
    zoom: 4, 
    disableDefaultUI: true, 
    mapTypeId: layer, 
    mapTypeControlOptions: { 
    mapTypeIds: [layer] 
    } 
}; 
var map = new google.maps.Map(document.getElementById("googlemaps"), mapProp); 
var geocoder = new google.maps.Geocoder(); 
var bounds = new google.maps.LatLngBounds(); 
map.mapTypes.set(layer, new google.maps.StamenMapType(layer)); 

geocoder.geocode({ 
    'address': place_name_filter 
}, function(results, status) { 
    if (status === google.maps.GeocoderStatus.OK) { 
    map.fitBounds(results[0].geometry.viewport); 
    } else { 
    alert(place_name_filter + " not found"); 
    console.log("status : ", status); 
    } 
}); 

Place_name_filter - это переменная, которая содержит имя места, введенное в текстовое поле. Output_Snapshot_for_the_above_code

Expected_Output

Answer 1

Для увеличения в результате из геокодер использовать map.fitBounds и .geometry.viewport (или geometry.bounds) LatLngBounds в ответе.

фрагмент кода:

function initialize() { 
 
    var mapProp = { 
 
    center: { 
 
     lat: 25, 
 
     lng: -90 
 
    }, 
 
    zoom: 4, 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById("googlemaps"), mapProp); 
 
    var geocoder = new google.maps.Geocoder(); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var place_name_filter = "Abilene, TX"; 
 
    geocoder.geocode({ 
 
    'address': place_name_filter 
 
    }, function(results, status) { 
 
    if (status === google.maps.GeocoderStatus.OK) { 
 
     map.fitBounds(results[0].geometry.viewport); 
 
    } else { 
 
     alert(place_name_filter + " not found"); 
 
     console.log("status : ", status); 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#googlemaps { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

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