2

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?

Community
  • 1
  • 1
  • Based on your comment below, your question is far from clear. Do you want the map to always be centered on the marker? What happens if a user pans the map? Also, a link to the site you are working on is always helpful. – Chad Killingsworth Dec 12 '13 at 19:45
  • I want the page to load with the map and marker in the centre of the map. If the user resizes the page the map and marker should remain in the centre. I can get the map to do this, however I can't work out how to add the code for the marker into the responsive version of the code. Not too bothered what happens when the user pans the map, whether it stays centered on where they have panned or resets to the original marker location. –  Dec 13 '13 at 08:47
  • Here is the website I'm working on... http://www.haydockoffice.co.uk/contact/ –  Dec 13 '13 at 08:48

1 Answers1

8

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.

pascal
  • 641
  • 4
  • 12
  • 1
    I would update `mapCenter` in an `idle` event listener: `google.maps.event.addListener(map, 'idle', function() { mapCenter = map.getCenter(); })` – Chad Killingsworth Dec 11 '13 at 22:39
  • @ChadKillingsworth thanks for your input, that makes perfect sense. I updated the answer accordingly. – pascal Dec 12 '13 at 07:34
  • Hi guys, thanks for your responses, not quite sure whether you understood my question. The first snippet of code I pasted above does work to get the map to centre upon resizing the window. What I am looking to do is add a marker to the map and have the map centre on the marker upon resize. The code I had originally for the marker is the second snippet of code in my original post. I just need to know how to mash them both together. –  Dec 12 '13 at 14:54
  • How to you want to add the marker? Do you have a defined function, you want to click on the map, should it be when the map is initialized? – pascal Dec 12 '13 at 15:33
  • I want the marker to be rendered when the map is initialized. I originally had it in the initialise function, before the map was responsive, however when I add it back it doesn't work. –  Dec 13 '13 at 08:53
  • I've added the block to add the marker to the code. You should try this and report if it still doesn't work (ideally with some console error). Also, it would help if you could provide some specific about `LAT` and `LNG` parameters. – pascal Dec 13 '13 at 13:12