Offset Centre with Google Maps 'center_changed' Event

Question

What I am trying to accomplish: two map canvases, one on top of the other, resized and offset - think the relationship between a Facebook cover image and profile image - where the "top canvas" is recentered when the "bottom canvas" is moved, but both maps are aligned to give the appearance of one single map.

What problem I am having: I am using an event listener to recenter the maps, but this causes the maps to share a common centre. Because the "top canvas" is offset, I need to compensate for the difference between both actual centres in relation to the page. I am using the solution found in this example to offset the "top canvas", and below you will see how I am integrate. But for some reason, unbeknownst to me, it is not working. No errors. Just simply not putting out.

Here it is with just the event listener:

var map,map2;
    function initialize() {

        var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        disableDefaultUI: true};

        var mapOptions2 = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        disableDefaultUI: true};

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

    google.maps.event.addListener(map, 'center_changed', function(){
        map2.setCenter(map.getCenter());
    });

}

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

And after with the offset:

var map,map2;
    function initialize() {

        var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        disableDefaultUI: true};

        var mapOptions2 = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        disableDefaultUI: true};

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

    function offsetCenter(latlng,offsetx,offsety) { 
        var scale = Math.pow(2, map.getZoom());
        var nw = new google.maps.LatLng(
            map.getBounds().getNorthEast().lat(),
            map.getBounds().getSouthWest().lng());
        var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(latlng);
        var pixelOffset = new google.maps.Point((offsetx/scale) || 0,(offsety/scale) ||0)
        var worldCoordinateNewCenter = new google.maps.Point(
            worldCoordinateCenter.x - pixelOffset.x,
            worldCoordinateCenter.y + pixelOffset.y);
        var newCenter = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);
        return newCenter;
    }
    google.maps.event.addListener(map, 'center_changed', function(){
        map2.setCenter(offsetCenter(map.getCenter(),300,300));
    });

}

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

Any help would be appreciated, and general comments as I am new at this and still learning. Thanks!

Please provide a fiddle/demo, when I use your code I see 2 maps, and the center is synchronized(with a offset) — Dr.Molle, Sep 18 '14 at 12:02
SO I go to create a fiddle, and it does not work. Notice that the scroll bar appears in the result section - and low and behold my divs are there but nothing is showing. So instead of separating everything, I place it all into the HTML section, and it works! Then I start to separate everything. But once I place the Javascript in it's appropriate section, it goes white again. Everything but Javascript separated:http://jsfiddle.net/nanvnvyb/ With everything separated:http://jsfiddle.net/r2sxkgvv/ So what am I missing? — Geppelt, Sep 18 '14 at 12:37
You use a wrong fiddle-option, you must select a **nowrap** (head or body) instead of **onload** :http://jsfiddle.net/r2sxkgvv/1/ — Dr.Molle, Sep 18 '14 at 12:46

Offset Centre with Google Maps 'center_changed' Event

0 Answers0