Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Lucas Guima

[Resolvido] API GMaps - Renderizar mapa personalizado

Por , em Javascript

Recommended Posts

Lucas Guima    164

Lucas Guima
Postado

Salve galera, ano acabando, que beleza hein!

 

Pois então, estou com uma idéia de criar um mapa personalizado - Meus lugares > Mapas > "Meu mapa marcado por todo lado", por exemplo, e criar uma página onde eu o renderize juntamente com suas marcações. Ou seja, ao invés de renderizar um mapa genérico do Google destacando um endereço, quero este mapa que criei.

 

E não para aí, preciso manipular este mapa, adicionar, retirar e editar os marcadores que nele se encontram.

 

Eu andei testando e vi que dá pra fazer com um mapa genérico que ele cria na hora, mas eu preciso que seja o mapa personalizado.

 

Alguém tem idéia de como posso fazer isso?

 

Muito obrigado. :natalbiggrin:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Guima    164

Lucas Guima
Postado

Boa noite, Feliz 2012! Tudo de bom para todos nesse ano que se inicia! :natalbiggrin:

 

Pois então, sobre a minha dúvida eu achei como realizar isso:

Precisarei criar um mapa genérico mesmo, e sobre ele (utilizando superposições), criar minhas marcações.

 

Eu achei nas opções em "Meus mapas" um local onde consigo exportar determinado mapa para um arquivo .KML, arquivo este que deverá ser lido e a partir de seus dados, criadas as superposições.

 

Porém, estou tendo problemas com esta funcionalidade. Segue o tutorial que estou utilizando:

http://code.google.com/intl/pt-BR/apis/maps/documentation/javascript/overlays.html#LayersOverview

 

Eu procurei no Google e achei um tutorial dizendo que é possível utilizar arquivos .KML hospedados no GDocs:

http://support.google.com/earth/bin/answer.py?hl=pt-BR&answer=173934

 

Porém estou a utilizar o seguinte código sem sucesso:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: KmlLayer KML</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var chicago = new google.maps.LatLng(-22.9071048, -47.06323910000003);
var myOptions = {
	zoom: 11,
	center: chicago,
	mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var ctaLayer = new google.maps.KmlLayer('https://docs.google.com/leaf?id=0B4TN5AsjULEMYTc3NzYyYzgtMTJkZi00NDU3LWE0YjUtMDllODNjYThkYjA5&hl=pt_BR');	
ctaLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

 

Alguém já trabalhou com arquivos KML e possa ajudar?

 

Obrigado! :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Guima    164

Lucas Guima
Postado

Olha só o que dá a falta do que fazer no trabalho... :natallaugh:

 

http://code.google.com/p/geoxml3/

 

Código final ficou assim:

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: KmlLayer KML</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="geoXML3.js"></script>
<script type="text/javascript">
function initialize() {
var adress_center = new google.maps.LatLng(-22.9071048, -47.06323910000003);
var myOptions = {
	zoom: 11,
	center: adress_center,
	mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var myParser = new geoXML3.parser({map: map});
myParser.parse('mapa.kml');
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

 

Assim dá até pra usar arquivo local, o que não dava da maneira "nativa".

 

Resolvido! :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito