[Resolvido] Material Google Maps com Mysql e Asp

kania · Junho 26, 2009

Olá pessoal, dei uma navegada pela wevb e plo forum enão achei nada que me parecesse ajudar, por isso resolvi abrir o post.

Assim tenho um bd em MySql que guarda as seguintes informações:

Endereço

Número

Bairro

Cidade

Estado

Com estas informações em mãos eu consigo utilizar a API do Google Maps para gerar um mapa no site a partir de um link, ou sej um botão e quando o usuário clicar ele gerar o mapa baseado nas informações acima.

Pelo que vi nos manuias da API do Google ele utiliza uma Latitude e Longitude, mas eu não tenho estas informações até porque no momento do cadastro eu nem sei se tem com guardar estas informações automáticamente no banco, então precos gerar o mapa direto com as info acima citada.

Até pensei em fazer da seguinte forma:

Criar um link para: http://maps.google.com.br/maps?f=q&sou...=18&iwloc=A

Onde eu pego os dados do endereço no banco e monto a url acima dinamicamente.

UrlMapa = "http://maps.google.com.br/maps?f=q&source=embed&hl=pt-BR&geocode=&q="&Rs("Endereco")&",+"&Rs("Numero")&",+"&Rs("Cidade")&"-+"&Rs("Estado")&"&ie=UTF8&t=h&z=18&iwloc=A"

É um mapa como o da url acima que quero montar.

Porem montar desta forma eu levo o usuário para a pagina do Google Maps, eu estou tentando é colcoar o mapa ou diretamente na pagina do meu site ou em uma div (com abertura ao clique), mas como fazer isto?

Alguém já fez ou sabe como fazer ou sabe onde posso encotrar um tutorial , achei alguns mas em Mysql e PHP, ou Asp.Net, mas nada que ajudasse em Asp Classico e Mysql

hargon · Junho 26, 2009

Mas se você tivesse a latitude e longitude facilitaria?

Pq antes de cadastrar você consegue pega essar informações no próprio GMap.

xanburzum · Junho 26, 2009

você pode até fazer uma "gambiarra" de abrir ele dentro de um iframe na sua page...

kania · Junho 27, 2009

Olá pessola, obrigado pelas respostas,

Então é assim, no caso se eu abrir no iframe, ele ainda assim vai abrir o site do Google Maps inteiro e não somente o mapa em sim como eu gostaria, e na questão de ter a Latitude e a Longitude, seria muito bom, porem como eu faço para pegar estes daos automáticmaente na hora de efetuar o cadastro do indivíduo, pq imagine depois docara se cadastrar eu ter que pegar o endereço dele, e colocar manualmente no banco estas informações, para que seja possivel gerar o mapa?

Bom só para ter uma idéia o banco hoje já tem 279 registros, só estes eu já teria que pegar um-a-um e colcoar a latitude e longitude de cada um manualemnte, fora os novos que estarão vindo, se tiver como fazer isto de forma automatizada.

Vi que tem alguns tutoriais no prórpio site do Maps http://code.google.com/intl/pt-BR/apis/map...n/articles.html porem pos que podereiam me auxuiliar estão em linguagem que conheço que é PHP com Mysql, não achei nenhum de ASP com PHP, seu no Asp.Net tem recursos para implmentar o Maps automáticamente pelo programa, mas preciso que seja via Asp calsico mesmo.

Se alguém conseguir me dar um força para aprender a desenvolver esta aplicação agradeço,a té porque pelo que vi seria interessante para deixarmos aqui no forum como um tutorial para futuros estudos, uma vez que não tem.

Salgado · Junho 27, 2009

No próprio site de suporte da API indica como colocar o mapa em sites: Ajuda da API.

Já adianto que é por i-frame, mas dá para controlar algumas coisas.

Patrique · Junho 27, 2009

Isto tem como sim, porém os resultados não vão sair 100% corretos assim como em latitude e longitude, o geocoding do google maps quando se trata de endereços é muito fraco, eu por exemplo quando coloco o endereço na minha casa com meu número e talz ele me manda para quase 100 metros de diferença, com a latitude e longitude isto não existe, especificando corretamente o local latitude e longitude o sistema vai apontar no local correto.

O problema é cadastrar estas informações, eu por exemplo fiz um sistema que faz isso quando o usuário estiver criando um perfil, no final o sistema pede para o usuário colocar o ponto no local exato de seu endereço.

Mais tem como buscar e mostrar o local no mapa direto no site sem usos de frames, porém como eu disse o google maps peca quando as infos são por endereços o mais correto é fazer por latitude e longitude.

Vou postar aqui como eu fiz...

Eu utilizo este code abaixo para montar o mapa no cadastro, note que eu coloquei uma cordenada, ela refere-se ao ponto central do mapa caso aconteça um erro de não encontrar um endereço, caso não encontre ela vai centrarizar nesta cordenada.

<script src="http://maps.google.com/maps?file=api&v=2&key=suachave" type="text/javascript" charset="utf-8"></script>

  <script type="text/javascript">

	var map = null;
	var geocoder = null;

	function initialize() {
	  if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map_canvas"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(-22.466717, -44.451591), 1);
		geocoder = new GClientGeocoder();
	  }
	}

	function showAddress(address) {
	  if (geocoder) {
		geocoder.getLatLng(
		  address,
		  function(point) {
			if (!point) {
			  alert(address + " não foi encontrado, por isso o sistema ira centralizar a seta na cidade e você tera que fazer o processo manualmente arrastando");
			  showAddress("Resende RJ");
			} else {
			  map.setCenter(point, 15);
			  var marker = new GMarker(point, {draggable: true});
			  map.addOverlay(marker);
			  GEvent.addListener(marker, "dragend", function() {
				document.frmGravar.coordenada.value = marker.getLatLng().toUrlValue(6);
			  });
			  GEvent.addListener(marker, "click", function() {
			  });
			  document.frmGravar.coordenada.value = marker.getLatLng().toUrlValue(6);
		  GEvent.trigger(marker, "click");
			}
		  }
		);
	  }
	}
	</script>

Dai eu utilizo o code abaixo para montar os dados do endereço do fulano...

<%
Endereco = Session("cadastroendereco")
Numero = Session("cadastronumero")
Cidade = Session("cadastrocidade")
Estado = Session("cadastroestado")

Montagem = Endereco & ", " & Numero & " " & Cidade & " " & Estado
%>

depois eu monto a parte html...

<body onload="initialize();showAddress('<%=Montagem%>');" onunload="GUnload()">

 <!-- começo do conteudo central -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
	<td width="50%" valign="top" style="padding:10px">
	  <span style="font-size:18px; color:#5F5F5F;"><strong><%=Session("cadastroapelido")%></strong> você está a um passo de finalizar o cadastro!</span>
	  <br>
	  <div style="font-size:14px;color:#444;padding-top:6px;">De acordo com os dados fornecidos por você na etapa anterior, o sistema irá tentar localizar a sua localização, note que uma marcação será feita no centro do mapa, você pode clicar e arrastar esta marcação para o local exato da sua localização.</div>
	  <br />
	  <strong><font color="red">Estes dados não serão informados em hipótese alguma a ninguém, o único que tera acessos a estes dados será você</font></strong>
	  <br /><br />
	  <strong>* Os campos em negritos são obrigatórios</strong>
	  <br /><br />
	  <%=Montagem%>
	  <br /><br />
	  <div id="map_canvas" style="width: 914px; height: 400px"></div>

	<br />
	<form action="/cadastro/finalizacao/index.asp" method="post" name="frmGravar">
	<input type="hidden" name="coordenada" id="coordenada" />
	<input type="submit" name="Gravar" value="Finalizar Cadastro" class="btn" />
	</form>
	</td>
  </tr>
</table>

O sistema ira montar o mapa na propria tele de acordo com as informações postadas na página anterior, eu utilizo esta parte na finalização, caso o sistema encontre um endereço ele vai colocar uma seta no mapa... é nesta hora que você tem que colocar a seta no local correto, para isso clique na setinha e a arraste até o local exato, feito isso os dados das cordenadas vão ficar no campo "coodernada", feito isso os dados da cordenada do local ficara gravado, dai basta mandar para o bd.

kania · Junho 27, 2009

Olá pessoal, bom estou quase lá.

Consegui desenvolver a API do Google Maps em ASP e Mysql, só que ainda estou com um problema na exibição do mapa no IE, somente no Ie no Firefox funciona sem problemas.

Vou colocar o código aqui para ver se alguém consegue me ajudar a descobrir o porque no IE (sempre este IE) não funciona.

Lembrando que a DIV abre porem o conteúdo dela que seria o mapa não aparece.

Pagina com as DIV's que mostrar o Mapa

<!--#Include File="config.asp"-->
<%
IdCli = request.QueryString("IdCli")

	'Verifico a quantidade de cliques que a empresa possui
	Set RS = Server.CreateObject("adodb.recordset")
	SQL = "select * from cad_cli_iaki where IdEmpresa = '" & IdCli &"'"
	RS.Open SQL,Conn,3,3
	
	Cliques = Rs("Acessos")
	Cliques = Cliques + 1
	
	Rs.Close
	Set Rs = Nothing

	'Atualizo as visitas a esta categoria
	Set Rs = server.createobject("adodb.connection")
	Rs.open = conn
	RS.Execute "Update cad_cli_iaki set Acessos = '"& Cliques  &"' where IdEmpresa = '"&IdCli&"'"
	Set rs = Nothing

Set RS = Server.CreateObject("adodb.recordset")
SQL = "select * from cad_cli_iaki where IdEmpresa = '"&IdCli&"'" 
RS.Open SQL,Conn,3,3

UrlMapa = Rs("Endereco")&", "&Rs("Numero")&" "&Rs("Cidade")&" "&Rs("Estado")

LinkDireto = "http://www.iaki.com.br/iaki2.0/?pag=detalhes_empresa.asp&IdCli="
IdEmpresa = Rs("IdEmpresa")

Set RSCat = Server.CreateObject("adodb.recordset")
SQL = "select CatCli.Idempresa, CatCli.IdCategoria, CatIaki.Categoria from categorias_cli as CatCli, categorias_iaki as CatIaki where CatCli.IdEmpresa = '" & IdEmpresa &"' and CatIaki.IdCategoria = CatCli.IdCategoria"
RSCat.Open SQL,Conn,3,3

	Set RsTRanking = Server.CreateObject("Adodb.Recordset")
	SQL = "Select Count(Votos) as TVotos from ranking_iaki Where IdEmpresa = '"&IdEmpresa&"'"
	RsTRanking.Open SQL,Conn,3,3
	
	TVotos = RsTRanking("TVotos")

	Set RsSRanking = Server.CreateObject("Adodb.Recordset")
	SQL = "Select Sum(Votos) as SVotos from ranking_iaki Where IdEmpresa = '"&IdEmpresa&"'"
	RsSRanking.Open SQL,Conn,3,3
	
	SVotos = RsSRanking("SVotos")
	
	If IsNull(TVotos) or IsNull(SVotos) Then
	TotalVotos = 0
	Else
	TotalVotos = Cint(SVotos) / Cint(TVotos)
	End If
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=AQUI ESTA MINHA CHAVE API FORNECIDA PELO GOOGLE" type="text/javascript"></script>

<script type="text/javascript">

	var map;
	var geocoder;
	
	
	// showLocation() é chamado na body do html trazendo o endereço
	// da variavel UrlMapa montada com dados do BD
	// e adiciona um marcador para o mapa nesse local.
	function showLocation() {
	  var address = '<%=UrlMapa%>';
	  geocoder.getLocations(address, addAddressToMap);
	}

	//aqui inicializo o mapa
	//as funções básicas de config do mapa estãoa aqui
	function initialize() {
	  map = new GMap2(document.getElementById("GoogleMaps"));
	  map.setCenter(new GLatLng(34, 0), 15);
	  map.setUIToDefault();
	  map.getCenter();
	  geocoder = new GClientGeocoder();
	  
	}

	// addAddressToMap() é chamado quando o geocoder retorna uma
	// resposta.  Ele adiciona um marcador para o mapa com uma janela de informações é aberta
	// mostrando a versão formatada do endereço e o código do país.
	function addAddressToMap(response) {
	  map.clearOverlays();
	  if (!response || response.Status.code != 200) {
		alert("Endereço não pode ser encontrado!");
	  } else {
		place = response.Placemark[0];
		point = new GLatLng(place.Point.coordinates[1],
							place.Point.coordinates[0]);
		marker = new GMarker(point);
		map.addOverlay(marker);
		 marker.openInfoWindowHtml('<span style="font:11px tahoma;"><b>Endereço:</b><br>' +place.address+'</span>');
	  }
	}

	</script>
</head>

<body onload="initialize(); showLocation();">		

<div id="Conteudo">
	<div id="GeralDetalhes">
		<div id="Titulo">
			<div id="CategoriaSelecionada">
				<p><strong>Categorias:</strong> 
				<%
				Do until RSCat.EOF
				IdCategoria = RsCat("IdCategoria")
				NomeCategoria = RsCat("Categoria")
				%>
				<a href="?pag=lista_servicos.asp&IdCat=<%=IdCategoria %>" title="Acesse esta categoria"><%=NomeCategoria%></a>, 
				<%
				RSCat.movenext
				loop
				%>
				</p>
			</div>
			<div id="AcessoRapido">
				<a href="java script:EnviarAmigo('enviar_amigo.asp?IdCli=<%=IdCli%>')" title="Enviar para um amigo"><img src="imagens/barra_botoes_iaki_03.png" alt="Enviar para um amigo" /></a> 
				<a href="java script:AbrePrint('detalhes_empresa_print.asp?IdCli=<%=IdCli%>')"><img src="imagens/barra_botoes_iaki_05.png" alt="Imprimir este anuncio" /></a>
				<a href="?pag=contato.asp&Dep=  > Informar Erros no Cadastro"><img src="imagens/barra_botoes_iaki_07.png" alt="Informar erros neste cadastro ao suporte" /></a>
				<a href="java script:AvaliarCliente('avaliar_cliente.asp?IdCli=<%=IdCli%>')"><img src="imagens/barra_botoes_iaki_09.png" alt="De sua nota a este estabelecimento" /></a>
				<a href="?pag=contato.asp&Dep=  > Atualizar dados no Cadastro"><img src="imagens/barra_botoes_iaki_11.png" alt="Atualizar dados deste estabelecimento" /></a>
				<a href="?pag=cadastro_gratuito.asp"><img src="imagens/barra_botoes_iaki_13.png" alt="Cadastro gratuito no iaki busca regional" /></a>
			</div>
		</div>
		<div id="InfoPrincipal">
			<div id="Logo">
				<%if Rs("UrlLogo") = "" Then%>
				<img src="logos_clientes/sem_logo.png" width="104px" height="61px" alt="Cliente não possui Logo" />
				<%Else%>
				<img src="<%=Rs("UrlLogo")%>" alt="<%=Ucase(NomeEmpresa)%>" />
				<%End If%>
			</div>
			<div id="DadosEmpresa">
				<div id="Ranking">
				  <%If IsNull(TotalVotos) or TotalVotos < 1 Then%>
				  <img src="imagens/sem_ranking.png" alt="Este cliente ainda não recebeu votos" />
				  <%ElseIf TotalVotos = 1 or TotalVotos < 2 Then%>
				  <img src="imagens/ranking_1.png" alt="Classificação desta empresa" />
				  <%ElseIf TotalVotos = 2 or TotalVotos < 3 Then%> 
				  <img src="imagens/ranking_2.png" alt="Classificação desta empresa" />
				  <%ElseIf TotalVotos = 3 or TotalVotos < 4 Then%>
				  <img src="imagens/ranking_3.png" alt="Classificação desta empresa" />
				  <%ElseIf TotalVotos = 4 or TotalVotos < 5 Then%>
				  <img src="imagens/ranking_4.png" alt="Classificação desta empresa" />
				  <%ElseIf TotalVotos => 5 Then%>
				  <img src="imagens/ranking_5.png" alt="Classificação desta empresa" />
					<%End If%>
					(<%=TotalVotos%> em <%=TVotos%> votos)
				</div>
				<div id="NomeEmpresa">
				<%=Rs("NomeEmpresa")%>
				</div>
				<div id="Acessos" class="Cliques">  Este anúncio já foi acessado: <strong><%=Rs("Acessos")%> vez(es)</strong></div>
			</div>
		</div>
		<div id="DadosGerais">
			<div id="Facilidades">
				<div id="TituloFacilidades">
					<p>Facilidades Oferecidas</p>
				</div>
				<div id="ListaFacilidades">
					<%
						Set RS2 = Server.CreateObject("adodb.recordset")
						SQL = "select * from facilidades where IdEmpresa = '"&IdCli&"'" 
						RS2.Open SQL,Conn,3,3
						
						If Rs2.eof then
					%>
						Não foram definidas as informações de facilidades para este cliente
					<%	
						Else
						
						TeleEntrega = Rs2("TeleEntrega")
						BoletoBancario = Rs2("BoletoBancario")
						Cheque = Rs2("Cheque")
						ChequePre = Rs2("ChequePre")
						CartaoDebito = Rs2("CartaoDebito")
						CartaoCredito = Rs2("CartaoCredito")
						Estacionamento = Rs2("Estacionamento")
						
						If TeleEntrega = "S" Then
							TeleEntrega = "<img src=""imagens/sim.png"" alt=""OFERECE ESTE BENEFÍCIO"">"
						Else
							TeleEntrega = "<img src=""imagens/nao.png"" alt=""NÃO OFERECE ESTE BENEFÍCIO"">"
						End If
						If BoletoBancario = "S" Then
							BoletoBancario = "<img src=""imagens/sim.png"" alt=""OFERECE ESTE BENEFÍCIO"">"
						Else
							BoletoBancario = "<img src=""imagens/nao.png"" alt=""NÃO OFERECE ESTE BENEFÍCIO"">"
						End If
						If Cheque = "S" Then
							Cheque = "<img src=""imagens/sim.png"" alt=""OFERECE ESTE BENEFÍCIO"">"
						Else
							Cheque = "<img src=""imagens/nao.png"" alt=""NÃO OFERECE ESTE BENEFÍCIO"">"
						End If
						If ChequePre = "S" Then
							ChequePre = "<img src=""imagens/sim.png"" alt=""OFERECE ESTE BENEFÍCIO"">"
						Else
							ChequePre = "<img src=""imagens/nao.png"" alt=""NÃO OFERECE ESTE BENEFÍCIO"">"
						End If
						If CartaoDebito = "S" Then
							CartaoDebito = "<img src=""imagens/sim.png"" alt=""OFERECE ESTE BENEFÍCIO"">"
						Else
							CartaoDebito = "<img src=""imagens/nao.png"" alt=""NÃO OFERECE ESTE BENEFÍCIO"">"
						End If
						If CartaoCredito = "S" Then
							CartaoCredito = "<img src=""imagens/sim.png"" alt=""OFERECE ESTE BENEFÍCIO"">"
						Else
							CartaoCredito = "<img src=""imagens/nao.png"" alt=""NÃO OFERECE ESTE BENEFÍCIO"">"
						End If
						If Estacionamento = "S" Then
							Estacionamento = "<img src=""imagens/sim.png"" alt=""OFERECE ESTE BENEFÍCIO"">"
						Else
							Estacionamento = "<img src=""imagens/nao.png"" alt=""NÃO OFERECE ESTE BENEFÍCIO"">"
						End If
					%>
					<ul>
						<li><strong>Entrega em Casa:</strong> <%=TeleEntrega%></li>
						<li><strong>Boleto Bancário:</strong> <%=BoletoBancario%></li>
						<li><strong>Cheque:</strong> <%=Cheque%></li>
						<li><strong>Cheque Pré:</strong> <%=ChequePre%></li>
						<li><strong>Cartão de Débito:</strong> <%=CartaoDebito%></li>
						<li><strong>Cartão de Crédito:</strong> <%=CartaoCredito%></li>
						<li><strong>Estacionamento Próprio:</strong> <%=Estacionamento%></li>
					</ul>
					<%
						end if
						Rs2.close
						Set RS2 = Nothing
					%>
				</div>
			</div>
			<div id="Endereco">
				<div id="TituloEndereco">
					<p>Dados de Contato</p>
				</div>
				<div id="MostraEndereco">
					<p><strong>Rua:</strong> <%=Rs("Endereco")%>, <%=Rs("Numero")%></p>
				  <p><strong>Bairro:</strong> <%=Rs("Bairro")%> - <%=Rs("Cidade")%> - <%=Rs("Estado")%> - <A HREF="#" style="color:#0000FF;text-align:left" ONCLICK="camada('AbreMapa');">Acessar no mapa</A></p>

					<p><strong>Telefone Com:</strong> <%=Rs("TelefoneCom")%></p>
					<p><strong>Telefone Cel:</strong> <%=Rs("TelefoneCel")%></p>
					<%if Rs("Email") = "0" Then%>
					<p><strong>Email:</strong> não informado</p>
					<%Else%>
					<p><strong>Email:</strong> <a href="mailto:<%=Rs("Email")%>" title="<%=Rs("Email")%>"><%=Rs("Email")%></a></p>
					<%End If%>
					
					<%If Rs("UrlSite") = "0" Then%>
					<p><strong>Site:</strong> não informado</p>
					<%Else%>
					<p><strong>Site:</strong> <a href="http://<%=Rs("UrlSite")%>" target="_blank" title="<%=Rs("UrlSite")%>">http://<%=Rs("UrlSite")%></a></p>
					<%End If%>
					<p><strong>Horário de Atendimento:</strong><br><%=Rs("HorarioAtendimento")%></p>
					<p><strong>Dados Atualizado em:</strong> <%=Rs("AtualizadoEm")%></p>
				</div>
			  </div>
			<div id="Descricao">
				<strong>Informações Adicionais:</strong>
				<p><%=Rs("Descricao")%><br /><br /><strong>Texto de responsábilidade do anúnciante.</strong></p>
			</div>
			<div id="Fotos">
				<div id="TituloFotos">
					<p>Galeria de imagens</p>
				</div>
				<div id="ListaFotos">
					<%
					Set RSFoto = Server.CreateObject("adodb.recordset")
					SQL = "select * from fotos_iaki where IdEmpresa = '"& IdCli & "'" 
					RSFoto.Open SQL,Conn,3,3
					
					Total = rs.recordcount
					Colunas = 5
					%>
					<table width="100%" border="0" cellspacing="5" cellpadding="0" id="TbListaFotos">
					<%
					X = 1
					Y = 0
					
					WHILE NOT RsFoto.EOF
					
					FotoMini = RsFoto("UrlFotoPq")
					FotoGr = RsFoto("UrlFotoGr")
					%>
					<%IF Y = 0 THEN%>
					<tr>
					<%
					END IF
					IF X < Total THEN
					%>
					<td class="TbFoto"><a href="<%=FotoGr%>" rel="lightbox" title="Ampliar Foto"/><img src="<%=FotoMini%>"/></a></td>
					<%ELSE%>
					<td class="TbFoto"><a href="<%=FotoGr%>" rel="lightbox" title="Ampliar Foto"/><img src="<%=FotoMini%>"/></a></td>
					<%
					IF Total mod Colunas <> 0 THEN
					FOR I = Total mod Colunas TO Colunas - 1
					
					NEXT
					END IF
					END IF
					
					X = X + 1
					Y = Y + 1
					IF Y = Colunas THEN
					Y = 0
					END IF
					
					RsFoto.MOVENEXT
					WEND
					RsFoto.close
					set RsFoto = nothing
					%>
					</table>
				</div>
			</div> 
		</div>
	</div>
</div>
<form action="#" onsubmit="showLocation(); return false;">
	<input type="hidden" name="q" value="<%=UrlMapa%>" class="address_input" size="40" />
</form>
<div id="AbreMapa" style="position:absolute; top:200px; left:370px; z-index:2; visibility:hidden;">
	<div style="text-align:center; padding:5px 0; width:100px; float:right;BACKGROUND: url(imagens/fundo_exibe_mapa.png) no-repeat;">
		<a href="#" style="color:#000; text-decoration:none; font:12px Tahoma, Geneva, sans-serif;" ONCLICK="camada('AbreMapa');">Fechar Mapa</A>
	</div>
	<div id="GoogleMaps" style="width:700px; height:400px; border:10px solid #FFCD01; background:#FFCD01; clear:both;">
	</div>
</div>
<%
Rs.Close
Set Rs = Nothing
%>
</body>
</html>

esta paret do código esta junto na página acima, só estou destacando ela aqui para facilitar, é nesta div que aparece o mapa

<div id="AbreMapa" style="position:absolute; top:200px; left:370px; z-index:2; visibility:hidden;">
	<div style="text-align:center; padding:5px 0; width:100px; float:right;BACKGROUND: url(imagens/fundo_exibe_mapa.png) no-repeat;">
		<a href="#" style="color:#000; text-decoration:none; font:12px Tahoma, Geneva, sans-serif;" ONCLICK="camada('AbreMapa');">Fechar Mapa</A>
	</div>
	<div id="GoogleMaps" style="width:700px; height:400px; border:10px solid #FFCD01; background:#FFCD01; clear:both;">
	</div>
</div>

Código que é responsável por exibir e fechar a div

//função para abrir e fechar uma div
function camada( sId ) {
var sDiv = document.getElementById( sId );
if( sDiv.style.visibility == "hidden" ) {
sDiv.style.visibility = "visible";
} else {
sDiv.style.visibility = "hidden";
}
}

Esta linha de código também esta no código acima, somente para verificação

<a href="#" ONCLICK="camada('AbreMapa');">Acessar no mapa</a>

Patrique · Junho 27, 2009

Kania, mais qual o erro que esta dando?

esta dando erro de js? ou so não esta aparecendo o mapa?

So para fazer um teste faça assim nesta linha

<div id="AbreMapa" style="position:absolute; top:200px; left:370px; z-index:-1; visibility:hidden;">

e veja o que acontece, a um tempo atrás eu vi que o absolute juntamente com o z-index da esse bug no ie, não tenho certeza mais eu acho que a solução era colocar o z index com -1 de valor.

kania · Junho 27, 2009

Opa Patrique, então ele aparece a div normal, não da nenhum erro, porem não abre o mapa somente, mas no Firefox abre.

ò para testar separeia Div em um arquivo sozinho que pode ser vizualizado no link http://www.iaki.com.br/Google_Maps.asp e funcionou em ambos os navegadores, mas quando a div esta junto com o código todo só aparece a dive de cor laranjada sem nada de conteudo (para o IE)

Patrique · Junho 27, 2009

você testou colocando o sugerido por mim (-1 no z-index)?

kania · Junho 27, 2009

Sim tentei, a unica coisa que aconteceu foi a div ir para traz das outras, mas o conteúdo dela continuou sem aparecer

Patrique · Junho 27, 2009

Cara eu testei aqui localmente no, ie 6, 7.0 e no firefox e funfou, qual a versão do seu ie?

kania · Junho 27, 2009

Eu to usando o IE 8, mas eu uso o IETester para testar em outras versões.

O link que eu te passei ele funciona, só não funciona quando eu coloco a div junto com todo o código, separadamente só ela e código do mapa funciona, tudo junto no IE da pau

Patrique · Junho 27, 2009

O grande problema é saber se é incompatibilidade no javascript ou no css, faça o seguinte, coloque z-index no div do mapa ("GoogleMaps") para garantir que ele fique acima de tudo.... e faça um teste, ele pode esta ficando abaixo do div "AbreMapa".

kania · Junho 27, 2009

Fera fiz a sua dica, porem não surtiu resultado, veja, fiz mais alguns testes para verificar se podia ser quea div GoogleMaps estava empilhada por traz.

a) Coloquei um tezto dentro da div

Imagem Postada retirei a cor de fundo para que ficasse transparente, logo se tivesse algo por traz apareceria

Nenhuma das tentativas deu certo, o texto que coloquei na div GoogleMaps apareceu somente o mapa que não, então acredito que é o mapa mesmo que não esta abrindo.

Outra tentativa que fiz foi colocar a div GoogleMaps para abir sozinha sem cliques para ver se desta forma o conteúdo apareceria, nda, tabm nãoa aparece no IE.

O problema é que sabemos que não é incompatibilidade de navegador, pq no teste que fizemos com a Div e o código do mapa sozinhos funcioaranm, agora como saber onde é o problema? eis a questão.

Patrique · Junho 27, 2009

Rapaz, que doido isso hein, tipo incompatibilidade do js realmente não é, mais me responda uma coisa.

Eu olhei no seu code que você passou aqui no fórum e você não utiliza nenhum outro javascript a não ser este do mapa, isto é correto? ou você esta utilizando outro js que não foi especificado no code que você postou?

kania · Junho 27, 2009

Sim uso outros Js, tenho um arquivo onde coloco todos os Js juntos e depois chamos eles na pagina. Mas eut estei colocando o Js que abre a div direto na pagina do mapa e tbm não deu

Patrique · Junho 27, 2009

concerteza é conflito entre os JS, você esta utilizando o lightbox né? tire o js e o css referentes a ele nesta página e faça um teste sem estes complementos do lightbox e veja se o mapa é mostrado.

kania · Junho 27, 2009

Certou na mosca, é o lightbox que esta conflitando, e agora como arrumar, pq eu uso o lightbox nesta mesma pagina

Patrique · Junho 27, 2009

Ok, um passo dado! ufaa, agora o jeito é descobrir qual é o parametro conflitante, vou fazer a verificação mais preciso saber qual é a versão do lightbox que você esta usando ae, qual é?

Arquivado

[Resolvido] Material Google Maps com Mysql e Asp

Recommended Posts

kania 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hargon 64

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

kania 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Salgado 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Patrique 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

kania 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Patrique 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

kania 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Patrique 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

kania 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Patrique 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

kania 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Patrique 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

kania 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Patrique 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

kania 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Patrique 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

kania 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Patrique 0