Maps API v3 Offset Markers

http://stackoverflow.com/questions/25992521

by ianlunn

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry"></script>
<div id="map-canvas"></div>
<div id="overlay">
    <div id="overlayContent">
         <h1>DIV OVERLAY</h1>

         <h5>Markers should not appear below this element.</h5>

         <h5>Click the <i>Add markers</i> button to draw random markers.</h5>

         <h5><i>Map offset</i> will be applied automatically.</h5>

         <h5>Click the <i>Offset map</i> button to reapply the offset.</h5>

         <h5>Click the <i>Fit only</i> button to only fit markers' bounds.</h5>

         <h5>Click the <i>Fit and offset map</i> button to fit to markers' bounds and reapply offset.</h5>

    </div>
</div>
<button id="addMarkers">Add markers</button>
<button id="offsetMap">Offset map</button>
<button id="fitMap">Fit only</button>
<button id="fitAndOffsetMap">Fit and offset map</button>

CSS

body {
    margin:0;
    padding:0;
    font-family: Arial;
}
#map-canvas {
    height:450px;
}
#overlay {
    position: absolute;
    width: 400px;
    height: 450px;
    background: black;
    opacity: .8;
    top: 0;
    left: 0;
    overflow: auto;
}
#overlayContent {
    color: white;
    padding: 10px 20px;
}
#overlayContent p {
    font-size: 12px;
    margin: 6px 0;
}
#overlayContent small {
    display: block;
    text-align: right;
    font-style: italic;
}
small {
    font-size: 9px;
}
i {
    color: lightblue;
}
h1 {
    font-size: 20px;
}
h5 {
    font-size: 12px;
}
button {
    margin: 20px 0 0 20px;
}

JavaScript

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var bounds = new google.maps.LatLngBounds();
var overlayWidth = 400; // Width of the overlay DIV
var leftMargin = 30; // Grace margin to avoid too close fits on the edge of the overlay
var rightMargin = 80; // Grace margin to avoid too close fits on the right and leave space for the controls

overlayWidth += leftMargin;

var start = new google.maps.LatLng(3.148173, 101.7148792);
var end = new google.maps.LatLng(3.1347725, 101.6893408);

var baseLat = 3.148173;
var baseLng = 101.7148792;
var markers = [];

function initialize() {

    var btn1 = document.getElementById('addMarkers');
    btn1.addEventListener('click', addMarkers);

    var btn2 = document.getElementById('offsetMap');
    btn2.addEventListener('click', offsetMap);

    var btn3 = document.getElementById('fitAndOffsetMap');
    btn3.addEventListener('click', fitAndOffsetMap);

    var btn4 = document.getElementById('fitMap');
    btn4.addEventListener('click', fitMap);

    directionsDisplay = new google.maps.DirectionsRenderer({
        draggable: true
    });

    var mapOptions = {
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: start,
        panControlOptions: {
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        zoomControlOptions: {
            position: google.maps.ControlPosition.TOP_RIGHT
        }
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    directionsDisplay.setMap(map);
}

function offsetMap() {

    if (bounds !== false) {

        // Top right corner
        var topRightCorner = new google.maps.LatLng(map.getBounds().getNorthEast().lat(), map.getBounds().getNorthEast().lng());

        // Top right point
        var topRightPoint = fromLatLngToPoint(topRightCorner).x;

        // Get pixel position of leftmost and rightmost points
        var leftCoords = bounds.getSouthWest();
     ...