How to move the center position of google map

Question

I am creating a google map in a script with the following code -

var mapElement,
    parent,
    mapOptions,
    map,
    marker,
    latLong,
    openMarker;

parent = document.getElementsByClassName('parent')[0];
mapElement = document.createElement('div');
latLong = new google.maps.LatLng(some_lat_from_db, some_long_from_db);

mapOptions = {
    center: latLong,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(mapElement, mapOptions);
marker = new google.maps.Marker({
    position: latLong,
    map: map,
    title: 'some title'
});

openMarker = function () {
    var infowindow = new google.maps.InfoWindow();
    infowindow.setContent('Some Content');
    infowindow.open(map, marker);
};

google.maps.event.addListener(marker, 'click', openMarker);
parent.appendChild(mapElement);
openMarker();

When using this code, the infowindow that opens up by default goes outside the map viewport, so it's not visible. I first tried to reduce the size of the info window but that didn't work out. So I thought to move the center of the map a bit so that the info window remains in the viewport.

So, how can I move the center by some pixels so that the info window remains in the viewport?

You can't do this by pixels, but You can set the map center using `latitude and longitude`. You can do this for example by setting the new center using the latitude and longitude of clicked marker — bumerang, Jan 13 '13 at 17:11
Why don't you just move the marker a bit down (also move the senter of the map) ? — The Alpha, Jan 13 '13 at 17:36
[Take a look at this](http://jsbin.com/icamar), not sure if it helps. — The Alpha, Jan 13 '13 at 17:59

Andreas · Accepted Answer · 2013-01-13T17:23:51.537

36

You can use .setCenter() to move the center of the map

map.setCenter(marker.getPosition());

Update

Convert the LatLng with .fromLatLngToDivPixel() into a Point add an offset and convert it back into a LatLng with .fromDivPixelToLatLng()

edited Jan 13 '13 at 17:23

answered Jan 13 '13 at 17:11

Andreas

21,535
7
47
56

Thanks for the link. However, I want to move the center away by some pixels from where the marker is positioned. As I've mentioned above in my question, the main problem is to move the info window within the viewable area, so centering in the marker position won't help. – MD Sayem Ahmed Jan 13 '13 at 17:15
I am using [this](http://jsfiddle.net/fqt7L/9/) fiddle to convert a latlong to point object. However, I am getting `undefined` at - overlay.getProjection(). Can you tell me how I can get a projection object? – MD Sayem Ahmed Jan 13 '13 at 17:28
1

I'm a novice with google maps api. Maybe [this](http://stackoverflow.com/questions/3710745/google-maps-v3-overlayview-getprojection) helps as it sounds like your problem – Andreas Jan 13 '13 at 18:59
Yes, I also found it a while ago. It cleared up everything. I still had to tweak a bit to get it to work the way I wanted. I will post my solution later, but your answer should be the one accepted. Thank you very much. Also, +1. – MD Sayem Ahmed Jan 13 '13 at 20:06

score 3 · Answer 2 · answered Feb 23 '18 at 06:13

forget all that crap this is what works if you want to reuse a google map marker or move a google map marker, or recenter a google map marker.

var lo = <yourval>;
var la = <yourval>;
var midpoint = {lat:la, lng:lo };
marker.setPosition(midpoint);

if you want to destroy a google maps marker or delete a google maps marker

marker.setMap(null);

How to move the center position of google map

2 Answers2

Linked