Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

Sign in to follow this  
skiller10

Map

Recommended Posts

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.."

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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...

Share this post


Link to post
Share on other 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.."

Share this post


Link to post
Share on other 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.."

Share this post


Link to post
Share on other 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
            })

Share this post


Link to post
Share on other 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>

Share this post


Link to post
Share on other 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.."

Share this post


Link to post
Share on other 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'
});

Share this post


Link to post
Share on other 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.."

Share this post


Link to post
Share on other sites
Th3Alchemist

Podes fazer isso numa chamada infowindow;

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

Share this post


Link to post
Share on other 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...

Share this post


Link to post
Share on other 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.."

Share this post


Link to post
Share on other 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';
         });

Share this post


Link to post
Share on other 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.."

Share this post


Link to post
Share on other 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?

Share this post


Link to post
Share on other 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.."

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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.."

Share this post


Link to post
Share on other 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...

Share this post


Link to post
Share on other 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.."

Share this post


Link to post
Share on other 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.."

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.