Marcando Coordenadas no Mapa com area shape poly
Autor: Andrea de Carvalho Costa Carvalho | Publicado: 2012-11-01T12:36:00-07:00

Olá Gente estava com um grande problema em &lt;? php
Era o seguinte tinha um mapa e querias saber as coordenadas dele, depois de quebrar a cabeça achei um código de um colega na internet que ensinava.
http://blogdofabiolima.blogspot.com/2009/01/mapeamento-de-imagens-em-html.html

Segue o código e o mapa;

&lt;html&gt;&lt;head&gt;&lt;script type="text/javascript"&gt;function coordenadas(event){var x=event.clientX;var y=event.clientY;var coord = x + "," + y;return coord;}function listar(event){var coord = coordenadas(event);var texto = document.getElementById("listacoord");texto.value += coord + ",";}&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;!-- AQUI VOCE COLOCA O ENDERECO DA IMAGEM QUE QUER MAPEAR --&gt;&lt;!-- SUBSTITUA "IMAGEM.JPG" PELA SUA IMAGEM --&gt;&lt;div align="center"&gt;&lt;img src="mapa_brasil.jpg" width="390" height="369" border="0" usemap="#Map3"style="border-style:none;position:absolute;top:0px;left:0px" onmousedown="listar(event)"&gt; &lt;/div&gt; &lt;p style="position:absolute;top:400px;"&gt;Clique na imagem para marcar as coordenadas.&lt;br/&gt;Copie estas coordenadas e cole dentro no atributo coords="" da tag &lt;AREA&gt;.&lt;br/&gt;Não esqueça de apagar a vírgula no final do da linha gerada.&lt;/p&gt;&lt;textarea type="text" style="position:relative;top:500px;" id="listacoord" cols="100" rows="8"&gt;&lt;/textarea&gt;&lt;/body&gt;&lt;/html&gt;



Depois surgiu um outro problema, como pegar as informações no banco de dados e colocar em cada estado correspondente?
Segue o código....

&lt;html&gt;&lt;body&gt;&lt;div id="contents"&gt;&lt;div id="main"&gt;&nbsp;&nbsp;&nbsp; &lt;?$sql="select * from homologacaobrasil";$query=mysql_query($sql);$total=mysql_num_rows($query);?&gt;&lt;div id="tit_pagina"&gt;&nbsp; &lt;p class="tahoma14azulb" style="margin-left:15px"&gt;Homologa&amp;ccedil;&amp;otilde;es&lt;/p&gt;&lt;/div&gt;&lt;div id="corpo_pagina"&gt;&lt;div id="texto" class="tahoma11preto" align="justify"&gt;&nbsp;&lt;p&gt;&lt;span class="tahoma11preto"&gt;Disponibilizamos aqui as homologa&amp;ccedil;&amp;otilde;es dos m&amp;oacute;dulos separado por estado.&lt;/span&gt;&lt;/p&gt;&lt;/div&gt;&lt;br /&gt;&lt;div align="center"&gt;&lt;img src="img/estados-homologados.jpg" style="position:relative;border-style:none;" width="400" height="352" usemap="#Map3"/&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;map name="Map3"&gt;&lt;?$i=0;while($linha=mysql_fetch_array($query)){ ?&gt;&lt;? if ($linha['recno']=='1'){ ?&gt; &lt;area shape="poly" href="javascript:alert('&lt;?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?&gt;')" coords="267,157,308,157,309,173,266,169" title="Bahia" alt="Ba" /&gt;&lt;? } ?&gt;&lt;? if ($linha['recno']=='2'){ ?&gt; &lt;area shape="poly" href="javascript:alert('&lt;?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?&gt;')" coords="152,216,186,218,186,252,152,252" title="Mato Grosso do Sul" alt="MS" /&gt;&lt;? } ?&gt;&lt;? if ($linha['recno']=='3'){ ?&gt; &lt;area shape="poly" href="javascript:alert('&lt;?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?&gt;')" coords="81,14,130,15,130,27,79,24" title="Roraima" alt="RR"/&gt;&lt;? } ?&gt;&lt;? if ($linha['recno']=='4'){ ?&gt; &lt;area shape="poly" href="javascript:alert('&lt;?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?&gt;')" coords="49,91,128,91,125,100,53,99" title="Amazonas" alt="AM" /&gt;&lt;? } ?&gt;&lt;? if ($linha['recno']=='5'){ ?&gt; &lt;area shape="poly" href="javascript:alert('&lt;?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?&gt;')" coords="201,201,224,202,225,209,199,209" title="Goias" alt="GO" /&gt;&lt;? } ?&gt;&lt;? if ($linha['recno']=='6'){ ?&gt; &lt;area shape="poly" href="javascript:alert('&lt;?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?&gt;')" coords="13,135,44,136,44,145,11,145" title="Acre" alt="AC" /&gt;&lt;? } ?&gt;&lt;? if ($linha['recno']=='7'){ ?&gt; &lt;area shape="poly" href="javascript:alert('&lt;?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?&gt;')" coords="331,139,367,140,332,145,365,144" title="Alagoas" alt="AL" /&gt;&lt;? } ?&gt;&lt;? if ($linha['recno']=='8'){ ?&gt; &lt;area shape="poly" href="javascript:alert('&lt;?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?&gt;')"&nbsp; coords="312,83,335,94,335,102,325,124,312,106" title="Ceará" alt="CE" /&gt;&lt;? } ?&gt;&lt;? if ($linha['recno']=='9'){ ?&gt; &lt;area shape="poly" href="javascript:alert('&lt;?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?&gt;')"&nbsp; coords="232,193,237,194,232,196,238,196" title="Distrito Federal" alt="DF" /&gt;&lt;? } ?&gt;&lt;? if ($linha['recno']=='10'){ ?&gt; &lt;area shape="poly" href="javascript:alert('&lt;?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?&gt;')" coords="297,229,356,227,295,232,359,237" title="Espirito Santo" alt="ES" /&gt;&lt;? } ?&gt;&lt;? if ($linha['recno']=='11'){ ?&gt; &lt;area shape="poly" href="javascript:alert('&lt;?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?&gt;')" coords= "259,65,241,100,258,142,284,109,288,74" title="Maranhao"alt="MA"&gt;&lt;? } ?&gt;&lt;? if ($linha['recno']=='12'){ ?&gt; &lt;area shape="poly" href="javascript:alert('&lt;?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?&gt;')" coords="248,214,276,214,248,220,276,220" title="Minas Gerais" alt="MG"&gt;&lt;? } ?&gt;&lt;? if ($linha['recno']=='13'){ ?&gt; &lt;area shape="poly" href="javascript:alert('&lt;?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?&gt;')" coords="166,87,208,88,208,105,161,103" title="Para" alt="PA"&gt;&lt;? } ?&gt;&lt;? if ($linha['recno']=='14'){ ?&gt; &lt;area shape="poly" href="javascript:alert('&lt;?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?&gt;')" coords="337,114,366,115,338,119,363,119" title="Paraiba" alt="PB"&gt;&lt;? } ?&gt;&lt;? if ($linha['recno']=='15'){ ?&gt; &lt;area shape="poly" href="javascript:alert('&lt;?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?&gt;')" coords="328,128,389,128,326,132,389,133" title="Pernambuco" alt="PE"&gt;&lt;? } ?&gt;&lt;? if ($linha['recno']=='16'){ ?&gt; &lt;area shape="poly" href="javascript:alert('&lt;?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?&gt;')" coords="334,95,359,96,328,102,362,104" title="Rio Grande do Norte" alt="RN"&gt;&lt;? } ?&gt;&lt;? if ($linha['recno']=='17'){ ?&gt; &lt;area shape="poly" href="javascript:alert('&lt;?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?&gt;')" coords="170,215,155,219,155,255,182,272,202,244,202,228,186,216" title="Rio Grande do Sul" alt="RS"&gt;&lt;? } ?&gt;&lt;? if ($linha['recno']=='18'){ ?&gt; &lt;area shape="poly" href="javascript:alert('&lt;?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?&gt;')" coords="136,225,135,227,148,229,162,240,167,233,166,219,151,224,134,224" title="Santa Catarina" alt="SC"&gt;&lt;? } ?&gt;&lt;? if ($linha['recno']=='19'){ ?&gt; &lt;area shape="poly" href="javascript:alert('&lt;?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?&gt;')" coords="206,239,233,244,211,259,234,272" title="Sao Paulo" alt="SP"&gt;&lt;? } ?&gt;&lt;? if ($linha['recno']=='20'){ ?&gt; &lt;area shape="poly" href="javascript:alert('&lt;?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?&gt;')" coords="329,152,358,151,327,154,358,154" title="Sergipe" alt="SE"&gt;&lt;? } ?&gt;&lt;?$i++;}?&gt;&lt;/map&gt;&lt;/div&gt;&lt;/div&gt;&lt;/html&gt;