Trying to figure out how to maintain the center of Google Maps while resizing responsively has been a challenge.
I've successfully centered the map, but I'm struggling to include my marker in the JavaScript code so that it stays centered as well. The map centering code is based on this source: Google maps responsive resize
var map; //<-- Accessible to both event listeners and initialize() function
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(LAT,LNG),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scrollwheel: false,
keyboardShortcuts: false,
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);}
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);
});
The snippet above shows the code used for centering the map. The following excerpt includes the marker code, but integrating it properly for maintaining the center position remains a puzzle.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(LAT,LNG),
map: map,
title: 'Title',
animation: google.maps.Animation.DROP,
})
}
If anyone can offer assistance with this issue, it would be greatly appreciated.