API Google Maps V3

Denny de Almeida · Junho 15, 2012

Olá, comecei a programar web a pouco tempo e venho me socorrendo desde então no iMasters.

Mas desta vez não consegui nem com postagens de outros, nem com minha persistência.

Bom, vamos lá.

Estou a criar um site 100% dinâmico, e em uma das páginas há um mapa, mapa este que puxo através da API Javascript do Google Maps V3. Um mapa bem simples, onde só inicializo, coloco um marker e uma infowindow.

O problema é, o mapa aparece normalmente, entretanto, quando altero a resolução da tela, seja maximizando, colocando em fullscreen, ou mesmo mudando de página onde o necessite de uma scroll...

aparece um erro de javascript (segue abaixo o erro).

Detalhes dos erros da página da Web

Agente de Usuário: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; InfoPath.2)
Carimbo de data/hora: Fri, 15 Jun 2012 18:05:55 UTC


Mensagem: Argumento inválido.
Linha: 27
Caractere: 56
Código: 0
URI: http://maps.gstatic.com/intl/pt_br/mapfiles/api-3/7/17/main.js

Bom, eu já tentei de tudo para arrumar isso, já procurei a solução disso em todos os lugares...

lendo os js da API, vi que é relacionado a height e width.

Segue abaixo um exemplo num formato parecido do que eu estou fazendo.

main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>
		Home
	</title>
	<style>
		html, body{
			padding: 0;
			margin: 0;
		}

		#html, body, result{
			width: 100%;
		}

		#contMap{
			padding-top: 25px;
			width: 100%;
			height: 400px;
		}
	</style>
	<script src='jquery.js' type='text/javascript'></script>
	<script src='ajax.js' type='text/javascript'></script>
	<script type="text/javascript" language="javascript">
		$().ready(function() {
			$("#showMap").click(function(){
				url = "mapa.php";
				iniciaRequisicao(url);		
			});

			$("#changePage").click(function(){
				url = "outra.php";
				iniciaRequisicao(url);		
			});
		});

		function initialize() {			
			var map;
			var myLatlng = new google.maps.LatLng(35.703032,139.691849);
			var ende = "<p id='ender'>Endereço</p>";

			var myOptions = {
				zoom: 16,
				center: myLatlng,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				panControl: true,
				streetViewControl: false
			};

			map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
			google.maps.event.trigger(map, "resize");
			var marker = new google.maps.Marker({
				position: myLatlng,
				map: map,
				title:"Mapa Exemplo"
			});

			var infowindow = new google.maps.InfoWindow({
				content: ende,
				maxHeight: 50
			});

			infowindow.open(map,marker);

			google.maps.event.addListener(marker, 'click', function() {
			  infowindow.open(map,marker);
			});
		}

		function trataDados(cResponse){
			if(cResponse.substr(192, 5) == "Local"){
				$('#result').html(cResponse);
					var script = document.createElement("script");
					script.type = "text/javascript";
					script.src = "http://maps.google.com/maps/api/js?v=3.3&sensor=false&callback=initialize";
					$("#result").append(script);
					<!-- window.onload = initialize(); -->
			}
			else{
				$('#result').html(cResponse);
			}
		}
	</script>
</head>
<body>
	<input type="button" id="showMap" value="mostrar Mapa" />
	<input type="button" id="changePage" value="Mudar de Página" />
	<div id="result">

	</div>
</body>
</html>

mapa.php

<?php header("Content-Type: text/html; charset=ISO-8859-1",true);?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
	<title>
		Local
	</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
	<div id="contMap">
		<div id="map_canvas" style="height: 100%; width: 100%;"></div>
	</div>
</body>
</html>

ajax.js

// variavel global
var xmlHttp;

// FUNÇÃO QUE CRIA O OBJETO DE REQUISIÇÃO
function criaXMLHttpRequest() {
if (window.XMLHttpRequest) { // Mozilla, Safari,...
	xmlHttp = new XMLHttpRequest();
	if ( xmlHttp.overrideMimeType) {
		xmlHttp.overrideMimeType('text/xml');
	}
} else if (window.ActiveXObject) { // IE
	try {
		xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch ( e ) {
	try {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	} catch ( e ) {}
	}
}
if (!xmlHttp) {
	alert('Seu navegador não possui suporte a essa aplicação!');
	return false;
}	
}

function iniciaRequisicao(url) {
criaXMLHttpRequest();
xmlHttp.onreadystatechange = trataResposta;
xmlHttp.open("get", url, true);
xmlHttp.send(null);
}

function trataResposta() {
if(xmlHttp.readyState == 4) {
	if(xmlHttp.status == 200) {
		trataDados(xmlHttp.responseText);
	}
}
}

outra.php

<?php header("Content-Type: text/html; charset=ISO-8859-1",true);?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
	<title>
		Teste
	</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
	<div id="map_canvas" style="height: 100%; width: 100%;"></div>
	<div id="content">
		<?php
			for($x=0;$x<31;$x++){
				echo "linha".$x."<hr />";
			}
		?>
	</div>
</body>
</html>

Como disse anteriormente, este é só um modelo que dá o mesmo erro que dá no meu projeto.

Valeu pela ajuda.

Lucas Guima · Junho 15, 2012

google.maps.event.trigger(map, "resize");

É só isso mesmo? Não está faltando algo?

Denny de Almeida · Junho 16, 2012

Obrigado pela resposta Lucas Guima.

Mas eu já tentei o trigger resize, inclusive neste código aí tem um, mas ainda falha. Talvez por eu não saber usar!

Em relação ao link que tu deixou, qual exatamente diz que está faltando?

Valeu!

Lucas Guima · Junho 17, 2012

Uai, e não seria esse o erro?

O problema é, o mapa aparece normalmente, entretanto, quando altero a resolução da tela [...]

Ao meu ver, isso dispara a trigger resize. No link que postei, veja a última célula da tabela, diz respeito a triggers, como usá-las.

Denny de Almeida · Junho 18, 2012

É verdade... Tá faltando um parâmetro.

Mas desculpe minha ignorância... ainda não achei, até porque este fim de semana nem peguei pra mexer nisso... tinha um treco de dacte pra fazer... agora que to voltando pra ver isso...

Então, em todo lugar que eu procuro o trigger resize está assim...

google.maps.event.trigger(map, "resize");

Eu vi que pode ter mais parâmetros, mas não são obrigatórios. E mesmo eu colocando tudo que fazia sentido na minha cabeça como terceiro parâmetro... não adiantou!

Valeu!

Lucas Guima · Junho 18, 2012

Eu apenas procurei nas referência, nunca mexi com essa trigger. Mas não entendi o que ela faz aí no meio da inicialização.

Denny de Almeida · Junho 19, 2012

Bom, esta também é a primeira vez que utilizo o trigger. Como disse, programo web a pouco tempo.

Então, ele está ali para disparar o evento resize, depois de criar o container para o mapa. Ajustar o mapa à div.

Eu retirei ele dali também, e nada mudou, o erro persiste.

Em uma tentativa de descobrir de onde o erro vem, em uma depuração no Firefox ( FireDebug ) eu vi que quando chamo o mapa, a API inseri uns cabeçarios no head da minha página, e quando eu vou para a outra página, não tem mais os mesmos elementos que tinha na tela do mapa. E se esses novos cabeçarios tentar usar estes elementos, o erro ocorrerá...

Lucas Guima · Junho 19, 2012

Que mal lhe pergunte, qual seria a linha que o erro acusa?

Denny de Almeida · Junho 19, 2012

Detalhes dos erros da página da Web

Agente de Usuário: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; InfoPath.2)
Carimbo de data/hora: Tue, 19 Jun 2012 11:53:01 UTC


Mensagem: Argumento inválido.
Linha: 27
Caractere: 56
Código: 0
URI: http://maps.gstatic.com/intl/pt_br/mapfiles/api-3/7/17/main.js

É um arquivo chamado pelo link da API. Não tenho este arquivo em disco.

Lucas Guima · Junho 19, 2012

Tentei rodar seu código e não funcionou. Tem um exemplo online?

Denny de Almeida · Junho 19, 2012

Não tenho, mas para rodar você precisa além das quatro páginas que postei aqui... a biblioteca JQuery que você pode encontrá-la aqui, aí tu copia e salva com o nome de jquery.js

aí fica redondo para rodar este exemplo, pois estou no trabalho e não posso usar o ftp da empresa assim.

Lucas Guima · Junho 19, 2012

O jQuery eu inclui, mesmo assim não funcionou.

Diga-me, se está utilizando a biblioteca, pq não usa suas funções Ajax ao invés desse método do arquivo ajax.js?

Tenta refazer e ir debugando, quem sabe não se depara com o problema.

Denny de Almeida · Junho 19, 2012

Troque a linha da função trataDados()

de:

if(cResponse.substr(192, 5) == "Local"){

por:

if(cResponse.substr(cResponse.indexOf("Local"), 5) == "Local"){

Vai funcionar! É que na pressa de montar o exemplo eu não contei os caracteres. Troque esta linha que funcionará.

Eu já refiz debugando, o erro ocorre assim:

-Enquanto eu não abrir o mapa, eu posso navegar a vontade entre todas as páginas que nada acontece.

-Após eu abrir o mapa, eu posso navegar a vontade entre as páginas que não alteram o tamanho da tela que nada acontece.

-Após eu abrir o mapa, eu não posso ir para uma página com mais conteúdo ( por isso simulei a página outra.php com muito conteúdo ), nem colocar o navegador em fullscreen e nem maximizar ou restaurar abaixo que o erro acontece.

Acho que é alguma coisa com o mapa não estar mais na tela. Eu debugo essas páginas o tempo todo atrás deste erro, mas nada ainda.

Edit: Eu me entendo mais usando a requisição separada assim! Eu até uso a função $.post() mas só para formulários.

Lucas Guima · Junho 19, 2012

No botão "Mostrar Mapa" funcionou. Mas no "Mudar de Página" só aparece o conteúdo do laço.

Não consegui simular o erro.

Denny de Almeida · Junho 19, 2012

O laço funciona perfeitamente, e até agora todas as funções também... o problema é que acusa o erro no IE ( pois a barra de status fica visível ). Mas se debugar no FF ou no Chrome, o mesmo erro ocorre, mas só é aparente no IE por causa da barra de status, sakas?

Lucas Guima · Junho 19, 2012

Foi mal, não entendi. Onde você tá vendo esse erro?

Denny de Almeida · Junho 19, 2012

Opa, fui almoçar, malz a demora. Então, no IE, você consegue ver o erro na barra de status do próprio navegador.

Aparece que concluído mas com um sinal de erro do lado. Se der dois cliques poderá ver a descrição do erro ( a que eu já postei aqui ).

Lucas Guima · Junho 20, 2012

Eu não consegui simular o erro, foi mal. Já tentou manda a dúvida no grupo da API v3 no Google Groups?

Denny de Almeida · Junho 22, 2012

Malz a demora para responder.

Eu já olhei o forum do google todinho também, vou postar lá sim... porque eu tô quase desistindo.

Valeu pela ajuda. Se descobrir algo me avise por favor.

E se mais alguem souber como resolver, agradeço!

Vlw!

Arquivado

API Google Maps V3

Recommended Posts

Denny de Almeida 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Denny de Almeida 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Denny de Almeida 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Denny de Almeida 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Denny de Almeida 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Denny de Almeida 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Denny de Almeida 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Denny de Almeida 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Denny de Almeida 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Denny de Almeida 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura