A Pen by Emanuele Tessore.

Google-Maps-paddings.markdown

Google Maps paddings

How to add padding layers for position absolute boxes to Google Maps

A Pen by Emanuele Tessore on CodePen.

License.

index.html

<div id="map-test" class="map-test">
  <div id="overlay-top" class="overlay top">Some top here!</div>
  <div id="overlay-right" class="overlay right">Some right here!</div>
  <div id="overlay-bottom" class="overlay bottom">Some bottom here!</div>
  <div id="overlay-left" class="overlay left">Some left here!</div>
  <div id="map-canvas" class="map-canvas"></div>
</div>

script.js

// used globals
//window.map;
//window.styledMap;
//window.infowindow;
//window.bounds;
//window.overlay;

window.markers = [{
  "title": "Marker Title",
  "point": {"lat": 46.255762928292, "lng": 10.504977026953},
  "content": "Box Content Here!"
}];

function initialize() {
  window.bounds = new google.maps.LatLngBounds();
  window.overlay = new google.maps.OverlayView();
  // this is required by Google APIs but useless for our intents
  window.overlay.draw = function () {
  };

  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(window.markers[0].point.lat, window.markers[0].point.lng),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    streetViewControl: false,
    scrollwheel: false
  };
  window.map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);

  var styles = [];
  styles.push({
    featureType: "poi.business",
    elementType: "labels",
    stylers: [
      {visibility: "off"}
    ]
  });
  window.styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});

  window.map.mapTypes.set('map_style', window.styledMap);
  window.map.setMapTypeId('map_style');

  window.infowindow = new google.maps.InfoWindow({
    content: 'Placeholder'
  });
  
  var setPopupContent = function(){
      window.infowindow.setContent(this.html);
      window.infowindow.open(window.map, this);
  };

  for (var i = 0; i < window.markers.length; i++) {
    var position = new google.maps.LatLng(window.markers[i].point.lat, window.markers[i].point.lng);
    var marker = new google.maps.Marker({
      position: position,
      map: window.map,
      title: window.markers[i].title,
      html: window.markers[i].content
    });

    bounds.extend(position);

    google.maps.event.addListener(marker, 'click', setPopupContent);

  }

  overlay.setMap(window.map);
  var paddings = {
    top: parseInt(document.getElementById('overlay-top').clientHeight),
    right: parseInt(document.getElementById('overlay-right').clientWidth),
    bottom: parseInt(document.getElementById('overlay-bottom').clientHeight),
    left: parseInt(document.getElementById('overlay-left').clientWidth)
  };

  google.maps.event.addListenerOnce(map, 'idle', function () {
    mapEnforcePaddings(window.map, window.overlay, window.markers, paddings);
  });

  google.maps.event.addListener(map, 'resize', function () {
    mapEnforcePaddings(window.map, window.overlay, window.markers, paddings);
  });

}

var mapEnforcePaddings = function (map, overlay, markers, paddings) {
  if (typeof(paddings.top) == 'undefined') paddings.top = 0;
  if (typeof(paddings.right) == 'undefined') paddings.right = 0;
  if (typeof(paddings.bottom) == 'undefined') paddings.bottom = 0;
  if (typeof(paddings.left) == 'undefined') paddings.left = 0;

  var projection = overlay.getProjection();
  var bounds = new google.maps.LatLngBounds(map.getBounds().getSouthWest(), map.getBounds().getNorthEast());

  for (var i = 0; i < markers.length; i++) {
    var markerLatLng = new google.maps.LatLng(markers[i].point.lat, markers[i].point.lng);
    var markerPixelCoordinates = projection.fromLatLngToDivPixel(markerLatLng);

    bounds.extend(
      projection.fromDivPixelToLatLng({
        x: markerPixelCoordinates.x - paddings.left,
        y: markerPixelCoordinates.y - paddings.top
      })
    );

    bounds.extend(
      projection.fromDivPixelToLatLng({
        x: markerPixelCoordinates.x + paddings.right,
        y: markerPixelCoordinates.y + paddings.bottom
      })
    );

  }
  map.fitBounds(bounds);
  map.panBy(
    (paddings.right - paddings.left) / 2,
    (paddings.bottom - paddings.top) / 2
  );
};

style.css

.map-test {
  /* just arbitrary dimensions */
  height: 480px;
  width: 640px;
  background: #ccc;
  position: relative;
}

.overlay {
  line-height: 1.4;
  font-size: 16px;
  text-align: center;
  background: #333;
  background: rgba(0, 0, 0, .2);
  position: absolute;
  z-index: 500;
  width: 100%;
  height: 100%;
}

.top {
  top: 0;
  left: 0;
  height: 160px;
  z-index: 600;
}

.right {
  background: #0c0;
  background: rgba(0, 200, 0, .2);
  top: 0;
  right: 0;
  width: 240px;
  z-index: 700;
}

.bottom {
  background: #00c;
  background: rgba(0, 0, 200, .2);
  bottom: 0;
  left: 0;
  height: 60px;
  z-index: 800;
}

.left {
  background: #c00;
  background: rgba(200, 0, 0, .2);
  top: 0;
  left: 0;
  width: 80px;
  z-index: 900;
}

.map-canvas {
  min-height: 300px;
  width: 100%;
  height: 100%;
}

zdBqL.markdown

zdBqL

A Pen by Emanuele Tessore on CodePen.

License.