0

I want to get the same effect as Pinterest Map (ex. www.pinterest.com/airbnb/loved-by-parisians/) with Google Maps v3.

So far I have come to this: http://jsfiddle.net/tdff3/9xEEG/

I get one thing missing: Move the center map position and change the markers visible area to the right, working responsive for different resolutions.

Now:

What I want:

function initialize()
{
    var mapOptions =
    {
        zoom: 8,
        center: new google.maps.LatLng( -33.9, 151.2 ),
        disableDefaultUI: true,
        zoomControl: true,
        zoomControlOptions:
        {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.RIGHT_BOTTOM
        },
        scrollwheel: false
    };

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

    var beaches =
    [
        [ 'Bondi Beach', -33.890542, 151.274856, 4 ],
        [ 'Coogee Beach', -33.423036, 151.259052, 5 ],
        [ 'Cronulla Beach', -34.028249, 121.157507, 3 ],
        [ 'Manly Beach', -33.80010128657071, 151.28747820854187, 2 ],
        [ 'Maroubra Beach', -33.450198, 151.259302, 1 ]
    ];

    setMarkers( map, beaches );
}

function setMarkers( map, locations )
{
    var bounds = new google.maps.LatLngBounds();

    for( var i = 0; i < locations.length; i++ )
    {
        var beach = locations[ i ];
        var myLatLng = new google.maps.LatLng( beach[ 1 ], beach[ 2 ] );
        var marker = new google.maps.Marker(
        {
            position: myLatLng,
            map: map,
            title: beach[ 0 ],
            zIndex: beach[ 3 ]
        } );

        bounds.extend( myLatLng );
    }

    map.fitBounds( bounds );
}

function loadScript()
{
    var script = document.createElement( 'script' );
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
        'callback=initialize';
    document.body.appendChild( script );
}

window.onload = loadScript;
grg
  • 5,023
  • 3
  • 34
  • 50
user3252384
  • 11
  • 2
  • 1
    Confused as to what you're asking, you want to move the map (with the div overlayed on top) and make sure the markers are always visible? – ChrisSwires Jan 30 '14 at 10:09
  • Yes. I want all the markers on the right side of the map, and let the left side without any marker, just on page load, avoiding any visible marker behind the div overlayed. This right side has a dynamic width, depending on the screen resolution. – user3252384 Jan 30 '14 at 15:06

1 Answers1

0

The markers area which I believe would be the extended bounds for all markers is not the same on the 2 pictures you posted.

If you have markers all over Australia, then the bounds would look something like in your second picture. If not, but you still want to achieve this specific view, then you will probably need to play with the zoom level to make sure it is displayed this way, or to define these bounds manually.

Regarding the move of the map to the right, you could use the map panBy() method which allows you to change the center of the map by a given distance in pixels.

Hope this helps!

MrUpsidown
  • 21,592
  • 15
  • 77
  • 131
  • Thanks for your answer. I try your solution: http://jsfiddle.net/tdff3/9xEEG/11/ But I need an automatic zoom change too, to avoid the right visible markers go out the screen. Any ideas? – user3252384 Jan 30 '14 at 15:22
  • You mentioned *responsive* in your question. I can't really think how you can make this "responsive" if the text box stays over the map at all screen resolutions. In any case, setting the `panBy()` with a fixed value seems to be contradictory to a responsive approach. – MrUpsidown Jan 30 '14 at 17:43