Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

skiller10

Map

Mensagens Recomendadas

skiller10

Boas,

Alguém me sabe dizer de no google maps ou no bing maps dá para fazer estas três coisas:

- Colocar pinos de cores diferentes.

- O pino ser uma hiperligação.

- Aparecer um "titulo" em cima de cada pino, sem ser preciso carregar no pino.


"Eu acredito que a vida está constantemente nos testando em nosso nível de confiança, e a vida tem grande recompensa reservada àqueles que demonstram uma confiança sem fim para agir até conseguir. Este nível de resolução pode mover montanhas, mas ele tem de ser constante e consistente. Tão simples quanto isso possa soar, ainda é o denominador comum que separa aqueles que vivem seus sonhos dos que vivem simplesmente.."

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
pedrotuga

Pelo menos aqui há uns dois anos, a api de javascript do goolge maps permitia fazer pelo menos a primeira e a última, quanto à segunda não sei.

Boas,

Alguém me sabe dizer de no google maps ou no bing maps dá para fazer estas três coisas:

- Colocar pinos de cores diferentes.

- O pino ser uma hiperligação.

- Aparecer um "titulo" em cima de cada pino, sem ser preciso carregar no pino.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Th3Alchemist

da tanto no Google Maps como no Bing Maps...

Recomendo te o google maps de qualquer forma... Tens a chamada Google Maps API para programar nele...

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
skiller10

Obrigado :(


"Eu acredito que a vida está constantemente nos testando em nosso nível de confiança, e a vida tem grande recompensa reservada àqueles que demonstram uma confiança sem fim para agir até conseguir. Este nível de resolução pode mover montanhas, mas ele tem de ser constante e consistente. Tão simples quanto isso possa soar, ainda é o denominador comum que separa aqueles que vivem seus sonhos dos que vivem simplesmente.."

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
skiller10

Boas,

Eu tenho dados armazenados na base de dados (SQL), dados esse que contêm, entre outros, coordenadas e um titulo.

Precisava em primeiro lugar de carregar esses dados e criar os respectivos markers no mapa. A minha ideia é a seguinte:

- Ter um script PHP no meio do javascript a gerar os markers.

O que dizem, alguma ideia melhor?

Já agora se alguém me conseguir dizer como fazer as três coisas que coloquei no início do tópico era uma grande ajuda.

Desde já obrigado a todos :)


"Eu acredito que a vida está constantemente nos testando em nosso nível de confiança, e a vida tem grande recompensa reservada àqueles que demonstram uma confiança sem fim para agir até conseguir. Este nível de resolução pode mover montanhas, mas ele tem de ser constante e consistente. Tão simples quanto isso possa soar, ainda é o denominador comum que separa aqueles que vivem seus sonhos dos que vivem simplesmente.."

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Th3Alchemist

Sim, deves carreguar as posições pelo PHP a partir da base de dados...

Depois por cada posição adicionas um marker:

Utilizas a Google Maps API?

marker = new google.maps.Marker({
                position: new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $lng; ?>),
                map: map
            })

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
taviroquai

Viva,

Podes ainda criar com php um xml com os <marker></marker> e ler com algo deste tipo...

GDownloadUrl("data.xml", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            map.addOverlay(new GMarker(point));
          }
        });

Documentação http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GDownloadUrl

O xml será algo como...

<markers>
    <marker lat="37" lng="-7"/>
    <marker lat="37" lng="-7"/>
</markers>

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
skiller10

Th3Alchemist, sim.

Como defino a cor do marker?


"Eu acredito que a vida está constantemente nos testando em nosso nível de confiança, e a vida tem grande recompensa reservada àqueles que demonstram uma confiança sem fim para agir até conseguir. Este nível de resolução pode mover montanhas, mas ele tem de ser constante e consistente. Tão simples quanto isso possa soar, ainda é o denominador comum que separa aqueles que vivem seus sonhos dos que vivem simplesmente.."

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Th3Alchemist

Viva,

Podes ainda criar com php um xml com os <marker></marker> e ler com algo deste tipo...

GDownloadUrl("data.xml", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            map.addOverlay(new GMarker(point));
          }
        });

Documentação http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GDownloadUrl

O xml será algo como...

<markers>
    <marker lat="37" lng="-7"/>
    <marker lat="37" lng="-7"/>
</markers>

Isso é a GM API v2 (Deprecated)

Th3Alchemist, sim.

Como defino a cor do marker?

acho que na markerOptions leva o parâmetro icon: greenIcon ou blueIcon... algo do gênero

podes também definir o teu próprio marker;

var marker = new google.maps.Marker({
  position: inicio,
  map: map,
  icon: 'meu_marker.png'
});

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
skiller10

Era isso mesmo que preciso Th3Alchemist, obrigado.

Sabes como fazer as outras duas coisas?

- Colocar apenas o nome no marker sobre o mesmo sem ter que se passar com o rato

- Ao clicar no marker redireccionar para outra pagina


"Eu acredito que a vida está constantemente nos testando em nosso nível de confiança, e a vida tem grande recompensa reservada àqueles que demonstram uma confiança sem fim para agir até conseguir. Este nível de resolução pode mover montanhas, mas ele tem de ser constante e consistente. Tão simples quanto isso possa soar, ainda é o denominador comum que separa aqueles que vivem seus sonhos dos que vivem simplesmente.."

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Th3Alchemist

Podes fazer isso numa chamada infowindow;

infowindow.setContent('<--- conteúdo HTML com respectivo link--->');
infowindow.open(mapa, marker);

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
taviroquai

Isso é a GM API v2 (Deprecated)

Sim... de qualquer forma pode puxar o xml por ajax... desta forma separa o php do javascript e torna as coisas reutilizaveis...

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
skiller10

Não estou a conseguir nem colocar o titulo por defeito por cima do marker nem que o marker seja a hiperligação.

Nota: Já consegui por um link na janela que abre, mas eu queria é que ao clicar no marker, em vez de abrir a caixa, fosse para o link

Aqui está o código que tenho até agora:

<script type="text/javascript">
var latlng = new google.maps.LatLng(39.5, -7.5);
var myOptions = {
	zoom: 7,
	center: latlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker({
                position: new google.maps.LatLng(39.5, -7.5),
                map: map,
            })
infowindow.setContent(<a href="deu.php">Deu</a>);
infowindow.open(map, marker);
</script>


"Eu acredito que a vida está constantemente nos testando em nosso nível de confiança, e a vida tem grande recompensa reservada àqueles que demonstram uma confiança sem fim para agir até conseguir. Este nível de resolução pode mover montanhas, mas ele tem de ser constante e consistente. Tão simples quanto isso possa soar, ainda é o denominador comum que separa aqueles que vivem seus sonhos dos que vivem simplesmente.."

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Th3Alchemist

Tenta meter o url mesmo (não sei se funciona):

        var latlng = new google.maps.LatLng(39.5, -7.5);
        var myOptions = {
                zoom: 7,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        marker = new google.maps.Marker({
                position: new google.maps.LatLng(39.5, -7.5),
                map: map,
                url: '/deu.php'
            })

Senão funcionar terás que definir um chamado "event" que abre o determinado url... e depois crias no marker um "listener" que arrana esse "event"... Não sei se me fiz compreender

Tenta:

        var latlng = new google.maps.LatLng(39.5, -7.5);
        var myOptions = {
                zoom: 7,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        marker = new google.maps.Marker({
                position: new google.maps.LatLng(39.5, -7.5),
                map: map
            });
        google.maps.event.addListener(marker, 'click', function() {
                window.location.href = '/deu.php';
         });

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
skiller10

Já experimentei e o segundo código funciona como pretendo :)

No entanto não percebi o que quiseste dizer. Como faço para que cada marker redireccione para uma pagina especifica?


"Eu acredito que a vida está constantemente nos testando em nosso nível de confiança, e a vida tem grande recompensa reservada àqueles que demonstram uma confiança sem fim para agir até conseguir. Este nível de resolução pode mover montanhas, mas ele tem de ser constante e consistente. Tão simples quanto isso possa soar, ainda é o denominador comum que separa aqueles que vivem seus sonhos dos que vivem simplesmente.."

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Th3Alchemist

Já experimentei e o segundo código funciona como pretendo :D

No entanto não percebi o que quiseste dizer. Como faço para que cada marker redireccione para uma pagina especifica?

o que quis dizer foi o que fiz no 2º código... na Google Maps API existem os chamados "events"... clickar num marker é um evento... Para o mapa determinar se o utilizador faz um evento desse existe o Listener... mas pronto isso são nomes que os googlers lhe deram...

Agora de volta ao teu problema... Antes de mais, vão aparecer muitos markers no teu mapa? ou só alguns?

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
skiller10

Não te sei dizer, mas podem ser algumas dezenas.


"Eu acredito que a vida está constantemente nos testando em nosso nível de confiança, e a vida tem grande recompensa reservada àqueles que demonstram uma confiança sem fim para agir até conseguir. Este nível de resolução pode mover montanhas, mas ele tem de ser constante e consistente. Tão simples quanto isso possa soar, ainda é o denominador comum que separa aqueles que vivem seus sonhos dos que vivem simplesmente.."

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Th3Alchemist

ok...

entao para cada posição defines um marker e o respectivo Listener...

utilizas arrays para facilitar...

Sendo que utilizas PHP e uma base de dados geras um ciclo while (em PHP dentro do JS) que para cada posição encontrada na base de dados cria o marker e o respectivo Listener.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
skiller10

Hum já percebi, obrigado :D

Só me falta mesmo uma coisa, aparecer o titulo em cima do marker.


"Eu acredito que a vida está constantemente nos testando em nosso nível de confiança, e a vida tem grande recompensa reservada àqueles que demonstram uma confiança sem fim para agir até conseguir. Este nível de resolução pode mover montanhas, mas ele tem de ser constante e consistente. Tão simples quanto isso possa soar, ainda é o denominador comum que separa aqueles que vivem seus sonhos dos que vivem simplesmente.."

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Th3Alchemist

Hum já percebi, obrigado :D

Só me falta mesmo uma coisa, aparecer o titulo em cima do marker.

aí podes utilizar a infowindow... Mas não convém tê-las abertas todas ao mesmo tempo se forem muitos markers...

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
skiller10

Não existe outra alternativa? :/

Já agora podes-me mostrar um pouco de código a usar a infowindow e como as ter todas abertas sff


"Eu acredito que a vida está constantemente nos testando em nosso nível de confiança, e a vida tem grande recompensa reservada àqueles que demonstram uma confiança sem fim para agir até conseguir. Este nível de resolução pode mover montanhas, mas ele tem de ser constante e consistente. Tão simples quanto isso possa soar, ainda é o denominador comum que separa aqueles que vivem seus sonhos dos que vivem simplesmente.."

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
skiller10

Boas,

Consegui fazer tudo o que pretendia, incluindo o titulo no marcador, se alguem precisar:

http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/

EDIT: No firefox e chrome está tudo a funcionar bem, mas no ie9 o mapa não carrega, alguém sabe porquê?


"Eu acredito que a vida está constantemente nos testando em nosso nível de confiança, e a vida tem grande recompensa reservada àqueles que demonstram uma confiança sem fim para agir até conseguir. Este nível de resolução pode mover montanhas, mas ele tem de ser constante e consistente. Tão simples quanto isso possa soar, ainda é o denominador comum que separa aqueles que vivem seus sonhos dos que vivem simplesmente.."

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.