Mapa interactivo con jQuery

02 - Febrero - 2012

En muchas ocasiones hemos necesitado tener algún tipo de mapa interactivo externo a Google Maps en el que podamos realizar nuestras propias acciones. Hasta ahora esto era algo complejo ya que las opciones que existían eran bastante limitadas pero ahora todo ha cambiado gracias a Craftmap un plugin en jQuery que te permite realizar mapas interactivos basándote en una imagen de inicio.

El plugin pesa muy poco por lo que la carga de la web no se verá afectada, y además tiene un sencillo método para la inserción de marcadores con los que el usuario puede interactuar.

Ejemplo de uso:

JavaScript:

$('.map').craftmap({

	cookies: false, // (bool) remember position

	fullscreen: false, // (bool) fullscreen

	container: {

		name: 'imgContent'

	},

	image: {

		width: 1475, // (int) image width

		height: 1200, // (int) image height

		name: 'imgMap' // (string) class name for an image

	},

	map: {

		position: 'center'

	},

	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,

		name: 'controls',

		onClick: function(marker){}

	},

	preloader: {

		init: true, // (bool) set true to preload an image

		name: 'preloader',

		onLoad: function(img, dimensions){}

	}

});

HTML

<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>

El plugin tiene una demostración online para que lo puedan ver en funcionamiento.

Web: Craftmap