$('.map').craftmap({
  cookies: false, // (bool) remember position
  fullscreen: false, // (bool) fullscreen
  container: {
  name: 'imgContent' // (string) class name for an image container
  },
  image: {
  width: 1475, // (int) image width
  height: 1200, // (int) image height
  name: 'imgMap' // (string) class name for an image
  },
  map: {
  position: 'center' // (string) map position after loading - 'X Y', 'center', 'top_left', 'top_right', 'bottom_left', 'bottom_right'
  },
  marker: {
  name: 'marker', // (string) class name for a marker
  center: true, // (bool) set true to pan the map to the center
  popup: true, // (bool) set true to show a popup
  popup_name: 'popup', // (string) class name for popup
  onClick: function(marker, popup){},
  onClose: function(marker, popup){}
  },
  controls: {
  init: true, // (bool) set true to control a map from any place on the page
  name: 'controls', // (string) class name for controls container
  onClick: function(marker){}
  },
  preloader: {
  init: true, // (bool) set true to preload an image
  name: 'preloader', // (string) class name for a preload container
  onLoad: function(img, dimensions){}
  }
  });

<div class="map">
<img src="path_to_the_image.jpg" class="imgMap" />
<div class="marker" id="ID" data-coords="x, y">
<!-- HTML CONTENT -->  
</div>
<!-- etc. -->
</div>
   
<div class="controls">
<a href="#" rel="ID">text</a>
<!-- etc. -->
</div>