0
Я искал, исследовал и искал еще несколько.API Карт Google zoom on resize
Я отчаянно пытаюсь сделать это, поэтому моя карта автоматически меняет свой масштаб с разными размерами браузера, поскольку он сохраняет маркеры на карте. Сейчас самое лучшее, что работает для меня, это:
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
И даже это недостатки. Когда карта становится меньше, скажем, на мобильном устройстве, маркеры в конечном итоге оставляют видимость, поскольку масштаб не изменяется. Мне нужно изменить масштаб. По-видимому, это решение (я сделал много исследований, в основном из Stack Overflow):
map.fitBounds(firstB,secondB);
firstB и secondB являются широта и долгота, что мои маркеры используют для своей позиции.
Я даже пробовал:
bounds = new google.maps.LatLngBounds();
bounds.extend(marker);
bounds.extend(smarker);
map.fitBounds(bounds);
В настоящее время это то, что у меня есть:
<script>
var geocoder;
var map;
function initialize() {
firstB = new google.maps.LatLng(38.9395799,-104.7168500999999);
secondB = new google.maps.LatLng(38.9382571,-104.71727069999997);
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(38.938987, -104.717286);
var mapOptions = {
zoom:18,
center:latlng,
disableDefaultUI:true
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.fitBounds(firstB,secondB);
var styles=[
{
featureType:"road",
elementType:"labels",
stylers:[
{visibility:"off"}
]
}
];
map.setOptions({styles: styles});
var pinIcon = new google.maps.MarkerImage(
'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
null, /* size is determined at runtime */
null, /* origin is 0,0 */
null, /* anchor is bottom center of the scaled image */
new google.maps.Size(52, 52)
);
var marker = new google.maps.Marker({
position: firstB,
map: map,
title: 'AVS',
icon:pinIcon,
});
var firstB_contentString = '<div><p>Medical Office Building</p><a href="MOB/architectural-layout.html"><p class="infoContent">6007 E Woodmen Rd.</p><p class="infoContent">Colorado Springs, CO 80923</p></p></a></div>';
var firstB_infowindow = new google.maps.InfoWindow({
content: firstB_contentString
});
google.maps.event.addListener(marker, 'click', function() {
firstB_infowindow.open(map,marker);
});
var smarker = new google.maps.Marker({
position: secondB,
map: map,
title: 'AVS',
icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
var secondB_contentString = '<div><p>General Hospital</p><a href="MAIN/architectural-layout.html"><p class="infoContent">6001 E. Woodmen Rd.</p><p class="infoContent">Colorado Springs, CO 80923</p></a></div>';
var secondB_infowindow = new google.maps.InfoWindow({
content: secondB_contentString
});
google.maps.event.addListener(smarker, 'click', function() {
secondB_infowindow.open(map,smarker);
});
google.maps.event.addListener(map, 'mousedown', function() {
firstB_infowindow.close(map,marker);
secondB_infowindow.close(map,smarker);
});
google.maps.event.addListener(marker, 'mousedown', function() {
firstB_infowindow.close();
secondB_infowindow.close();
});
google.maps.event.addListener(smarker, 'mousedown', function() {
firstB_infowindow.close();
secondB_infowindow.close();
});
/*bounds = new google.maps.LatLngBounds();
bounds.extend(marker);
bounds.extend(smarker);
map.fitBounds(bounds);*/
}
google.maps.event.addDomListener(window, 'load', initialize);
/*google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});*/
</script>
Ничего не работает.