Mapa interactivo de México con jQuery, CSS, javascript y ASP.NET

Actualmente estoy desarrollando una aplicación web donde el cliente requiere un mapa de la República Mexicana y poder seleccionar un Estado para ver diferente información del Estado.


Buscando en internet encontré algunos ejemplos de los cuales todos tenían costo, al fin encontré un muy buen ejemplo y ya lo implemente, en seguida te explico y publico el código fuente.

Lo que comparto es un mapa interactivo de los Estados de México. Es una mejor manera de convertir una lista de regiones en un mapa interactivo con estilo sin un reproductor de Flash o cualquier plug-ins externos  y funciona en todos los navegadores modernos e incluso en los dispositivos móviles como el iPhone o el iPad.

El mapa está desarrollado con lo siguiente:

  • ASP.NET
  • CSS
  • Javascript
  • jQuery

En seguida puedes ver el código fuente del ejemplo. Al final de este post puede descargar el ejemplo y probarlo.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Mapa_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.maphighlight.min.js"></script>
    <script type="text/javascript">
        /* State IDS */
        var states = ['AGU', 'BCN', 'BCS', 'CAM', 'CHH',
                'CHP', 'COA', 'COL', 'DIF', 'DUR',
                'GRO', 'GUA', 'HID', 'JAL', 'MEX',
                'MIC', 'MOR', 'NAY', 'NLE', 'OAX',
                'PUE', 'QUE', 'ROO', 'SIN', 'SLP',
                'SON', 'TAB', 'TAM', 'TLA', 'VER',
                'YUC', 'ZAC'
        ];
        /* State Names */
        var state_names = ['Aguascalientes', 'Baja California Norte', 'Baja California Sur', 'Campeche', 'Chihuahua', 'Chiapas', 'Coahuila', 'Colima', 'Distrito Federal', 'Durango', 'Guerrero', 'Guanajuato', 'Hidalgo', 'Jalisco', 'Edo. Mexico', 'Michoacán', 'Morelos', 'Nayarit', 'Nuevo León', 'Oaxaca', 'Puebla', 'Queretaro', 'Quintana Roo', 'Sinaloa', 'San Luis Potosí', 'Sonora', 'Tabasco', 'Tamaulipas', 'Tlaxcala', 'Veracruz', 'Yucatán', 'Zacatecas'];
        $(function () {
            $('.map').maphilight({ fade: false });
        });
        $(document).ready(function () {
            $('.area').hover(function () {
                var id = $(this).attr('id');
                var state = $.inArray(id, states);

                $('#edo').html(state_names[state]);
            });
        });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <map name="mexico">
	<area id="AGU" alt="AGU" title="Aguascalientes" class="area" href="www.cofemer.gob.mx" shape="poly" coords="317,269,317,268,319,268,319,269,320,269,320,270,321,270,321,272,322,272,322,275,323,275,323,276,324,276,324,277,325,277,325,278,324,278,324,279,322,279,322,280,321,280,321,281,320,281,320,282,319,282,319,283,315,283,315,282,312,282,312,281,308,281,308,282,306,282,306,283,306,282,305,282,305,280,304,280,304,277,305,277,305,275,307,275,307,274,308,274,308,273,310,273,310,272,311,272,311,271,313,271,313,270,315,269,317,269" />
	<area id="BCN" alt="BCN" title="Baja California Norte" class="area" href="#" shape="poly" coords="40,0,40,1,56,1,56,2,71,2,71,3,74,3,73,3,73,4,72,4,72,5,71,5,71,6,70,6,70,7,69,7,69,9,68,9,68,13,69,13,69,19,67,19,67,22,68,22,68,23,69,23,69,24,70,24,70,27,69,27,69,30,68,30,68,36,67,36,67,40,68,40,68,43,69,43,69,65,70,65,70,66,71,66,71,68,72,68,72,70,73,70,73,73,75,73,75,74,76,74,76,75,77,75,77,76,78,76,78,77,79,77,79,78,80,78,80,79,81,79,81,81,82,81,82,82,83,82,83,83,84,83,84,84,85,84,85,85,86,85,86,86,87,86,87,90,88,90,88,92,87,92,87,96,88,96,88,97,90,97,90,96,91,96,91,99,93,99,93,100,94,100,94,105,95,105,95,106,96,106,96,107,99,107,99,109,100,109,100,112,101,112,101,117,94,117,94,116,84,116,84,115,76,115,76,114,75,114,76,114,76,110,75,110,75,109,76,109,76,106,77,106,77,102,76,102,76,101,75,101,75,100,74,100,74,98,73,98,73,97,72,97,72,95,71,95,71,93,70,93,70,92,69,92,69,91,68,91,68,90,67,90,67,88,66,88,66,87,65,87,65,85,64,85,64,84,63,84,63,82,62,82,62,81,61,81,61,80,60,80,60,79,58,79,58,78,56,78,56,77,55,77,55,76,54,76,54,75,53,75,53,74,52,74,52,73,51,73,51,72,50,72,50,71,49,71,49,70,48,70,48,69,47,69,47,64,46,64,46,63,45,63,46,63,46,54,45,54,45,53,44,53,44,51,42,51,42,52,42,44,41,44,41,40,40,40,40,39,39,39,39,34,38,34,38,30,37,30,37,28,36,28,36,27,35,27,35,25,34,25,34,24,33,24,33,19,32,19,33,19,33,20,35,20,35,16,33,16,33,14,32,14,32,13,31,13,31,10,30,10,30,6,29,6,29,4,28,4,28,2,27,2,27,0,40,0" />
	<area id="BCS" alt="BCS" title="Baja California Sur" class="area" href="#" shape="poly" coords="55,117,55,118,58,118,58,119,62,119,62,120,65,120,65,119,67,119,67,118,68,118,68,119,69,119,69,121,73,121,73,120,74,120,74,118,72,118,72,116,71,116,72,116,72,115,72,117,82,117,82,118,92,118,92,119,100,119,100,120,101,120,101,123,102,123,102,125,103,125,103,126,104,126,104,128,105,128,105,129,107,129,107,131,108,131,108,132,109,132,109,134,110,134,110,137,111,137,111,140,112,140,112,141,113,141,113,142,115,142,115,147,116,147,116,153,117,153,117,156,121,156,121,154,120,154,120,152,119,152,119,148,119,149,120,149,120,150,121,150,121,151,122,151,122,153,123,153,123,156,124,156,124,157,125,157,125,161,126,161,126,166,127,166,127,170,126,170,126,173,127,173,127,176,128,176,128,178,129,178,129,180,130,180,130,181,131,181,131,182,132,182,132,185,133,185,133,190,134,190,134,193,135,193,135,195,136,195,136,197,137,197,137,199,138,199,138,201,137,201,137,211,138,211,138,213,139,213,139,215,141,215,141,216,143,216,143,218,146,218,146,212,147,212,147,213,148,213,148,214,149,214,149,215,150,215,150,216,151,216,151,218,152,218,152,219,153,219,153,220,155,220,155,221,156,221,156,226,157,226,157,229,158,229,158,231,159,231,159,232,161,232,161,234,162,234,162,240,161,240,161,241,160,241,160,243,158,243,158,244,156,244,156,245,153,245,153,246,151,246,151,247,151,246,150,246,150,245,149,245,149,244,148,244,148,240,147,240,147,236,146,236,146,234,145,234,145,232,144,232,144,230,143,230,143,229,142,229,142,228,140,228,140,227,139,227,139,226,138,226,138,225,137,225,137,224,136,224,136,223,135,223,135,221,134,221,134,220,133,220,133,219,132,219,132,218,131,218,131,217,130,217,130,216,129,216,129,215,128,215,128,214,127,214,127,213,126,213,126,212,125,212,125,211,123,211,123,210,120,210,120,209,118,209,120,209,120,207,119,207,119,206,118,206,118,204,117,204,117,203,114,203,114,204,114,201,113,201,113,199,112,199,112,197,110,197,110,198,109,198,109,196,108,196,108,195,107,195,108,195,108,194,109,194,109,192,108,192,108,191,109,191,109,188,110,188,110,184,109,184,109,182,109,184,111,184,111,180,112,180,112,176,111,176,111,174,110,174,110,168,109,168,109,166,108,166,108,165,107,165,107,163,106,163,106,162,105,162,105,161,102,161,102,160,101,160,101,159,99,159,99,158,98,158,98,156,97,156,97,155,95,155,95,154,94,154,94,151,93,151,93,149,92,149,92,148,93,148,93,146,91,146,92,146,92,144,93,144,93,142,90,142,90,144,89,144,89,145,88,145,88,146,87,146,87,145,86,145,86,144,85,144,85,143,83,143,83,146,82,146,82,147,81,147,81,145,80,145,80,144,79,144,79,143,78,143,78,141,77,141,77,140,74,140,74,139,73,139,73,138,72,138,72,137,71,137,71,136,70,136,70,135,66,135,66,134,65,134,65,132,64,132,64,127,63,127,63,126,62,126,62,125,60,125,60,124,59,124,59,123,58,123,58,121,56,121,56,120,55,120,55,119,54,119,54,117,55,117" />
	<area id="CAM" alt="CAM" title="Campeche" class="area" href="#" shape="poly" coords="577,325,577,321,578,321,578,320,579,320,579,319,580,319,580,306,580,307,588,307,588,308,589,308,589,309,590,309,590,310,591,310,591,311,592,311,592,312,593,312,593,313,594,313,594,314,595,314,595,316,596,316,596,317,597,317,597,318,598,318,598,319,599,319,599,320,600,320,600,321,601,321,601,322,602,322,602,324,603,324,603,331,604,331,604,341,605,341,605,352,606,352,606,366,603,366,603,367,588,367,588,368,574,368,574,369,573,369,573,365,572,365,572,364,568,364,568,363,565,363,565,362,562,362,562,361,557,361,557,362,556,362,556,365,552,365,552,364,549,364,549,363,548,363,548,362,546,362,546,360,545,360,545,354,544,354,544,353,539,353,539,352,538,352,538,350,539,350,539,349,548,349,548,350,549,350,541,350,541,353,548,353,548,354,550,354,550,357,553,357,553,356,554,356,554,354,555,354,555,355,560,355,560,353,561,353,561,352,563,352,563,351,564,351,564,349,565,349,565,346,564,346,564,345,563,345,563,343,561,343,563,343,563,342,564,342,564,341,566,341,566,340,567,340,567,339,569,339,569,338,570,338,570,337,571,337,571,336,572,336,572,335,573,335,573,334,574,334,574,333,575,333,575,331,576,331,576,325,577,325" />
	<area id="CHH" alt="CHH" title="Chihuahua" class="area" href="#" shape="poly" coords="196,50,196,51,198,51,198,39,213,39,213,40,229,40,229,41,238,41,238,42,239,42,239,44,240,44,240,46,241,46,241,47,242,47,242,49,243,49,243,50,244,50,244,51,245,51,245,52,246,52,246,53,248,53,248,54,249,54,249,56,250,56,250,57,251,57,251,58,252,58,252,59,253,59,253,60,254,60,254,61,255,61,255,62,256,62,256,63,257,63,257,65,258,65,258,66,261,66,261,67,262,67,262,68,263,68,263,69,264,69,264,70,265,70,265,71,266,71,266,73,267,73,267,75,268,75,268,78,269,78,269,80,270,80,270,85,271,85,271,89,272,89,272,92,273,92,273,93,274,93,274,94,275,94,275,95,276,95,276,96,278,96,278,97,279,97,279,98,280,98,280,100,281,100,281,101,283,101,283,102,284,102,284,103,287,103,287,104,288,104,288,105,289,105,289,106,291,106,291,107,293,107,293,108,294,108,294,109,296,109,296,110,299,110,298,110,298,112,297,112,297,114,296,114,296,115,295,115,295,117,294,117,294,119,293,119,293,120,292,120,292,122,291,122,291,123,290,123,290,125,289,125,289,126,288,126,288,128,287,128,287,129,286,129,286,131,285,131,285,132,284,132,284,134,283,134,283,137,284,137,284,144,285,144,285,150,286,150,286,156,287,156,287,161,287,160,277,160,277,161,275,161,275,162,274,162,274,164,273,164,273,165,272,165,272,166,271,166,271,167,270,167,270,168,269,168,269,166,267,166,267,165,261,165,261,166,261,165,260,165,260,164,256,164,256,165,255,165,255,166,254,166,254,165,253,165,253,164,252,164,252,163,251,163,251,162,250,162,250,161,248,161,248,160,246,160,246,159,244,159,244,158,243,158,243,157,242,157,242,156,239,156,239,158,237,158,237,159,236,159,236,160,235,160,235,166,231,166,231,167,229,167,229,170,230,170,230,173,229,173,229,174,228,174,228,180,227,180,227,182,225,182,225,183,219,183,219,182,218,182,218,180,217,180,217,179,216,179,216,178,215,178,215,176,214,176,214,175,213,175,213,172,211,172,211,171,206,171,206,170,205,170,205,169,204,169,204,164,203,164,203,159,202,159,202,155,201,155,201,152,200,152,200,151,193,151,193,150,191,150,191,149,190,149,190,148,189,148,189,147,188,147,188,145,189,145,189,136,188,136,188,135,187,135,187,133,186,133,186,131,185,131,185,130,184,130,184,128,183,128,183,125,182,125,182,121,192,121,192,115,191,115,191,112,192,112,192,98,191,98,191,97,192,97,192,95,193,95,193,94,194,94,194,89,195,89,195,70,194,70,194,66,193,66,193,59,192,59,192,50,196,50" />
	<area id="CHP" alt="CHP" title="Chiapas" class="area" href="#" shape="poly" coords="546,372,546,371,550,371,550,372,552,372,552,373,553,373,553,374,555,374,555,375,556,375,556,376,555,376,555,379,556,379,556,380,558,380,558,381,561,381,561,383,562,383,562,384,563,384,563,385,565,385,565,386,566,386,566,387,567,387,567,388,569,388,569,389,570,389,570,390,571,390,571,391,572,391,572,392,575,392,575,393,576,393,576,394,578,394,578,395,580,395,580,396,581,396,581,398,582,398,582,400,583,400,583,401,584,401,584,402,587,402,587,403,588,403,587,403,587,410,577,410,577,411,560,411,560,412,557,412,557,414,556,414,556,416,555,416,555,418,554,418,554,420,553,420,553,421,552,421,552,423,551,423,551,425,550,425,550,427,549,427,549,428,548,428,548,433,549,433,549,435,550,435,550,436,551,436,551,438,550,438,550,446,549,446,549,448,547,448,547,447,546,447,546,446,545,446,545,445,544,445,544,444,543,444,543,443,542,443,542,442,541,442,541,441,540,441,540,440,539,440,539,439,537,439,537,438,536,438,536,437,535,437,537,437,537,435,535,435,535,434,533,434,533,433,530,433,530,432,528,432,528,431,527,431,527,430,526,430,526,429,525,429,525,428,524,428,524,427,523,427,523,426,522,426,522,425,521,425,521,424,520,424,520,422,519,422,519,421,515,421,515,420,513,420,513,419,512,419,512,418,511,418,511,417,509,417,509,414,507,414,507,412,506,412,506,409,505,409,505,406,504,406,505,406,505,402,506,402,506,399,507,399,507,396,508,396,508,394,509,394,509,391,510,391,510,389,511,389,511,388,512,388,512,387,513,387,513,386,514,386,514,385,515,385,515,381,516,381,516,379,517,379,517,378,518,378,518,376,519,376,519,374,518,374,519,374,519,371,520,371,520,370,522,370,522,371,523,371,523,373,524,373,524,377,525,377,525,380,526,380,526,381,530,381,530,382,531,382,531,383,535,383,535,382,536,382,536,381,537,381,537,379,538,379,538,378,539,378,539,376,540,376,540,375,541,375,541,374,542,374,542,373,543,372,546,372" />
	<area id="COA" alt="COA" title="Coahuila" class="area" href="#" shape="poly" coords="320,89,320,90,334,90,334,91,339,91,339,92,340,92,340,95,342,95,341,95,341,96,340,96,340,97,339,97,339,99,345,99,345,100,347,100,347,101,349,101,349,102,350,102,350,103,351,103,351,105,352,105,352,106,353,106,353,107,354,107,354,110,355,110,355,112,356,112,356,114,357,114,357,118,358,118,358,119,359,119,359,121,360,121,360,123,361,123,361,126,362,126,362,127,363,127,363,128,364,128,364,129,365,129,365,130,366,130,366,131,367,131,367,132,368,132,368,133,369,133,369,136,370,136,370,137,369,137,369,139,368,139,368,140,367,140,367,141,367,140,366,140,366,139,365,139,365,138,361,138,361,139,360,139,360,140,359,140,359,143,358,143,358,146,357,146,357,147,353,147,353,148,351,148,351,149,350,149,350,150,349,150,349,151,348,151,348,157,352,157,352,156,353,156,353,157,354,157,354,161,353,161,353,163,352,163,352,164,350,164,350,165,348,165,348,166,346,166,346,167,345,167,345,168,344,168,344,169,342,169,342,170,341,170,341,172,340,172,340,174,341,174,341,175,342,175,342,176,343,176,343,177,344,177,344,179,345,179,345,180,346,180,346,183,347,183,347,188,348,188,348,190,349,190,349,191,350,191,350,192,352,192,352,194,353,194,353,196,354,196,354,197,356,197,356,198,358,198,358,199,360,199,355,199,355,198,351,198,351,199,350,199,350,200,349,200,349,201,348,201,348,207,349,207,349,209,348,209,348,212,349,212,348,212,348,214,345,214,345,213,344,213,344,212,343,212,343,211,342,211,342,209,341,209,341,208,335,208,335,207,334,207,334,206,333,206,333,205,331,205,331,204,330,204,330,203,328,203,328,202,325,202,325,201,321,201,321,200,310,200,310,201,309,201,309,203,308,203,308,205,307,205,307,207,306,207,306,208,304,208,304,207,300,207,300,206,299,206,299,205,298,205,298,204,297,204,297,202,296,202,296,201,295,201,295,199,294,199,294,197,293,197,296,197,296,194,295,194,295,193,294,193,294,190,295,190,295,189,296,189,296,185,297,185,297,178,298,178,298,171,297,171,297,169,296,169,296,168,295,168,295,166,294,166,294,165,293,165,293,164,292,164,292,163,291,163,291,161,290,161,290,157,289,157,289,152,288,152,288,146,287,146,287,141,286,141,286,134,287,134,287,133,288,133,288,131,289,131,289,130,290,130,290,129,291,129,291,127,292,127,292,125,293,125,293,124,294,124,294,122,295,122,295,121,296,121,296,119,297,119,297,118,298,118,298,116,299,116,299,114,300,114,300,113,301,113,301,111,302,111,302,109,303,109,303,107,304,107,304,106,305,106,305,105,306,105,306,104,307,104,307,103,308,103,308,102,309,102,309,100,310,100,310,98,311,98,311,95,312,95,312,93,313,93,313,92,314,92,314,91,316,91,316,90,317,89,320,89" />
	<area id="COL" alt="COL" title="Colima" class="area" href="#" shape="poly" coords="273,342,273,341,276,341,276,340,277,340,277,339,284,339,284,338,287,338,287,349,286,349,286,351,285,351,285,352,284,352,284,353,283,353,283,352,282,352,282,351,281,351,281,350,280,350,280,349,278,349,278,347,275,347,275,348,273,348,273,347,272,347,272,345,270,345,270,344,267,344,267,343,266,343,269,342,273,342" />
	<area id="DIF" alt="DIF" title="Distrito Federal" class="area" href="#" shape="poly" coords="389,339,389,341,390,341,390,343,391,343,391,345,390,345,390,346,388,346,388,345,386,345,386,343,385,343,385,342,386,342,386,341,387,341,387,340,388,339,389,339" />
	<area id="DUR" alt="DUR" title="Durango" class="area" href="#" shape="poly" coords="257,168,257,167,259,167,259,168,263,168,263,167,265,167,265,168,267,168,267,170,268,170,268,171,271,171,271,170,272,170,272,169,273,169,273,168,274,168,274,167,275,167,275,165,276,165,276,164,277,164,277,163,279,163,279,162,283,162,283,163,287,163,287,164,289,164,289,165,290,165,290,166,291,166,291,167,292,167,292,169,293,169,293,170,294,170,294,171,295,171,295,173,296,173,296,174,295,174,295,177,294,177,294,186,293,186,293,188,292,188,292,191,291,191,291,193,292,193,292,194,291,194,291,199,292,199,292,201,293,201,293,203,294,203,294,205,295,205,295,206,296,206,296,207,297,207,297,209,299,209,299,210,304,210,304,211,305,211,305,212,308,212,308,210,309,210,309,208,310,208,310,205,311,205,311,207,312,207,312,211,313,211,313,217,296,217,296,216,293,216,293,217,292,217,292,218,291,218,291,219,290,219,290,220,289,220,289,221,288,221,288,222,287,222,287,223,286,223,286,224,285,224,285,225,283,225,283,228,282,228,282,234,281,234,281,235,280,235,280,236,279,236,279,238,278,238,278,239,277,239,277,241,276,241,276,247,275,247,275,260,274,260,274,263,272,263,272,264,270,264,270,263,269,263,269,262,268,262,268,260,267,260,267,259,266,259,266,258,261,258,261,259,260,259,261,259,261,257,262,257,262,254,261,254,261,249,259,249,259,248,257,248,257,247,254,247,254,246,251,246,251,245,250,245,250,244,248,244,248,243,247,243,247,242,246,242,246,240,245,240,245,238,244,238,244,237,243,237,243,233,242,233,242,230,241,230,241,224,240,224,240,221,239,221,239,219,238,219,238,217,237,217,237,216,236,216,236,215,228,215,228,214,227,214,227,211,226,211,226,209,225,209,225,207,224,207,224,206,223,206,223,205,222,205,222,203,221,203,221,202,220,202,220,201,219,201,219,199,218,199,218,186,222,186,222,185,227,185,227,184,229,184,229,183,230,183,230,176,231,176,231,175,232,175,232,169,235,169,235,168,237,168,237,162,238,162,238,161,240,161,240,160,241,160,241,159,241,160,242,160,242,161,244,161,244,162,245,162,245,163,248,163,248,164,249,164,249,165,250,165,250,166,251,166,251,167,252,167,252,168,254,168,254,169,256,168,257,168" />
	<area id="GRO" alt="GRO" title="Guerrero" class="area" href="#" shape="poly" coords="367,362,367,361,368,361,368,360,373,360,373,359,374,359,374,358,375,358,375,357,376,357,376,356,377,356,377,357,379,357,379,358,380,358,380,359,381,359,381,361,382,361,382,362,387,362,387,363,388,363,388,364,389,364,389,365,390,365,390,366,391,366,391,367,392,367,392,368,393,368,393,369,394,369,394,370,395,370,395,371,397,371,397,372,398,372,398,373,401,373,401,374,402,374,402,375,403,375,403,376,404,376,404,388,405,388,405,391,406,391,406,392,408,392,408,393,409,393,409,394,410,394,410,396,411,396,411,400,412,400,411,400,411,402,410,402,410,403,408,403,408,404,407,404,407,405,406,405,406,406,404,406,404,408,403,408,403,409,402,409,402,410,401,410,401,409,399,409,399,408,398,408,398,407,397,407,397,406,395,406,395,405,390,405,390,404,388,404,388,403,385,403,385,404,385,403,384,403,384,402,382,402,382,401,377,401,377,400,374,400,374,402,374,401,373,401,373,400,371,400,371,399,370,399,370,398,368,398,368,397,366,397,366,396,365,396,365,395,363,395,363,396,361,396,361,395,358,395,358,394,355,394,355,393,352,393,352,392,350,392,350,391,348,391,348,390,345,390,345,388,344,388,344,387,343,387,343,386,341,386,341,385,340,385,340,384,339,384,339,383,338,383,338,382,337,382,337,381,335,381,335,380,333,380,333,379,331,379,331,377,330,377,330,376,329,376,329,375,328,375,328,374,326,374,326,373,325,373,325,372,321,372,321,370,322,370,322,369,323,369,323,368,325,368,325,367,326,367,326,360,327,360,327,359,330,359,330,360,332,360,332,361,348,361,348,362,353,362,353,363,357,363,357,361,358,361,358,355,358,356,359,356,359,358,360,358,360,362,361,362,361,363,366,362,367,362" />
	<area id="GUA" alt="GUA" title="Guanajuato" class="area" href="#" shape="poly" coords="335,287,335,286,336,286,336,283,337,283,337,282,338,282,338,283,340,283,340,284,345,284,345,285,347,285,347,286,348,286,348,287,349,287,349,288,351,288,351,289,353,289,353,290,356,290,356,289,357,289,357,288,358,288,358,287,361,287,361,286,361,287,363,287,363,288,364,288,364,289,367,289,367,290,369,290,369,291,371,291,371,293,372,293,372,294,371,294,371,295,371,294,366,294,366,297,365,297,365,298,364,298,364,300,360,300,360,301,356,301,356,302,354,302,354,309,355,309,355,312,356,312,356,314,357,314,357,316,358,316,358,317,359,317,359,318,360,318,360,319,361,319,361,320,362,320,362,321,363,321,360,321,360,322,358,322,358,323,349,323,349,321,341,321,341,322,338,322,338,320,337,320,337,317,336,317,336,316,329,316,329,317,328,317,328,318,327,318,327,317,326,317,326,315,325,315,325,314,323,314,323,313,324,313,324,312,325,312,325,308,324,308,324,305,325,305,325,304,326,304,326,302,327,302,327,301,328,301,328,299,329,299,329,297,330,297,330,296,332,296,332,295,333,295,333,293,334,293,334,287,335,287" />
	<area id="HID" alt="HID" title="Hidalgo" class="area" href="#" shape="poly" coords="388,298,388,297,389,297,389,296,390,296,390,294,392,294,392,295,395,295,395,296,401,296,401,291,401,295,402,295,402,296,403,296,403,297,406,297,406,298,408,298,408,300,407,300,407,303,407,302,404,302,404,303,403,303,403,304,402,304,402,305,400,305,400,308,401,308,401,310,400,310,400,315,401,315,401,317,405,317,405,316,407,316,407,315,408,315,408,314,409,314,409,313,410,313,410,312,411,312,411,311,412,311,412,310,413,310,413,312,412,312,412,313,411,313,411,314,410,314,410,315,409,315,409,316,407,316,407,319,408,319,408,320,409,320,409,324,408,324,408,327,407,327,407,330,406,330,406,331,404,331,404,332,401,332,401,330,400,330,400,328,399,328,399,327,393,327,393,324,392,324,392,323,388,323,388,324,386,324,386,325,385,325,385,326,384,326,384,327,384,326,383,326,383,324,382,324,382,321,381,321,381,320,378,320,378,319,375,319,375,318,373,318,373,317,372,317,373,317,373,312,374,312,374,311,376,311,376,310,378,310,378,309,379,309,379,308,380,308,380,305,381,305,381,303,382,303,382,301,383,301,383,298,388,298" />
	<area id="JAL" alt="JAL" title="Jalisco" class="area" href="#" shape="poly" coords="257,303,257,302,260,302,260,301,262,301,262,300,265,300,265,301,267,301,267,302,268,302,268,303,269,303,269,304,270,304,270,305,273,305,273,302,274,302,274,300,275,300,275,298,276,298,276,295,275,295,275,293,274,293,278,293,278,292,279,292,279,291,280,291,280,286,279,286,279,285,278,285,278,284,277,284,277,283,278,283,278,277,277,277,277,276,276,276,276,275,275,275,275,274,274,274,274,271,275,271,275,267,276,267,276,265,277,265,277,264,281,264,281,265,280,265,280,269,283,269,283,268,284,268,284,266,285,266,285,264,286,264,286,262,286,264,285,264,285,272,287,272,287,273,290,273,290,272,292,272,292,268,293,268,293,266,296,266,296,267,297,267,297,269,296,269,296,272,295,272,295,274,292,274,292,275,290,275,290,277,291,277,291,278,287,278,287,279,286,279,286,283,285,283,285,284,284,284,284,286,283,286,283,288,282,288,282,290,281,290,281,292,280,292,280,295,281,295,281,296,282,296,282,297,284,297,284,298,289,298,289,297,303,297,303,296,305,296,305,295,307,295,307,294,308,294,308,293,309,293,309,292,310,292,310,287,309,287,309,285,308,285,308,284,312,284,312,285,315,285,315,286,319,286,319,285,321,285,321,284,322,284,322,283,324,283,324,282,325,282,325,281,326,281,326,280,327,280,327,279,328,279,328,278,329,278,329,279,330,279,330,280,331,280,331,281,333,281,333,282,334,282,334,283,333,283,333,285,332,285,332,287,331,287,331,293,330,293,330,294,328,294,328,295,327,295,327,297,326,297,326,299,325,299,325,300,324,300,324,301,323,301,323,303,322,303,322,304,321,304,321,309,322,309,322,311,321,311,321,312,320,312,320,313,319,313,319,314,314,314,314,315,311,315,311,316,309,316,309,317,307,317,307,318,302,318,302,319,299,319,299,320,298,320,298,321,297,321,297,323,296,323,296,326,298,326,298,327,303,327,303,328,305,328,305,336,306,336,306,338,310,338,309,338,309,340,307,340,307,341,306,341,306,342,304,342,304,343,302,343,302,344,301,344,301,345,299,345,299,346,298,346,298,347,296,347,296,348,290,348,290,342,291,342,291,340,290,340,290,337,289,337,289,336,276,336,276,337,275,337,275,338,274,338,274,339,270,339,270,340,264,340,264,341,263,341,263,340,261,340,261,339,259,339,259,338,258,338,258,337,257,337,257,336,256,336,256,335,255,335,255,333,254,333,254,332,253,332,253,331,252,331,252,330,250,330,250,328,249,328,249,326,248,326,248,324,247,324,247,322,246,322,246,321,245,321,245,319,244,319,244,316,243,316,243,314,242,314,242,313,243,313,243,312,245,312,245,311,248,311,248,310,250,310,250,309,251,309,251,308,252,308,252,307,253,307,253,306,254,306,254,304,256,303,257,303" />
	<area id="MEX" alt="MEX" title="Edo. de México" class="area" href="#" shape="poly" coords="369,324,369,322,370,322,370,321,371,321,371,319,371,320,373,320,373,321,375,321,375,322,379,322,379,323,380,323,380,327,381,327,381,329,387,329,387,327,388,327,388,326,390,326,390,325,390,329,392,329,392,330,398,330,398,333,397,333,397,338,398,338,398,348,397,348,397,349,396,349,396,348,395,348,395,347,394,347,394,344,393,344,393,340,392,340,392,338,391,338,391,337,390,337,390,335,389,335,389,334,387,334,387,336,386,336,386,337,385,337,385,339,384,339,384,340,383,340,383,346,384,346,384,348,383,348,383,349,382,349,382,351,381,351,381,352,380,352,380,353,379,353,379,354,373,354,373,356,372,356,372,357,368,357,368,358,366,358,366,359,365,359,365,360,364,360,364,361,363,361,363,360,362,360,362,356,361,356,361,351,362,351,362,349,363,349,363,346,364,346,364,340,365,340,365,334,366,334,366,331,367,331,367,330,368,330,368,324,369,324" />
	<area id="MIC" alt="MIC" title="Michoacan" class="area" href="#" shape="poly" coords="322,317,322,316,322,317,323,317,323,318,324,318,324,319,325,319,325,320,330,320,330,319,332,319,332,318,334,318,334,319,335,319,335,323,336,323,336,324,337,324,337,325,341,325,341,324,347,324,347,325,348,325,348,326,358,326,358,325,360,325,360,324,362,324,362,323,364,323,364,324,365,324,365,328,364,328,364,331,363,331,363,336,362,336,362,343,361,343,361,347,360,347,360,349,359,349,359,351,358,351,358,353,356,353,356,354,355,354,355,360,352,360,352,359,345,359,345,358,333,358,333,357,325,357,325,358,324,358,324,359,323,359,323,363,324,363,324,364,323,364,323,365,322,365,322,366,321,366,321,367,320,367,320,368,319,368,319,373,315,373,315,372,312,372,312,371,308,371,308,370,306,370,306,369,304,369,304,368,301,368,301,367,298,367,298,366,295,366,295,365,293,365,293,364,291,364,291,363,290,363,290,362,289,362,289,360,288,360,288,359,287,359,287,358,286,358,286,356,285,356,286,356,286,354,287,354,287,353,288,353,288,351,293,351,293,350,299,350,299,349,300,349,300,348,301,348,301,347,303,347,303,346,304,346,304,345,306,345,306,344,309,344,309,343,310,343,310,342,311,342,311,340,312,340,312,336,311,336,311,335,308,335,308,332,307,332,307,330,308,330,308,327,307,327,307,326,306,326,306,325,303,325,303,324,299,324,299,323,300,323,300,322,302,322,302,321,307,321,307,320,310,320,310,319,311,319,311,318,314,317,322,317" />
	<area id="MOR" alt="MOR" title="Morelos" class="area" href="#" shape="poly" coords="385,351,385,350,386,350,386,348,390,348,390,349,393,349,393,351,394,351,394,352,397,352,397,359,393,359,393,360,392,360,392,361,391,361,391,362,390,362,390,361,389,361,389,360,388,360,388,359,387,359,387,358,384,358,384,360,384,358,383,358,383,357,382,357,382,356,381,356,381,355,382,355,382,354,383,354,383,353,384,353,384,351,385,351" />
	<area id="NAY" alt="NAY" title="Nayarit" class="area" href="#" shape="poly" coords="251,250,251,249,255,249,255,250,257,250,257,251,258,251,258,253,259,253,259,257,258,257,258,258,257,258,257,259,256,259,256,261,257,261,257,262,262,262,262,261,265,261,265,263,266,263,266,265,268,265,268,266,273,266,273,267,272,267,272,276,273,276,273,277,274,277,274,278,275,278,275,286,276,286,276,287,277,287,277,289,278,289,277,289,277,290,274,290,274,289,272,289,272,290,271,290,271,293,272,293,272,295,273,295,273,297,272,297,272,299,271,299,271,302,271,301,270,301,270,300,269,300,269,299,268,299,268,298,265,298,265,297,261,297,261,298,259,298,259,299,257,299,257,300,255,300,255,301,253,301,253,302,252,302,252,303,251,303,251,304,249,304,249,303,247,303,248,303,248,302,249,302,249,301,250,301,250,300,251,300,251,298,252,298,252,297,253,297,253,285,252,285,252,284,250,284,250,282,249,282,249,281,248,281,248,280,249,280,249,277,248,277,248,276,246,276,246,273,245,273,245,268,244,268,244,264,243,264,243,263,243,264,247,264,247,263,249,263,249,258,248,258,248,255,249,255,249,254,250,254,250,250,251,250" />
	<area id="NLE" alt="NLE" title="Nuevo León" class="area" href="#" shape="poly" coords="347,170,347,169,348,169,348,168,350,168,350,167,354,167,354,166,355,166,355,164,356,164,356,160,357,160,357,158,356,158,356,155,355,155,355,154,350,154,350,155,350,153,351,153,351,152,352,152,352,151,354,151,354,150,356,150,356,149,359,149,359,148,360,148,360,146,361,146,361,142,362,142,362,141,364,141,364,142,365,142,365,143,369,143,369,142,370,142,370,141,371,141,371,140,372,140,372,141,370,141,370,142,369,142,369,144,368,144,368,147,370,147,370,148,371,148,371,150,372,150,372,153,373,153,373,161,375,161,374,161,374,166,377,166,377,167,378,167,378,168,379,168,379,172,380,172,380,174,381,174,381,175,383,175,383,176,384,176,384,179,385,179,385,180,386,180,386,181,388,181,388,180,388,181,390,181,390,182,397,182,397,193,398,193,398,194,400,194,399,194,399,195,398,195,398,196,397,196,397,197,395,197,395,198,394,198,394,199,393,199,393,200,391,200,391,201,389,201,389,202,386,202,386,203,385,203,385,204,384,204,384,208,383,208,383,209,381,209,381,210,379,210,379,211,378,211,378,212,377,212,377,213,375,213,375,214,373,214,373,215,372,215,372,217,373,217,373,218,374,218,374,219,375,219,375,221,374,221,374,227,375,227,375,229,376,229,376,230,377,230,377,233,374,233,374,234,369,234,369,235,368,235,368,237,367,237,367,242,365,242,365,243,364,243,364,244,363,244,363,246,359,246,359,247,358,247,358,234,357,234,357,232,356,232,356,230,355,230,355,221,354,221,354,219,353,219,353,218,352,218,352,216,351,216,351,209,352,209,352,207,351,207,351,205,350,205,350,203,351,203,351,202,352,202,352,201,363,201,363,197,362,197,362,196,359,196,359,195,358,195,358,194,356,194,356,193,355,193,355,191,354,191,354,190,353,190,353,189,352,189,352,188,351,188,351,187,350,187,350,186,349,186,349,180,348,180,348,178,347,178,347,176,346,176,346,175,345,175,345,174,344,174,344,173,343,173,344,173,344,172,345,172,345,171,346,170,347,170" />
	<area id="OAX" alt="OAX" title="Oaxaca" class="area" href="#" shape="poly" coords="447,356,447,357,448,357,448,359,449,359,449,361,450,361,450,362,451,362,451,364,452,364,452,365,453,365,453,366,455,366,455,367,461,367,461,368,462,368,462,373,461,373,461,379,462,379,462,380,463,380,463,381,464,381,464,382,470,382,470,381,472,381,472,380,473,380,473,379,475,379,475,378,476,378,476,381,477,381,477,382,478,382,478,383,479,383,479,384,480,384,480,385,482,385,482,386,484,386,484,389,492,389,492,390,507,390,507,391,506,391,506,394,505,394,505,397,504,397,504,399,503,399,503,402,502,402,502,409,503,409,503,411,504,411,504,415,505,415,504,415,504,414,502,414,502,413,499,413,499,412,496,412,496,411,491,411,494,411,494,409,493,409,493,408,492,408,492,407,490,407,490,408,488,408,488,409,488,406,485,406,485,407,483,407,483,411,484,411,484,412,485,412,478,412,478,413,476,413,476,414,475,414,475,415,474,415,474,416,473,416,473,417,470,417,470,418,468,418,468,419,465,419,465,420,462,420,462,421,460,421,460,422,458,422,458,423,456,423,456,424,454,424,454,425,445,425,445,424,442,424,442,423,439,423,439,422,437,422,437,421,435,421,435,420,432,420,432,419,424,419,424,418,418,418,418,417,416,417,416,416,415,416,415,415,414,415,414,414,412,414,412,413,410,413,410,412,404,412,404,411,405,411,405,410,406,410,406,409,407,409,407,408,408,408,408,407,409,407,409,406,410,406,410,405,411,405,411,404,412,404,412,403,413,403,413,402,414,402,414,401,415,401,415,399,414,399,414,395,413,395,413,393,412,393,412,392,411,392,411,391,410,391,410,390,409,390,409,389,408,389,408,388,407,388,407,385,406,385,406,374,407,374,407,373,408,373,408,372,412,372,412,373,418,373,418,370,417,370,417,366,418,366,418,365,419,365,419,367,420,367,420,368,421,368,421,370,422,370,422,371,425,371,425,370,426,370,426,369,437,369,437,368,438,368,438,367,439,367,439,366,440,366,440,365,441,365,441,363,442,363,442,362,443,362,443,360,444,360,444,356,447,356" />
	<area id="PUE" alt="PUE" title="Puebla" class="area" href="#" shape="poly" coords="417,309,417,307,418,307,418,306,419,306,419,309,420,309,420,310,421,310,421,311,422,311,422,312,423,312,420,312,420,313,419,313,419,322,420,322,420,323,421,323,421,324,426,324,426,323,427,323,427,321,427,322,429,322,429,323,431,323,430,323,430,325,429,325,429,327,428,327,428,330,427,330,427,333,426,333,426,340,427,340,427,341,429,341,429,342,432,342,432,343,434,343,430,343,430,344,428,344,428,349,427,349,427,351,426,351,426,356,427,356,427,357,429,357,429,358,430,358,430,359,431,359,431,361,432,361,432,362,437,362,437,361,438,361,438,363,439,363,439,364,438,364,438,365,436,365,436,366,434,366,434,367,423,367,423,366,422,366,422,363,421,363,421,362,418,362,418,363,417,363,417,364,416,364,416,365,415,365,415,366,414,366,414,370,415,370,415,371,414,371,414,370,406,370,406,371,404,371,404,372,404,371,402,371,402,370,399,370,399,369,397,369,397,368,396,368,396,367,395,367,395,366,394,366,394,365,393,365,393,364,391,364,393,364,393,363,395,363,395,362,396,362,396,363,398,363,398,362,399,362,399,358,400,358,400,354,399,354,400,354,400,339,402,339,402,340,403,340,403,342,404,342,404,343,405,343,405,344,407,344,407,345,413,345,413,344,417,344,417,343,418,343,418,342,421,342,421,341,422,341,422,339,421,339,421,337,419,337,419,336,417,336,417,334,416,334,416,333,414,333,414,332,412,332,412,331,411,331,411,330,410,330,410,327,411,327,411,324,412,324,412,319,411,319,411,318,410,318,411,318,411,317,412,317,412,316,414,316,414,314,415,314,415,313,416,313,416,309,417,309" />
	<area id="QUE" alt="QUE" title="Queretaro" class="area" href="#" shape="poly" coords="384,287,385,287,385,290,386,290,386,292,387,292,387,293,388,293,388,294,387,294,387,295,385,295,385,296,385,295,382,295,382,296,381,296,381,298,380,298,380,301,379,301,379,302,378,302,378,304,377,304,377,307,376,307,376,308,374,308,374,309,372,309,372,310,371,310,371,315,370,315,370,316,369,316,369,319,368,319,368,320,367,320,367,321,366,321,366,322,366,320,365,320,365,319,364,319,364,318,363,318,363,317,362,317,362,316,361,316,361,315,360,315,360,314,359,314,359,312,358,312,358,309,357,309,357,306,356,306,357,306,357,304,359,304,359,303,363,303,363,302,363,303,366,303,366,301,367,301,367,299,368,299,368,297,369,297,369,296,369,297,373,297,373,296,375,296,375,292,374,292,374,291,373,291,373,290,374,290,374,288,374,289,376,289,376,290,378,290,378,291,382,291,382,289,383,289,383,287,384,286,384,287" />
	<area id="ROO" alt="ROO" title="Quintana Roo" class="area" href="#" shape="poly" coords="610,320,610,319,611,319,611,318,612,318,612,317,614,317,614,316,615,316,615,315,616,315,616,314,618,314,618,313,619,313,619,312,621,312,621,311,622,311,622,310,623,310,623,309,625,309,625,308,626,308,626,307,627,307,627,306,629,306,629,305,630,305,630,304,631,304,631,303,633,303,633,302,634,302,634,301,635,301,635,300,636,300,636,299,638,299,638,298,639,298,639,297,640,297,640,296,641,296,641,295,642,295,642,292,643,292,643,289,644,289,644,278,647,278,647,277,649,277,649,274,639,274,648,274,648,273,652,273,652,274,653,274,653,275,655,275,655,276,657,276,657,278,658,278,658,281,659,281,659,283,660,283,659,283,659,285,658,285,658,287,657,287,657,289,656,289,656,291,655,291,655,293,654,293,654,294,653,294,653,295,652,295,652,296,651,296,651,297,650,297,650,299,649,299,649,301,648,301,648,303,647,303,647,305,646,305,646,314,644,314,644,317,643,317,643,318,641,318,641,321,642,321,642,322,645,322,645,321,648,321,648,320,648,321,647,321,647,323,646,323,646,324,645,324,645,325,643,325,643,327,642,327,642,329,643,329,643,330,645,330,645,329,647,329,646,329,646,330,645,330,645,337,644,337,644,344,643,344,643,350,642,350,642,353,642,352,641,352,641,349,640,349,640,348,639,348,639,347,637,347,637,345,638,345,638,340,639,340,639,338,638,338,638,337,636,337,636,338,635,338,635,339,634,339,634,340,633,340,633,345,632,345,632,347,631,347,631,348,629,348,629,349,627,349,627,350,626,350,626,352,625,352,625,354,624,354,624,356,623,356,623,358,622,358,622,360,621,360,621,362,620,362,620,364,618,364,618,363,617,363,617,362,614,362,614,363,613,363,613,365,612,365,612,367,610,367,610,366,609,366,609,357,608,357,608,345,607,345,607,335,606,335,606,327,605,327,605,323,606,323,606,322,607,322,607,321,608,320,610,320" />
	<area id="SIN" alt="SIN" title="Sinaloa" class="area" href="#" shape="poly" coords="192,153,192,154,198,154,198,153,198,155,199,155,199,158,200,158,200,162,201,162,201,168,202,168,202,171,203,171,203,172,204,172,204,173,208,173,208,174,211,174,211,177,212,177,212,179,213,179,213,180,214,180,214,181,215,181,215,183,216,183,216,187,215,187,215,198,216,198,216,202,217,202,217,203,218,203,218,205,219,205,219,206,220,206,220,207,221,207,221,208,222,208,222,210,223,210,223,211,224,211,224,213,225,213,225,215,226,215,226,217,227,217,227,218,231,218,231,217,234,217,234,218,235,218,235,219,236,219,236,221,237,221,237,223,238,223,238,228,239,228,239,233,240,233,240,235,241,235,241,239,242,239,242,240,243,240,243,242,244,242,244,244,245,244,245,245,246,245,246,246,248,246,248,247,249,247,249,248,248,248,248,251,247,251,247,253,246,253,246,261,247,261,245,261,245,260,244,260,244,258,243,258,243,257,242,257,242,256,240,256,240,257,240,256,239,256,239,255,238,255,238,254,237,254,237,252,236,252,236,250,235,250,235,249,234,249,234,248,233,248,233,247,231,247,231,249,231,247,230,247,230,245,229,245,229,244,228,244,228,243,227,243,227,242,226,242,226,240,225,240,225,239,224,239,224,238,223,238,223,236,222,236,222,234,221,234,221,232,220,232,220,230,219,230,219,229,218,229,218,228,217,228,217,227,216,227,216,226,215,226,215,223,214,223,214,222,213,222,213,221,211,221,211,220,209,220,209,219,207,219,207,218,206,218,206,217,205,217,205,216,204,216,204,215,203,215,207,215,207,212,206,212,206,211,201,211,201,210,198,210,198,209,197,209,197,208,196,208,197,208,197,202,195,202,195,205,193,205,193,206,193,205,192,205,192,203,191,203,191,201,190,201,190,200,190,201,191,201,191,203,193,203,193,202,196,202,196,199,195,199,195,198,193,198,193,197,192,197,192,196,191,196,191,195,189,195,189,194,187,194,187,193,186,193,186,192,185,192,185,191,184,191,184,190,183,190,183,188,182,188,182,186,181,186,181,185,179,185,179,186,177,186,177,187,175,187,175,186,176,186,176,185,177,185,177,183,176,183,176,182,174,182,174,183,171,183,171,184,171,183,170,183,170,182,169,182,170,182,170,180,169,180,169,179,168,179,168,178,169,178,169,175,168,175,168,174,169,174,169,172,170,172,170,170,170,171,172,171,172,170,173,170,173,169,173,171,176,171,176,167,177,167,177,166,178,166,178,165,180,165,180,164,181,164,181,163,183,163,183,162,184,162,184,161,185,161,185,160,186,160,186,159,187,159,187,158,188,158,188,157,189,157,189,156,190,156,190,155,191,155,191,153,192,153" />
	<area id="SLP" alt="SLP" title="San Luis Potosí" class="area" href="#" shape="poly" coords="347,221,347,220,348,220,348,219,349,219,349,218,349,219,350,219,350,220,351,220,351,221,352,221,352,230,353,230,353,232,354,232,354,234,355,234,355,248,356,248,356,249,357,249,357,250,360,250,360,249,363,249,363,250,365,250,365,251,367,251,367,254,366,254,366,259,367,259,367,260,369,260,369,261,372,261,372,262,376,262,376,263,379,263,379,262,380,262,380,263,381,263,381,264,382,264,382,266,383,266,383,267,384,267,384,268,387,268,387,269,401,269,401,270,402,270,402,271,403,271,403,272,402,272,402,275,401,275,401,276,400,276,400,280,401,280,401,282,400,282,400,283,399,283,399,288,400,288,400,289,398,289,398,293,394,293,394,292,392,292,392,291,389,291,389,289,388,289,388,287,387,287,387,285,386,285,386,284,382,284,382,285,381,285,381,286,380,286,380,288,378,288,378,287,376,287,376,286,372,286,372,287,371,287,371,288,370,288,370,287,367,287,367,286,365,286,365,285,364,285,364,284,357,284,357,285,356,285,356,286,355,286,355,287,353,287,353,286,352,286,352,285,350,285,350,284,349,284,349,283,348,283,348,282,343,282,343,281,341,281,341,280,337,280,337,279,338,279,338,276,339,276,339,268,338,268,338,267,339,267,339,264,340,264,340,262,339,262,339,259,338,259,338,258,337,258,337,257,334,257,334,259,333,259,333,261,331,261,331,262,328,262,328,261,327,261,327,260,326,260,326,259,325,259,325,258,323,258,323,257,322,257,322,256,321,256,321,255,320,255,320,250,319,250,319,247,318,247,318,246,319,246,319,245,322,245,322,244,327,244,327,243,329,243,329,242,330,242,330,241,332,241,332,240,333,240,333,239,334,239,334,238,335,238,335,237,336,237,336,236,337,236,337,235,338,235,338,234,339,234,339,232,340,232,340,231,341,231,341,229,342,229,342,227,341,227,341,225,345,225,345,222,346,221,347,221" />
	<area id="SON" alt="SON" title="Sonora" class="area" href="#" shape="poly" coords="72,9,72,8,74,8,74,9,76,9,76,10,78,10,78,11,80,11,80,12,82,12,82,13,84,13,84,14,86,14,86,15,87,15,87,16,90,16,90,17,91,17,91,18,93,18,93,19,95,19,95,20,97,20,97,21,99,21,99,22,101,22,101,23,103,23,103,24,105,24,105,25,106,25,106,26,108,26,108,27,110,27,110,28,112,28,112,29,114,29,114,30,116,30,116,31,118,31,118,32,120,32,120,33,121,33,121,34,123,34,123,35,125,35,125,36,127,36,127,37,129,37,129,38,131,38,131,39,133,39,133,40,135,40,135,41,137,41,137,42,139,42,139,43,141,43,141,44,143,44,143,45,146,45,146,46,156,46,156,47,166,47,166,48,177,48,177,49,188,49,188,50,189,50,189,56,190,56,190,63,191,63,191,68,192,68,192,73,193,73,193,80,192,80,192,92,191,92,191,93,190,93,190,94,189,94,189,118,190,118,189,118,189,119,180,119,180,120,179,120,179,125,180,125,180,128,181,128,181,130,182,130,182,132,183,132,183,134,184,134,184,136,185,136,185,138,186,138,186,148,187,148,187,150,188,150,188,151,189,151,189,152,188,152,188,154,187,154,187,155,186,155,186,156,185,156,185,158,183,158,183,159,182,159,182,160,181,160,181,161,180,161,180,162,178,162,178,163,176,163,176,164,175,164,175,165,175,162,172,162,172,164,171,164,171,165,171,162,172,162,172,160,171,160,171,159,170,159,170,158,169,158,169,157,168,157,169,157,169,154,168,154,168,153,166,153,166,154,166,153,164,153,164,154,162,154,162,153,161,153,161,151,160,151,160,149,159,149,159,147,160,147,160,145,158,145,158,144,154,144,154,143,151,143,151,142,149,142,149,141,148,141,148,140,147,140,147,138,146,138,146,134,145,134,145,131,146,131,146,125,145,125,145,124,141,124,141,121,140,121,140,120,138,120,138,123,137,123,137,122,136,122,136,120,133,120,133,118,132,118,132,115,131,115,131,113,130,113,130,112,129,112,129,111,127,111,127,110,126,110,126,109,125,109,125,107,124,107,124,106,123,106,123,104,122,104,122,103,124,103,124,101,121,101,121,100,120,100,120,99,119,99,119,98,118,98,118,97,117,97,117,91,116,91,116,89,115,89,115,88,114,88,114,87,113,87,113,86,112,86,112,80,111,80,111,79,110,79,110,77,109,77,109,76,108,76,108,75,107,75,107,64,106,64,106,62,105,62,105,61,104,61,104,60,103,60,103,57,102,57,102,54,101,54,101,52,100,52,100,51,99,51,99,49,98,49,98,45,97,45,97,41,96,41,96,40,97,40,97,36,96,36,96,35,94,35,94,37,94,36,93,36,93,35,88,35,88,34,84,34,84,33,83,33,83,30,82,30,82,29,81,29,81,28,80,28,80,27,77,27,77,26,75,26,75,25,74,25,74,23,73,23,73,22,72,22,72,21,71,21,71,9,72,9" />
	<area id="TAB" alt="TAB" title="Tabasco" class="area" href="#" shape="poly" coords="513,360,513,358,517,358,517,357,520,357,520,358,524,358,524,357,526,357,526,356,529,356,529,355,530,355,530,354,532,354,532,353,533,353,533,352,534,352,534,351,536,351,536,354,537,354,537,355,541,355,541,356,542,356,542,357,543,357,543,363,544,363,544,364,545,364,545,365,547,365,547,366,549,366,549,367,550,367,550,368,558,368,558,364,562,364,562,365,565,365,565,366,570,366,570,368,571,368,571,382,572,382,564,382,564,380,563,380,563,379,561,379,561,378,559,378,559,377,558,377,558,373,557,373,557,372,555,372,555,371,554,371,554,370,552,370,552,369,551,369,551,368,546,368,546,369,542,369,542,370,541,370,541,371,540,371,540,372,539,372,539,373,538,373,538,374,537,374,537,376,536,376,536,377,535,377,535,378,534,378,534,380,532,380,532,379,529,379,529,378,528,378,528,377,527,377,527,372,526,372,526,370,525,370,525,369,524,369,524,368,523,368,523,367,519,367,519,368,517,368,517,370,516,370,516,376,515,376,515,377,514,377,514,379,513,379,513,381,513,379,512,379,512,377,511,377,511,376,510,376,510,375,509,375,509,374,507,374,507,373,506,373,506,371,505,371,505,370,504,370,504,368,503,368,503,364,502,364,503,364,503,363,504,363,504,362,505,362,505,363,507,363,507,362,509,362,509,361,511,360,513,360" />
	<area id="TAM" alt="TAM" title="Tamaulipas" class="area" href="#" shape="poly" coords="385,211,385,210,386,210,386,206,387,206,387,205,388,205,388,204,392,204,392,203,393,203,393,202,395,202,395,201,396,201,396,200,397,200,397,199,399,199,399,198,400,198,400,197,401,197,401,196,402,196,402,192,400,192,400,191,399,191,399,180,398,180,398,179,391,179,391,178,387,178,387,177,386,177,386,174,385,174,385,173,383,173,383,172,382,172,382,166,381,166,381,165,380,165,380,164,377,164,377,159,375,159,375,150,374,150,374,148,373,148,373,146,372,146,372,145,371,145,371,144,373,144,373,143,375,143,375,142,376,142,376,143,377,143,377,145,378,145,378,151,379,151,379,157,380,157,380,159,381,159,381,163,383,163,383,166,384,166,384,167,385,167,385,169,386,169,386,171,387,171,387,172,391,172,391,173,393,173,393,174,394,174,394,175,396,175,396,176,401,176,401,177,403,177,403,178,404,178,404,179,406,179,406,180,416,180,416,181,418,181,418,182,419,182,419,183,420,183,420,184,422,184,422,185,424,185,424,184,425,184,425,183,426,183,426,182,427,182,427,186,426,186,426,189,425,189,425,192,424,192,424,195,423,195,423,198,422,198,422,201,421,201,421,203,420,203,420,206,419,206,419,210,418,210,418,216,417,216,417,218,417,214,418,214,418,209,419,209,419,206,420,206,420,203,421,203,421,200,422,200,422,198,423,198,423,194,422,194,422,193,420,193,420,196,419,196,419,197,419,196,418,196,418,195,416,195,416,196,415,196,415,200,416,200,415,200,415,202,416,202,415,202,415,206,416,206,416,207,415,207,415,212,416,212,416,213,415,213,415,212,413,212,413,218,414,218,414,222,416,222,416,221,416,225,415,225,415,227,414,227,414,246,415,246,415,253,416,253,416,254,415,254,415,259,413,259,413,262,412,262,412,265,414,265,414,269,414,268,412,268,412,267,411,267,411,266,410,266,410,265,404,265,404,266,386,266,386,265,385,265,385,263,384,263,384,262,383,262,383,261,382,261,382,260,381,260,381,259,377,259,377,260,375,260,375,259,372,259,372,258,369,258,369,256,368,256,369,256,369,255,370,255,370,251,369,251,369,249,368,249,368,248,366,248,366,245,369,245,369,241,370,241,370,237,371,237,371,236,378,236,378,235,379,235,379,233,380,233,380,230,379,230,379,228,378,228,378,227,377,227,377,217,376,217,376,216,375,216,377,216,377,215,379,215,379,214,380,214,380,213,381,213,381,212,383,211,385,211" />
	<area id="TLA" alt="TLA" title="Tlaxcala" class="area" href="#" shape="poly" coords="401,335,401,334,407,334,407,333,409,333,409,334,412,334,412,335,413,335,413,336,414,336,414,337,415,337,415,338,417,338,417,339,418,339,417,339,417,340,415,340,415,341,411,341,411,342,410,342,410,343,409,343,409,342,407,342,407,341,406,341,406,339,405,339,405,338,404,338,404,337,403,337,403,336,400,335,401,335" />
	<area id="VER" alt="VER" title="Veracruz" class="area" href="#" shape="poly" coords="431,330,431,328,432,328,432,326,433,326,433,325,434,325,434,322,433,322,433,321,431,321,431,320,429,320,429,319,425,319,425,320,424,320,424,322,424,321,422,321,422,320,421,320,421,316,422,316,422,315,424,315,424,314,425,314,425,310,424,310,424,309,422,309,422,307,421,307,421,304,416,304,416,305,415,305,415,306,414,306,414,308,410,308,410,309,409,309,409,310,408,310,408,311,407,311,407,312,406,312,406,313,405,313,405,314,403,314,403,315,403,313,402,313,403,313,403,310,404,310,404,307,403,307,404,307,404,306,405,306,405,305,409,305,409,302,410,302,410,299,411,299,411,297,410,297,410,296,408,296,408,294,404,294,404,293,403,293,403,288,402,288,402,286,401,286,401,285,402,285,402,284,403,284,403,277,404,277,404,275,405,275,405,273,406,273,406,270,405,270,405,269,404,269,404,268,403,268,407,268,407,267,408,267,408,268,409,268,409,269,411,269,411,270,412,270,412,271,413,271,413,272,415,272,415,273,416,273,416,275,417,275,417,278,418,278,418,281,419,281,419,283,420,283,420,285,421,285,421,287,422,287,422,289,423,289,423,290,424,290,424,292,425,292,425,295,427,295,427,286,426,286,426,284,425,284,425,283,424,283,424,282,423,282,423,281,422,281,422,280,421,280,421,279,421,280,422,280,422,281,423,281,423,282,424,282,424,283,425,283,425,284,426,284,426,285,427,285,427,297,428,297,428,300,429,300,429,303,430,303,430,306,431,306,431,307,432,307,432,308,433,308,433,309,434,309,434,310,435,310,435,312,436,312,436,313,437,313,437,314,438,314,438,315,439,315,439,316,440,316,440,317,441,317,441,319,442,319,442,320,443,320,443,322,444,322,444,323,445,323,445,325,446,325,446,327,447,327,447,328,448,328,448,331,449,331,449,336,450,336,450,338,451,338,451,339,452,339,452,340,453,340,453,341,454,341,454,342,455,342,455,343,456,343,456,344,457,344,457,345,458,345,458,346,459,346,459,347,460,347,460,348,461,348,461,349,463,349,461,349,461,352,466,352,466,351,476,351,476,352,477,352,477,353,479,353,479,354,480,354,480,355,482,355,482,356,484,356,484,357,486,357,486,359,487,359,487,361,488,361,488,363,489,363,489,364,491,364,491,365,496,365,496,364,500,364,500,366,501,366,501,371,502,371,502,372,503,372,503,373,504,373,504,374,505,374,505,375,506,375,506,376,507,376,507,377,508,377,508,378,509,378,509,379,510,379,510,381,511,381,511,384,512,384,512,385,510,385,510,386,508,386,508,387,486,387,486,385,485,385,485,384,484,384,484,383,482,383,482,382,481,382,481,381,480,381,480,380,479,380,479,379,478,379,478,378,479,378,479,376,478,376,478,375,475,375,475,376,473,376,473,377,471,377,471,378,470,378,470,379,468,379,468,380,466,380,466,379,464,379,464,377,463,377,463,374,464,374,464,372,465,372,465,369,464,369,464,366,463,366,463,365,462,365,462,364,455,364,455,363,454,363,454,362,453,362,453,360,452,360,452,359,451,359,451,357,450,357,450,356,449,356,449,355,448,355,448,354,446,354,446,353,442,353,442,358,441,358,441,360,440,360,440,361,440,359,434,359,434,360,434,359,433,359,433,357,432,357,432,356,431,356,431,355,429,355,429,354,428,354,428,353,429,353,429,352,430,352,430,349,431,349,431,346,433,346,433,345,435,345,435,344,436,344,436,341,435,341,435,340,431,340,431,339,429,339,429,337,428,337,428,336,429,336,429,332,430,332,430,330,431,330" />
	<area id="YUC" alt="YUC" title="Yucatán" class="area" href="#" shape="poly" coords="610,281,610,280,612,280,612,279,614,279,614,278,616,278,616,277,618,277,618,276,621,276,621,275,633,275,633,276,637,276,637,277,639,277,639,278,640,278,640,279,641,279,641,283,642,283,642,285,641,285,641,289,640,289,640,292,639,292,639,294,638,294,638,295,637,295,637,296,636,296,636,297,635,297,635,298,633,298,633,299,632,299,632,300,630,300,630,301,629,301,629,302,628,302,628,303,627,303,627,304,625,304,625,305,624,305,624,306,622,306,622,307,621,307,621,308,620,308,620,309,618,309,618,310,617,310,617,311,616,311,616,312,614,312,614,313,613,313,613,314,612,314,612,315,610,315,610,316,609,316,609,317,608,317,608,318,606,318,606,319,605,319,605,320,603,320,603,319,602,319,602,318,601,318,601,317,600,317,600,316,599,316,599,315,598,315,598,313,597,313,597,312,596,312,596,311,595,311,595,310,594,310,594,309,593,309,593,308,592,308,592,307,591,307,591,306,590,306,590,305,589,305,589,304,585,304,585,305,582,305,582,299,581,299,581,296,580,296,580,295,581,295,581,293,582,293,582,291,583,291,583,290,585,290,585,289,586,289,586,288,588,288,588,287,589,287,589,286,592,286,592,285,594,285,594,284,597,284,597,283,600,283,600,282,606,281,610,281" />
	<area id="ZAC" alt="ZAC" title="Zacatecas" class="area" href="#" shape="poly" coords="318,202,318,203,322,203,322,204,325,204,325,205,328,205,328,206,329,206,329,207,330,207,330,208,331,208,331,209,332,209,332,210,333,210,333,211,339,211,339,212,340,212,340,213,341,213,341,215,342,215,342,216,344,216,344,217,347,217,346,217,346,218,345,218,345,219,344,219,344,220,343,220,343,222,340,222,340,223,339,223,339,228,338,228,338,230,337,230,337,231,336,231,336,232,335,232,335,234,334,234,334,235,333,235,333,236,332,236,332,237,331,237,331,238,330,238,330,239,328,239,328,240,327,240,327,241,323,241,323,242,319,242,319,243,317,243,317,244,316,244,316,245,315,245,315,248,316,248,316,249,317,249,317,256,318,256,318,257,319,257,319,258,320,258,320,259,321,259,321,260,323,260,323,261,324,261,324,262,325,262,325,263,326,263,326,265,327,265,327,266,329,266,329,265,332,265,332,264,334,264,334,263,335,263,335,262,336,262,336,260,336,262,337,262,337,264,336,264,336,265,335,265,335,268,336,268,336,271,337,271,337,274,336,274,336,277,335,277,335,278,334,278,334,279,334,278,333,278,333,277,331,277,331,276,329,276,329,275,326,275,326,274,325,274,325,271,324,271,324,270,323,270,323,268,322,268,322,267,321,267,321,266,320,266,320,265,316,265,316,266,315,266,315,267,313,267,313,268,310,268,310,269,309,269,309,270,308,270,308,271,306,271,306,272,305,272,305,273,303,273,303,275,302,275,302,283,303,283,303,285,304,285,304,286,306,286,306,287,307,287,307,291,306,291,306,292,304,292,304,293,303,293,303,294,299,294,299,295,285,295,285,294,283,294,283,293,284,293,284,290,285,290,285,288,286,288,286,287,287,287,287,285,288,285,288,283,289,283,289,280,293,280,293,279,295,279,295,277,296,277,296,276,297,276,297,274,298,274,298,272,299,272,299,265,298,265,298,264,291,264,291,265,290,265,290,269,289,269,289,270,287,270,287,268,288,268,288,264,289,264,289,261,288,261,288,260,287,260,287,259,286,259,286,258,287,258,287,256,286,256,286,255,279,255,279,260,280,260,280,261,277,261,277,252,278,252,278,245,279,245,279,242,280,242,280,240,281,240,281,239,282,239,282,238,284,238,284,237,285,237,285,228,286,228,286,227,288,227,288,226,289,226,289,225,290,225,290,224,291,224,291,223,292,223,292,221,293,221,293,220,294,220,294,219,301,219,301,220,315,220,315,207,314,207,314,204,313,204,313,202,318,202" />
</map>
<div id='content_mapa'>
<div id="edo" style="color: green ;z-index: 2;position: absolute;margin-top: 20px;margin-left: 350px;font-size: 2em;"></div>
<img class="map" src="images/mapa.png" usemap="#mexico" title="Mexico" alt="Mexico" />
</div>
    </form>
</body>
</html>

 

No olvides dejarnos los comentarios, dudas y si tienes alguna otra opción te agradecemos que la compartas.

Descarga el ejemplo aquí.

Artículos relacionados
13 Comentarios
  • Cesar Comentar
    Tuesday, August 26, 2014

    hola, tengo una duda.. si quisiera poner una imagen en cada estado que me posiciono como le haria?

  • Alberto Saint Comentar
    Monday, December 8, 2014

    Gracias por compartir, funciona perfecto!!

  • Ivan Comentar
    Tuesday, March 3, 2015

    Muchas gracias, este mapa me va a funcionar muy bien para mi proyecto

  • Noe Comentar
    Monday, March 23, 2015

    Que tal, buen día, Les comento que estoy trabajando en un proyecto similar, pero el mapa que me solicitan es del estado de México. Me podrían comentar que tendría que hacer para adaptarlo. Espero me puedan ayudar, Saludos!

    • AlejandroComentar
      Thursday, June 11, 2015

      Noe, quizá ya resolviste el problema, pero ahí te va la idea básica. 1) Encuentra, adapta o realiza unaimagen del estado de México. 2) Busca en Google "create an image map online" y selecciona alguno de los servicios en línea para generar un mapa donde podrás crear las áreas y 3) Sustituye del código la imagen del mapa y las áreas que coinciden con tu imagen. Y listo! Por cierto que buscándole encontré un script mejor documentado y con muchas más opciones para proyectos más complejos: jquery.imagemapster.js

  • mariana Comentar
    Wednesday, September 9, 2015

    Hola, buena tarde, escribo este comentario porque quiero saber como divividr el mapa de la republica en regiones, ¿Que debo hacer para este caso? Ayudenme por favor

  • Mar Comentar
    Wednesday, September 30, 2015

    Y si quisiera que cuando pase el mouse encima mostrara informacion de un archivo en excel... Alguien ayudeme que no encuentro informacion :(

    • Estrada WebGroupComentar
      Wednesday, October 7, 2015

      Lo que tendrias que hacer es almacenra esa información en una base de datos y vincularla con cada estado de la republica. Despues hacer la consulta a la base de datos y con javascript hacer esa funcionalidad. Si me das más detalles vemos como te podemos ayudar. Saludos

  • Kevin cruz Comentar
    Saturday, February 13, 2016

    que tal. muy buen mapa tengo un codigo parecido al tuyo pero me gustaria que ese mapa sea adaptativo para una pagina web responsive. como podria hacerlos? Gracias

  • Randy Comentar
    Monday, February 22, 2016

    Hola, revisando el mapa vi que puede funcionar retirando el codigo ASPX y dejando solo el HTML + JQUERY, en teoria que hace el código? Que le aporta al mapa? Saludos

  • Anahi Comentar
    Wednesday, March 9, 2016

    Hola.!!! Me interesa visualizar la aplicación, me podrian indicar como hacerlo??

  • Iván Comentar
    Monday, May 23, 2016

    Hola, funciona muy bien, pero tengo un gran problema, quiero hacerlo responsivo, lo he intentado sin conseguir ningún resultado, podrás ayudarme por favor, ya que estoy haciendo un sitio responsive y eso incluye el mapa, de ante mando te lo agradezco. Saludos cordiales.

  • Urquhart Comentar
    Wednesday, March 14, 2018

    ¡Hola! Esto es algo fuera de tema mas necesito algunos consejos de un weblog establecido. ¿Es dificil crear tu propio weblog? No soy muy técnico, mas puedo solucionar las cosas bastante veloz. Pienso en crear el mío, pero no estoy seguro de por dónde empezar. ¿Tienes algún consejo o bien sugerencia? Gracias, volveré de nuevo desde el momento en que marqué esta página y lo twitteé a mis seguidores.

  • Waller Comentar
    Thursday, March 15, 2018

    Lo que ocurre Soy nuevo en esto, me encontré con esto. Lo hallé de forma positiva útil y me ha ayudado muchísimo. Tengo la esperanza de dar una contribución y asistir a otros usuarios como me asistió. Buen trabajo. ¡Volveré, ya que he marcado esta página como favorita y lo he twitteado a mis seguidores!

  • Weiland Comentar
    Thursday, March 22, 2018

    I have checked your page and i've found some duplicate content, that's why you don't rank high in google, but there is a tool that can help you to create 100% unique articles, search for: boorfe's tips unlimited content

Enviame un comentario