CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3responsive-design
user2968831
user2968831

Reputation:

Centering Google Maps on responsive resize with marker

I'm trying to get Google Maps to keep its center when resizing responsively.

I've managed to get the map to center but can't work out how to add my marker back in to the JS to make it center too. I'm using the code from here for the map centering... Google maps responsive resize

var map; //<-- This is now available to both event listeners and the 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 code I am using to center the map is above. I have the marker code below too, but I'm not sure how to add it to make it keep its center too.

var marker = new google.maps.Marker({
        position: new google.maps.LatLng(LAT,LNG),
        map: map,
        title: 'Title',
        animation: google.maps.Animation.DROP,
        })
    }

Can anybody help with this?

Upvotes: 2

Views: 7822

Answers (1)

pascal
pascal

Reputation: 641

Here is a first step to get what you want to do:

var map; //<-- This is now available to both event listeners and the initialize() function
var mapCenter; // Declare a variable to store the center of the map
var centerMarker; // declare your marker

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);

    // Create a new marker and add it to the map
    centerMarker = new google.maps.Marker({
        position: new google.maps.LatLng(LAT,LNG),
        map: map,
        title: 'Title',
        animation: google.maps.Animation.DROP
    });

    mapCenter = map.getCenter(); // Assign the center of the loaded map to the valiable
}



google.maps.event.addDomListener(window, 'load', initialize);

google.maps.event.addDomListener(window, "resize", function() {

    // Here you set the center of the map based on your "mapCenter" variable
    map.setCenter(mapCenter); 
});

Edit: Based on @Chad Killingsworth comment: You may want to add an 'idle' event handler to the map to set the mapCenter variable. You can achieve this like this:

google.maps.event.addListener(map,'idle',function(event) {
    mapCenter = map.getCenter();
});

Description of the 'idle' event from the doc:

This event is fired when the map becomes idle after panning or zooming.

Upvotes: 8

Related Questions