Google maps API position

Question

I have a problem with my Google Maps v3 api.

The marker is on the right position and my height is 700px so this makes my marker to be placed automatically in both hor and vert center.

The horizontal center is right, but I want my map to still be 700px height, but the position of my marker to be shown more towards the top than center. Still the position of the marker should be at the right position, but the whole map should be dragged upwards more.

Any clue how to do this? Compare it to css and background-image position styling.

My code right now:

var rkc = new google.maps.LatLng(56.198785, 15.289740);
var markerrkc;
var map;

function initialize() {

    var mapOptions = {
        zoom: 17,
        center: rkc,
        mapTypeControl: false,
        navigationControl: false,
        streetViewControl: false,
        scrollwheel: false,
        navigationControl: false,
        mapTypeControl: false,
        scaleControl: false,
        draggable: false,
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'usroadatlas']
        }
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    var markerrkc = new google.maps.Marker({
        position: rkc,
        icon: 'URL TO MY ICON',
        map: map,
    });

    var styledMapOptions = {

    };

    var usRoadMapType = new google.maps.StyledMapType(
    roadAtlasStyles, styledMapOptions);

    map.mapTypes.set('usroadatlas', usRoadMapType);
    map.setMapTypeId('usroadatlas');
}

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

Answer 1

You said your map is 700px in height. So by default your marker will be 350px from the top.

Therefore, you have to decide by how much pixels you want it to pan on the y axis. Here is an example for panning by 200px:

var mapOptions = {
    zoom: 17,
    center: rkc,
};

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var markerrkc = new google.maps.Marker({
    position: rkc,
    icon: 'URL TO MY ICON',
    map: map,
});

map.panBy(0,200); // pan the map by 200px on the y axis (towards the top)