Ejemplo jQuery: mapa de España por Comunidades Autónomas

logo jQuery

Ejemplo de código fuente de un mapa de España distribuído por Comunidades Autónomas con efecto highlighting, realizado mediante un plugin de jQuery llamado maphilight, con el cual podremos ir seleccionando cada Comunidad, como si se tratase de un mapa hecho con efectos en flash.

 

 

Realizar el highlighting con jQuery

Para realizar el highlighting del mapa con jQuery, existen varios plugins conocidos, y yo destaco estos dos: maphilight e ImageMapster. Yo este ejemplo lo hice con maphilight, pero considero bajo mi humilde opinión, que es mucho más profesional y más mega-chuli el plugin ImageMapster.

 

Crear o conseguir el mapa de España

Lo primero que tenemos que hacer es conseguir el mapa de España distribuído en diferentes Comunidades Autónomas. Yo lo he sacado de una web muy pero que muy práctica, donde puedes descargarte cliparts opensource:

https://openclipart.org

Aunque también la Wikipedia tiene varias. Lo importante es que sea un mapa bien estructurado, y si es en formato svg y lo más poligonal posible, pues mucho mejor, ya que el mapeo después será mucho más sencillo.

 

Mapear el mapa (valga la redundancia)

Cuando tenemos ya nuestro mapa elegido, es hora de mapearlo. Ésta es la tarea más ruda de todo el proceso, ya que hay que sacar las coordenadas de cada Comunidad Autónoma o Provincia, en modo polígono. Si lo hacemos a mano, ya adelanto que es un trabajo de chinos. Así que para mapearlo y conseguir esas preciadas coordenadas, hay diferentes herramientas por internet, como por ejemplo:

http://www.image-maps.com

http://imagemap-generator.dariodomi.de

http://www.maschek.hu/imagemap/imgmap

http://www.image-mapper.com

http://www.caricatos.net/areas/index.php

http://www.kolchose.org/simon/ajaximagemapcreator

 

 

Otras maneras de conseguir las coordenadas:

  1. Mediante una herramienta que trae maphilight
    Sería ejecutando este script de python:

    svg2imagemap.py Mapa_Comunidades.svg X Y Comunidades

    X e Y serían el width y el height del mapa que queremos crear. Una vez ejecutado, nos creará un archivo html con las diferentes coordenadas.

  2. Mediante las herramientas ImageBot e Inkscape Map

 

Una vez mapeado el mapa, obtendremos las diferentes coordenadas de cada zona de ese mapa, en este caso de cada Comunidad. Pues esas coordenadas guardarlas como paño en oro, porque es la joya de la corona de todo este tinglao.

 

Código

El código a aplicar sería…

Creamos el archivo JS llamado mapaEs.js con las funciones y sus propiedades, del Mapa que vamos a realizar:

		//Función para la clase map
		$(function() {
			$('.map').maphilight(
		
			{
				fill: true,
				fillColor: '8FA4C9',
				strokeColor: '3B5998',
				
				/* Propiedades por defecto en maphilight
				* Si queremos cambiar alguna, descomentamos y le ponemos el valor que nos guste
 
				fillOpacity: 0.2,
				stroke: true,
				strokeOpacity: 1,
				strokeWidth: 1,
				fade: true,
				alwaysOn: false,
				neverOn: false,
				groupBy: false,
				wrapClass: true,
				shadow: false,
				shadowX: 0,
				shadowY: 0,
				shadowRadius: 6,
				shadowColor: '000000',
				shadowOpacity: 0.8,
				shadowPosition: 'outside',
				shadowFrom: false
				*/
				
				
	        });
    });
		
		//Función para la clase map_islas
		$(function() {
			$('.map_islas').maphilight(
		
			{
				fill: false,
				strokeColor: '3B5998',

				/* Propiedades por defecto en maphilight
				* Si queremos cambiar alguna, descomentamos y le ponemos el valor que nos guste
 
				fillOpacity: 0.2,
				stroke: true,
				strokeOpacity: 1,
				strokeWidth: 1,
				fade: true,
				alwaysOn: false,
				neverOn: false,
				groupBy: false,
				wrapClass: true,
				shadow: false,
				shadowX: 0,
				shadowY: 0,
				shadowRadius: 6,
				shadowColor: '000000',
				shadowOpacity: 0.8,
				shadowPosition: 'outside',
				shadowFrom: false
				*/				

	        });
    });

 

Creamos el código HTML incluyendo todas las librerías jQuery, el mapa en formato .png y las coordenadas del mapa:

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Ejemplo mapa de España con jQuery maphilight</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.maphilight.js"></script>
	<script type="text/javascript" src="mapaES.js"></script>
		
</head>
<body>
<h1>MAPA DE ESPAÑA POR COMUNIDADES</h1>



</head>

<body>

<img class="map" src="mapaes.png" width="300" height="264" usemap="#spain">


<map id="spain" name="spain">
<area shape="poly" href="javascript: void(0)" title="Galicia" coords="26,5,27,4,28,4,29,3,30,4,31,4,32,3,33,3,34,2,35,2,36,3,37,3,40,6,41,6,42,7,44,7,44,9,43,10,43,13,44,14,44,15,46,17,46,18,48,20,49,20,48,20,46,22,46,24,48,26,49,26,48,27,48,28,47,29,47,30,45,32,45,34,44,35,44,38,45,39,47,39,50,42,50,45,45,50,45,53,42,53,39,56,37,56,36,57,34,55,32,55,31,54,25,54,24,55,22,55,22,54,23,53,23,49,21,47,20,47,19,46,15,46,14,47,11,47,10,48,9,48,8,49,8,48,9,47,9,46,11,44,11,43,12,42,12,38,11,37,9,37,11,35,11,32,9,30,7,30,6,31,7,30,7,29,8,28,8,26,7,25,4,25,4,22,3,21,1,21,1,20,4,17,4,16,5,16,7,14,9,14,10,13,13,13,14,14,16,14,17,13,18,13,19,12,20,13,21,13,22,14,24,14,25,13,25,7,24,6,23,6,24,6,25,5" >
<area shape="poly" href="javascript: void(0)" title="Asturias" coords="77,9,78,10,81,10,82,11,84,11,85,12,92,12,93,13,96,13,97,14,98,14,99,15,96,15,95,16,95,18,89,18,88,19,88,20,87,20,86,21,83,21,81,23,79,23,78,22,75,22,74,23,73,23,71,21,69,21,68,20,66,20,64,22,62,22,61,23,60,23,59,24,58,24,57,25,53,25,52,26,52,24,51,23,53,21,53,19,47,13,47,11,49,9,53,9,54,8,64,8,65,9,66,9,67,10,70,10,71,9,72,9,74,7,76,9" >
<area shape="poly" href="javascript: void(0)" title="Cantabria" coords="118,14,119,13,123,13,124,14,126,14,127,15,129,15,126,15,124,17,124,18,123,19,123,20,121,20,120,21,117,21,115,23,114,23,112,25,112,27,115,30,115,31,112,31,109,28,109,27,106,24,105,24,104,23,100,23,99,22,97,22,97,21,98,20,98,19,101,19,102,18,102,15,103,15,104,14" >
<area shape="poly" href="javascript: void(0)" title="Euskadi" coords="151,17,152,18,157,18,159,16,159,17,156,20,156,21,148,29,148,32,147,33,147,34,146,35,146,36,145,37,145,39,144,38,143,38,142,37,143,37,145,35,145,34,144,33,144,32,142,30,137,30,136,31,136,33,137,34,134,31,133,31,132,30,133,30,135,28,135,26,134,25,134,24,133,23,133,20,131,18,132,18,135,15,137,15,138,14,140,14,141,15,142,15,143,16,145,16,146,17" >
<area shape="poly" href="javascript: void(0)" title="Navarra" coords="167,20,173,26,176,26,177,27,180,27,179,28,179,29,178,30,178,31,176,33,175,33,170,38,170,39,169,40,169,42,168,43,168,45,167,46,167,50,168,51,168,53,169,54,167,56,165,56,164,55,162,55,162,53,163,52,163,49,156,42,155,42,154,41,153,41,152,40,149,40,148,39,149,38,149,37,150,36,150,35,151,34,151,32,152,31,152,30,160,22,160,21,163,18,166,18,167,19" >
<area shape="poly" href="javascript: void(0)" title="La Rioja" coords="145,42,146,43,149,43,150,44,152,44,154,46,155,46,159,50,159,51,158,52,158,55,155,55,155,54,154,53,154,52,153,51,152,51,151,50,150,50,149,49,146,49,143,52,143,53,142,54,141,53,142,52,142,51,140,49,139,49,136,52,135,52,135,50,134,49,134,39,136,37,137,38,138,38,141,41,142,41,143,42" >
<area shape="poly" href="javascript: void(0)" title="Aragón" coords="192,32,193,33,194,33,197,36,200,36,201,35,204,35,205,34,212,34,214,36,214,37,212,39,212,40,214,42,214,44,213,45,213,48,212,49,212,52,211,53,211,55,210,56,210,57,209,58,209,59,208,60,208,61,207,62,207,63,206,64,206,66,207,67,207,68,206,69,206,74,207,75,207,76,204,79,204,90,202,92,201,92,200,91,195,91,192,94,192,95,191,96,191,97,193,99,193,103,192,104,192,105,191,106,190,106,189,107,188,107,187,108,187,109,186,110,186,112,181,117,174,110,170,110,169,109,168,109,163,104,163,102,164,102,167,99,167,88,159,80,158,80,157,79,155,79,155,78,154,77,156,75,157,75,159,73,159,70,160,69,160,68,162,66,162,59,170,59,172,57,172,51,171,50,171,49,170,48,172,46,172,42,174,40,174,39,177,36,178,36,182,32,182,30,183,30,185,32" >
<area shape="poly" href="javascript: void(0)" title="Catalunya" coords="237,39,241,43,242,43,243,44,245,44,246,43,252,43,253,44,256,44,258,42,259,42,260,41,262,41,263,40,265,40,267,42,265,44,265,47,268,50,268,53,266,55,266,56,265,57,264,57,259,62,256,62,254,64,253,64,251,66,250,66,248,68,248,69,247,70,247,71,246,72,246,73,245,74,244,74,243,75,241,75,240,76,237,76,236,77,234,77,233,78,231,78,230,79,228,79,227,80,226,80,225,81,224,81,222,83,221,83,215,89,215,92,216,93,218,93,215,96,214,96,213,97,212,97,212,96,211,95,209,95,208,94,208,93,207,92,207,91,208,90,208,86,207,85,207,82,208,81,208,80,210,78,210,73,209,72,210,71,210,70,211,69,211,67,210,66,210,64,211,63,211,62,213,60,213,59,214,58,214,56,215,55,215,52,216,51,216,48,217,47,217,39,218,38,218,36,217,35,217,34,216,33,216,32,215,31,215,30,216,31,217,31,218,32,219,32,220,33,221,33,223,35,228,35,228,41,229,42,231,42,232,43,233,43" >
<area shape="poly" href="javascript: void(0)" title="C.Valenciana" coords="186,121,186,117,187,117,188,116,188,115,189,114,189,113,190,112,190,111,191,110,192,110,196,106,196,95,197,94,198,95,204,95,208,99,209,99,211,101,210,102,210,103,205,108,205,109,203,111,203,112,201,114,201,115,200,116,200,118,199,119,199,120,197,122,197,123,196,124,196,125,195,126,195,127,194,128,194,137,195,138,195,141,196,142,196,144,197,145,197,146,198,147,198,148,199,149,199,150,204,155,205,155,204,156,203,156,202,157,201,157,198,160,197,160,194,163,193,163,192,164,192,165,191,166,191,167,190,168,190,169,189,170,189,171,186,174,186,177,185,178,185,180,184,180,184,179,182,177,182,176,181,175,181,172,182,171,182,169,179,166,179,165,180,164,180,160,181,159,181,158,183,156,183,152,182,151,182,149,180,147,177,147,176,146,176,142,177,141,177,139,176,138,176,136,175,135,171,135,170,134,170,133,169,132,170,131,170,130,172,128,173,128,174,127,174,125,175,124,175,122,176,121,176,120,177,119,177,118,179,120,180,120,182,122,185,122" >
<area shape="poly" href="javascript: void(0)" title="Murcia" coords="173,158,174,157,175,158,176,158,176,164,175,165,175,166,176,167,176,168,178,170,178,178,179,179,179,180,183,184,182,185,182,188,184,190,178,190,177,191,172,191,168,195,166,195,166,194,165,193,162,193,159,190,159,182,158,181,156,181,155,180,154,180,153,179,152,179,152,178,151,177,151,176,156,171,157,171,158,170,160,170,161,169,162,169,163,170,168,170,169,169,169,167,170,166,170,163,171,162,171,160,172,159,172,158" >
<area shape="poly" href="javascript: void(0)" title="Castilla La Mancha" coords="145,85,154,85,156,83,157,83,163,89,163,98,162,98,160,100,160,101,158,103,158,104,166,112,166,113,167,114,167,115,170,118,171,118,172,119,173,119,172,120,172,121,171,122,171,124,166,129,166,135,169,138,170,138,171,139,173,139,173,141,172,142,172,143,171,144,171,145,172,146,172,147,176,151,179,151,179,155,178,155,177,154,176,154,175,153,173,153,172,154,171,154,169,156,169,157,168,158,168,159,167,160,167,163,166,164,166,166,165,166,163,164,162,164,160,166,158,166,157,167,155,167,147,175,146,175,146,174,147,173,147,172,148,171,148,168,144,164,144,163,143,162,133,162,132,163,125,163,124,164,117,164,116,165,110,165,109,166,105,166,104,165,103,165,98,160,97,160,96,159,95,159,94,158,91,158,91,156,90,155,89,155,92,152,92,151,93,150,93,148,92,147,93,146,93,143,94,144,95,144,96,143,96,134,95,133,94,133,93,134,92,133,91,133,90,132,89,132,87,130,87,129,86,128,86,123,85,122,85,121,84,120,83,120,82,119,82,117,81,116,81,115,84,115,85,114,90,114,91,113,92,113,94,111,95,111,96,112,101,112,103,110,103,112,104,113,105,113,107,111,109,111,110,112,112,112,115,115,117,115,115,117,114,117,113,118,113,120,115,122,116,122,117,121,119,121,120,120,121,120,122,119,123,119,124,118,127,118,128,119,131,119,133,117,133,116,134,115,134,114,135,113,135,110,132,107,131,107,132,106,132,104,131,103,131,102,129,100,129,98,125,94,125,90,126,89,126,84,125,83,125,82,126,81,127,81,128,80,131,80,132,79,137,79,138,80,140,80,141,81,141,82,143,84,144,84" >
<area shape="poly" href="javascript: void(0)" title="Andalucía" coords="115,168,122,168,123,167,129,167,130,166,137,166,138,165,141,165,141,166,144,169,144,171,143,172,143,173,142,174,142,175,141,176,141,177,142,178,145,178,146,179,148,179,148,180,151,183,152,183,153,184,155,184,156,185,156,186,155,187,155,188,156,189,156,192,157,193,157,194,159,196,160,196,161,197,163,197,163,198,161,200,161,201,159,203,159,204,158,205,158,207,157,208,157,211,156,212,156,213,153,216,152,216,149,213,146,213,145,214,144,214,140,218,139,217,137,217,136,216,131,216,130,215,129,215,128,216,125,216,124,217,123,217,122,218,120,216,119,216,118,215,106,215,105,216,100,216,99,217,98,217,97,218,97,219,93,223,93,224,83,224,82,225,81,225,79,227,79,228,77,230,77,231,76,232,76,233,74,235,73,235,72,236,72,237,71,238,70,237,69,237,66,234,65,234,64,233,63,233,61,231,61,230,60,229,60,228,59,227,59,226,58,225,58,221,57,220,56,220,55,219,55,217,57,215,57,210,56,209,53,209,52,208,51,208,49,206,48,206,45,203,44,203,44,202,43,201,43,199,42,198,41,198,39,200,34,200,33,201,31,201,30,200,30,199,31,198,31,191,30,190,30,188,31,187,31,186,32,185,32,184,35,181,35,180,37,178,38,178,39,177,40,177,41,176,41,175,42,174,42,173,43,172,45,174,46,174,47,175,48,175,50,177,54,177,55,178,56,178,57,179,62,179,63,178,64,178,65,177,66,177,69,174,69,176,70,177,71,177,72,176,73,176,76,173,76,168,77,167,77,164,80,161,81,161,83,159,84,159,86,157,87,158,88,158,88,161,89,162,94,162,96,164,97,164,101,168,102,168,103,169,104,169,105,170,106,170,107,169,114,169" >
<area shape="poly" href="javascript: void(0)" title="Extremadura" coords="67,109,69,109,70,108,71,108,72,109,73,109,74,110,75,110,76,111,78,111,78,120,79,121,79,122,80,123,82,123,82,124,83,125,82,126,82,128,83,129,83,130,84,131,84,132,87,135,88,135,90,137,93,137,93,139,92,139,90,141,90,143,88,145,88,146,87,147,87,148,88,149,89,149,88,150,88,151,85,154,84,154,83,155,82,155,79,158,78,158,74,162,74,163,73,164,73,170,72,171,72,172,71,171,67,171,64,174,63,174,62,175,61,175,60,176,59,176,57,174,56,174,55,173,51,173,49,171,47,171,44,168,40,168,38,166,38,164,37,163,37,158,38,157,38,155,43,150,43,148,44,147,44,144,42,142,42,141,39,138,39,136,38,135,38,132,37,131,37,130,36,129,36,128,35,127,40,127,41,126,43,126,45,124,45,123,46,122,46,117,47,116,47,115,46,114,46,110,47,109,50,109,51,108,53,108,55,106,56,106,60,102,61,102,63,104,63,105" >
<area shape="poly" href="javascript: void(0)" title="C. de Madrid" coords="123,86,122,87,122,96,125,99,125,101,127,103,127,104,128,105,128,109,129,110,130,110,131,111,131,112,130,113,130,115,121,115,120,116,120,113,118,111,116,111,114,109,112,109,110,107,104,107,104,106,105,106,106,105,106,104,107,103,107,102,108,101,108,100,109,99,109,97,110,96,110,95,111,95,112,94,113,94,114,93,114,92,121,85,122,85" >
<area shape="poly" href="javascript: void(0)" title="Castilla y León" coords="102,26,103,27,104,27,105,28,105,29,110,34,111,34,112,35,115,35,116,34,117,34,118,33,118,32,119,31,119,29,117,27,117,26,118,25,119,25,120,24,125,24,126,23,127,23,128,22,129,22,129,23,130,24,130,25,129,25,127,27,127,30,132,35,132,36,130,38,130,43,131,44,131,45,130,46,130,48,131,49,131,52,132,53,132,54,135,57,137,57,138,56,139,56,140,57,144,57,147,54,147,53,149,53,150,54,151,54,151,56,153,58,155,58,156,59,158,59,158,61,159,62,159,64,157,66,157,67,155,69,155,71,154,71,152,73,152,74,151,75,151,80,152,81,151,81,150,82,147,82,141,76,138,76,138,75,137,74,136,74,135,75,133,75,132,76,128,76,127,77,126,77,125,78,124,78,122,80,121,80,111,90,111,91,110,91,109,92,108,92,107,93,107,94,106,95,106,97,104,99,104,101,97,108,96,108,95,107,94,107,93,108,92,108,90,110,88,110,87,111,82,111,81,110,81,109,79,107,76,107,74,105,73,105,71,103,70,103,68,105,67,104,67,103,62,98,59,98,55,102,54,102,52,104,51,104,50,105,49,105,49,102,50,101,50,92,51,91,51,86,50,85,51,85,52,84,52,82,53,81,53,80,54,79,55,79,56,78,57,78,60,75,61,75,64,72,64,70,65,69,65,66,64,65,64,64,62,62,61,62,60,61,58,61,58,59,57,58,57,56,55,54,54,54,53,53,50,53,49,52,49,51,51,49,52,49,53,48,53,47,54,46,54,42,53,41,53,40,48,35,49,34,49,33,51,31,51,30,52,30,53,29,57,29,58,28,60,28,62,26,64,26,65,25,66,25,67,24,68,24,69,25,70,25,70,26,72,28,73,28,74,27,75,27,76,26,78,26,79,27,81,27,83,25,84,25,85,24,89,24,92,21,92,23,95,26" >


<area shape="poly" href="javascript: void(0)" title="Canarias" class="map_islas" coords="296,203,296,256,187,256,187,203" >
<area shape="poly" href="javascript: void(0)" title="Baleares" class="map_islas" coords="298,100,298,145,255,145,253,147,253,164,221,164,221,151,224,148,224,147,232,139,232,138,242,128,242,127,247,122,247,121,254,114,254,113,262,105,262,104,265,101,265,100" >




</map>



<h2>Creado para <a href="http://www.ejemplocodigo.com">www.ejemplocodigo.com</a></h2>

</body>
</html> 



</body>
</html>

 

Demo del ejemplo

VER DEMO

 

Descargar ejemplo

 

 

Valoración General

[Valoraciones:  7    Promedio:  5 de 5]
  • http://cimasdestacables.blogspot.com.es Hector

    Hola a todos, en particular a Javier Crego.
    Enhorabuena por esta entrada. Hacia tiempo que buscaba este mapa para mi nuevo blog, el qual aun se encuentra en construcción, entre otras cosas por no saber hacer funcionar todos estos códigos.
    Vaya por delante que de desarrollo no tengo ni idea, por eso utilizo blogger.
    El caso es que no se como utilizar estos códigos con extensión js.
    Se que he de colocarlos en el head de la plantilla del sitio, pero tal y como lo hago me da error 404 al ejecutar la página html.
    Se que es mucha cara por mi parte, pero ¿podeis ayudarme con 4 lineas de como hacerlo?
    Gracias de antemano

    • Javier Crego

      Hola Hector!

      En blogger, tienes que ir a editar tu plantilla, y dentro de las etiquetas:

      ...

      tienes que ponerle estos códigos de js:

      	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
      	<script type="text/javascript" src="jquery.maphilight.js"></script>
      	<script type="text/javascript" src="mapaES.js"></script>

      ¿Por qué te puede estar dando el error?

      Pues pues porque los archivos jquery.maphilight.js y mapaES.js tienes que tenerlos subidos al hosting de tu blog o Web, y después ponerle en los códigos que pusiste en head, la ruta dónde se encuentran dichos archivos (en el atributo src). En tu caso con blogger, el hosting te lo otorga google, por tanto no tienes acceso a los archivos de tu blog, como si fuese un blog con hosting contratado.

      Te digo 2 formas de poder solucionar lo que te pasa:

      -1- Tendrías que subir esos archivos js, a algún sitio web donde te dejen subirlos, google docs, dropbox, etc. Y después ponerlos con su ruta en los códigos del head.

      -2- Obtenerlos ya subidos en Internet. El plugin maphilight lo tienes en la web del que lo ha desarrollado. El mapaES.js, se puede meter manualmente dentro de tu plantilla, sin tener que incluirlo en un archivo. Te dejo el código que tendrías que poner dentro de

      ...

      de tu plantilla:

          <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
          <script type="text/javascript" src="https://github.com/kemayo/maphilight/blob/master/jquery.maphilight.min.js"></script>
          <script type="text/javascript">
      
              //Función para la clase map
              $(function() {
                  $('.map').maphilight(
              
                  {
                      fill: true,
                      fillColor: '8FA4C9',
                      strokeColor: '3B5998',
                      
                     
                      
                  });
          });
              
              //Función para la clase map_islas
              $(function() {
                  $('.map_islas').maphilight(
              
                  {
                      fill: false,
                      strokeColor: '3B5998',
                      
       
                  });
          });
      
          </script>
      • http://cimasdestacables.blogspot.com.es Hector

        Gracias Javier.
        Creo que lo he entendido.
        1- Subo a Google Drive el archivo jquery.maphilight.js
        2- Hago lo mismo con el archivo mapaES
        3 – en el de la plantilla icliyo dos lineas con la dirección obtenida http://
        4-Creo la página html “MapaEspaña”
        Y ya debe funcionar…
        ¿Que pasa con el fichero jQuery Maphilight Min?
        Saludos

      • Javier Crego

        Hola Hector!

        Siento decirte que me equivoqué en mi anterior comentario, ya que con Google Drive ni con Github, no podrás obtener el link directo al archivo JS que hace que funcione.

        Con Blogger está muy limitado todo, para poder ponerle plugins en javascript, al no tener hosting propio. Por ello tendrás que buscarte un hosting gratuito por Internet, donde alojar dichos archivos JS que vayas metiendo a tu blog. O buscar alguna Web donde te ofrezcan gratuitamente alojar archivos javascript como esta:

        http://yourjavascript.com/

        A esa página tendrías que subir los archivos:

        -jquery.maphilight.min.js (el que no lleva “min” no haría falta subirlo ya que ocupa más)
        -mapaEs.js

        Y después con los códigos que te envian al email, pues ponerlos dentro del head de tu plantilla en Blogger:

        <script type="text/javascript" src="http://yourjavascript.com/NUMEROQUETEGENERAN/jquery-maphilight-min.js"></script>
        
        <script type="text/javascript" src="http://yourjavascript.com/NUMEROQUETEGENERAN/mapaEs.js"></script>

        Espero resolver así tus dudas.

        Un saludo.

      • http://cimasdestacables.blogspot.com.es Hector

        Hola de nuevo Javier.
        Gracias por tu ayuda y tus instrucciones.
        Respecto a lo que comentas de subri archivos a Google Drive, comentarte que he encontrado este artículo
        http://helplogger.blogspot.com.es/2014/09/host-blogger-css-javascript-files-in-google-drive.html

        en el que dice, en el punto 3 (step 3) como actuar para indicar a blogger la dirección del archivo.
        Probaré las dos opciones y te informo.

        Saludos y prospero año nuevo

      • http://cimasdestacables.blogspot.com.es Hector

        Google Drive si que permite colocar codigo js en los post actuando tal y como explica en el artículo comentado.

        Gracias de nuevo

      • Javier Crego

        Efectivamente con ese truquillo de ese artículo, sí se permite incluir código js. Pero bueno si alguna vez google quitara esa opción, pues ya sabes que deberás buscar alguna página donde alojar scripts JS como la que te indiqué, o algún hosting gratuíto.

        Saludos.

      • http://cimasdestacables.blogspot.com.es Hector

        Hola Javier.
        Aquí sigo.
        ¿Este código sería válido también para crear un mapa de las provincias españolas?
        ¿Qué parámetros, además de las coordenadas del mapa de imagen tendría que cambiar?
        Saludos

      • Javier Crego

        Como bien explico en el artículo, necesitarías primero obtener el mapa de provincias ( https://openclipart.org/detail/26135/spain-provinces ) y después mapearlo para conseguir las coordenadas. Conseguir mapearlo con alguna de las herramientas que puse, es lo más complicado, así que paciencia!

        Saludos.

  • Alejandro

    Hola Compañeros! Sabéis donde puedo encontrar el mapa de España con los barrios de todas las ciudades definido en un .kml o algo parecido. Muchas gracias!

  • Ave

    Genial ejemplo, solo un detalle que no tiene que ver con el código, se dice “valga la reDundancia” 😉 Saludos!

    • Javier Crego

      Gracias por el aviso!. Ya lo he escrito bien.
      Y me alegro que te guste el ejemplo.
      Saludos.