2

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
                },
            }
        }
    });
yann
  • 25
  • 1
  • 5
  • you can use css to style and position the div that gets filled with the Google Map you know - please show code , the html and the javascript that fills map – Scott Selby Oct 06 '13 at 08:19
  • This is not my code, really - it's a ready-made WP Theme that I am adjusting. And it's too long for a comment - i will update the post. – yann Oct 06 '13 at 13:38

1 Answers1

2

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:{
Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
  • Could you specify where in the code this goes? adding this to the end of the script results with map not loading :-( – yann Oct 07 '13 at 14:59
  • Thank you for the full code, it's getting clearer for me now. However, it doesn't work as it is supposed to - now the map loads panned, and then something pulls it back as it was before, with the marker in the center - see http://nootr.yann.ru. Any ideas what? – yann Oct 10 '13 at 13:22
  • It's the et_slider, he triggers a click on the first marker. Instead of the code above add this: `$(this).gmap3("get").panBy(-parseInt(this.width()/6),0);` right after `$(this).gmap3("get").panTo( marker.position );` (located at `et_add_marker()`) – Dr.Molle Oct 10 '13 at 14:01
  • wow, that was really A SOLUTION! I was about to take a much more complicated way - give the map `margin-right:-30%;` and then break my neck adjusting the zoom control [like this](http://stackoverflow.com/questions/2934269/google-maps-api-v3-custom-controls-position). But you suggested a much easier and better way, saving me again :-) – yann Oct 10 '13 at 14:47