How to center the Google Map NOT at the center of

Question

I have a site based on Google Maps (using gmap3), which has markers and a floating widget above it, that contains a text about the active marker. This floating widget takes about half of the screen. The map is automatically centered (or panned to) the active marker.

As you see from the above, the active marker in the center of the screen is very close to the right side of the text widget (which covers almost all left side of the screen). I would like to have it more loose - say, not in the center of the screen, but about 2/3 from the left and 1/3 from the right (horizontally, of course; vertically it should stay centered).

In other words, I want the following: when a new marker is selected as active, the map should pan to such position, that this marker is in about 1/3 of the screen width from the right side of the screen.

Changing the latlng of the map's center won't help, because this should work on any zoom level. I need something like "panTo (width: 66%; height:50%)" (this is not real code, of course).

Thank you in advance.

(       function($){
    var $et_main_map = $( '#et_main_map' );

    et_active_marker = null;

    $et_main_map.gmap3({
        map:{
            options:{
<?php
while ( have_posts() ) : the_post();
$et_location_lat = get_post_meta( get_the_ID(), '_et_listing_lat', true );
$et_location_lng = get_post_meta( get_the_ID(), '_et_listing_lng', true );

            if ( '' != $et_location_lat && '' != $et_location_lng )
                printf( 'center: [%s, %s],', $et_location_lat, $et_location_lng );

break;
endwhile;
rewind_posts();
?>

                            zoom: <?php
                        if ( is_home() || is_front_page() )
                            echo esc_js( et_get_option( 'explorable_homepage_zoom_level', 3 ) );
                        else
                            echo esc_js( et_get_option( 'explorable_default_zoom_level', 5 ) ); ?>,
                mapTypeId: google.maps.MapTypeId.<?php echo esc_js( strtoupper( et_get_option( 'explorable_map_type', 'Roadmap' ) ) ); ?>,
                mapTypeControl: false,
                mapTypeControlOptions: {
                    position : google.maps.ControlPosition.LEFT_CENTER,
                    style : google.maps.MapTypeControlStyle.DROPDOWN_MENU
                },
                streetViewControlOptions: {
                    position: google.maps.ControlPosition.LEFT_CENTER
                },
                navigationControl: true,
                scrollwheel: false,
                streetViewControl: false,
                zoomControl: true,
                                    zoomControlOptions: {
                    position: google.maps.ControlPosition.RIGHT_BOTTOM,
                                            style: google.maps.ZoomControlStyle.SMALL
                },
            }
        }
    });

Answer 1

You may first center the map at the given LatLng and then use panBy() to apply the offset:

 map.panBy(-Math.floor(map.getDiv().offsetWidth/6),0)

For gmap3 you may use the event-property of the map-option to apply it: add the following code

        events:{
        idle:function(map){
            google.maps.event.clearListeners(map,'idle');
            map.panBy(-parseInt(this.width()/6),0);
         }
      },

right after

$et_main_map.gmap3({
        map:{