Map marker placement code. Also handles orientation change.

map-and-markers.js

// map-and-markers.js
// By: Matt Gowie
// If you're checking this out and you have any comments or suggestions on how
// this code could be improved, send me over an email at [email protected]
// Thanks!
///////////////////////////////////////////////////////////////////////////////

$(function() {
  $('img.marker').hide(); // hide these till ready
  var $map = $('#map');
  var iconScale = $map.attr('icon_scale');
  var headerHeight = $('#mobile_header').outerHeight();
  var markersLength = $('img.marker').size();
  var imgInitWidth;
  var $markers = $("img.marker");
  var markerInfo = [];
  var aspectRatio;

  // Grab the initial dimension of the map and then call the fillWidth
  var getWidth = function(url) {
    mapImage = new Image();
    mapImage.src = $map.attr('src');
    mapImage.onload = function() {
      imgInitWidth = mapImage.width;
      fillWidth();
    }
  }();

  // Code taken from: http://stackoverflow.com/questions/1649086/detect-rotation-of-android-phone-in-the-browser-with-javascript
  // Detect whether device supports orientationchange event, otherwise fall back to
  // the resize event.
  var supportsOrientationChange = "onorientationchange" in window,
  orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
  //console.log("Orientation Event: " + orientationEvent);
  $(window).bind(orientationEvent, function() {
    $('img.marker').hide();
    fillWidth();
  });

  var fillWidth = function() {
    $map.width('100%');
    aspectRatio = $map.width() / imgInitWidth;
    adjustMarkers();
  }

  // Modify the x/y position and height/width of all the markers on the map
  // 
  // Using the jquery.imagesLoaded plugin to determine when all images have loaded. 
  // Note that this caused some problems as the arrays of jquery objects it returns, 
  // specifically $proper, are mixed around and not in the order same order as $markers.
  // Simple fix was to set $markers to $proper so that the next time we alter the markers
  // we know they are in the same order as the last time. 
  var adjustMarkers = function() {
    if(markerInfo.length == markersLength){ // We have already seen these markers before
      $markers.each(function(i, element) {
        adjustMarker(i, $(element))
      });
    } else { // We haven't seen these before. Wait till they have loaded
      $markers.imagesLoaded(function($images, $proper, $broken) {
        $markers = $proper; // imagesLoaded jumbles elements around, we need to remember their order.
        $proper.each(function(i, element) {
          adjustMarker(i, $(element));
        });
      });
    }
    $markers.show();
  }

  // Alter the given marker's position and height according to the new size of the map (aspectRatio)
  // and the admin provided icon scale. The original state of the image (size/position) is stored
  // in a the persistent markerInfo variable so that we can correctly alter it on orientation change.
  var adjustMarker = function(i, $marker) {
    markerWidth = $marker.width();
    markerHeight = $marker.height();
    xPos = parseInt($marker.css('left')); 
    yPos = parseInt($marker.css('top'));
    if(markerInfo.length < markersLength){ 
      markerInfo[i] = { width: markerWidth, height: markerHeight, xPos: xPos, yPos: yPos };
    } else {
      markerWidth = markerInfo[i].width;
      markerHeight = markerInfo[i].height;
      xPos = markerInfo[i].xPos;
      yPos = markerInfo[i].yPos;
    }
    // Change the width and height by the iconScale which was set in the admin app and the new aspectRatio
    var markerWidth = (markerWidth * iconScale) * aspectRatio;
    var markerHeight = (markerHeight * iconScale) * aspectRatio;
    $marker
    .width(markerWidth)
    .height(markerHeight);
    // Change the x and y position by the new aspectRatio and headerHeight (only y)
    var adjustedX = (xPos * aspectRatio);
    var adjustedY = (yPos * aspectRatio) + headerHeight;
    $marker
    .css('left', adjustedX + 'px')
    .css('top', adjustedY + 'px');
  }

});