CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
essmahr
essmahr

Reputation: 676

Anchoring a google map to right side of its container

I've noticed that the google maps API (and google maps in general) always anchors maps to the left-hand side of their container, like here (resize the window).

I have a situation where I'd like the map to be anchored to the right hand side. I can't find anything in the API docs referring to this. Is it possible?

The answer to this question suggests re-rendering the map with an event listener on resize but this isn't preferable as I'm looking for the effect of a sidebar panel sliding in and 'over top' the map rather than pushing it to the side and then having the map re-center itself afterwards.

Upvotes: 0

Views: 153

Answers (1)

Bradley Flood
Bradley Flood

Reputation: 10579

How about adding an Event listener on the 'resize' or 'bounds_changed' event?

google.maps.event.addListener(map, 'resize', function(event) {
    map.setCenter(myLocation); // 
});

This should center the map smoothly as the containing div is resized.

Notes:

  • You might have to create the resize event manually.
  • 'map' is a Map type object from the Google API
  • 'MyLocation' is a LatLng object

var myLocation = new google.maps.LatLng(-33.679216211612086,151.3031796875);

Upvotes: 1

Related Questions