whathaveidone
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

whathaveidone

Linux, Bioquimica, Jantaradas, Profissionalismo e um cafezinho
 
InícioProcurarÚltimas imagensRegistarEntrar

 

 Google Maps API

Ir para baixo 
2 participantes
AutorMensagem
K@tuyci
Mini
K@tuyci


Mensagens : 34
Data de inscrição : 11/10/2008
Idade : 38
Localização : Coimbra, Sem Casa, Portugal

Google Maps API Empty
MensagemAssunto: Google Maps API   Google Maps API Icon_minitimeDom Dez 28, 2008 9:43 am

Encarregaram-me de fazer uma página web. Entretanto tenho de colocar uma série de localizações cá de coimbra e achei que o mais fácil seria "embeber" o google maps na página.
Por isso porcurei e encontrei o google maps api:

http://code.google.com/intl/pt-PT/apis/maps/

no entanto nunca tive lições de html ou qualquer outra coisa parecida, e o pouco que vou conseguindo fazer é por ir tentando aprender aqui e ali. O meu problema agora é que, depois de colocar um pin no sitio desejado queria que aparecesse um balão com uma descrição (que eu depois escolho).

Aqui eles têm uma breve descrição:
http://code.google.com/intl/pt-PT/apis/maps/documentation/overlays.html#Icons_overview

mais especificamente :
Código:
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
var baseIcon = new GIcon(G_DEFAULT_ICON);
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);

// Creates a marker whose info window displays the letter corresponding
// to the given index.
function createMarker(point, index) {
  // Create a lettered icon for this point using our icon class
  var letter = String.fromCharCode("A".charCodeAt(0) + index);
  var letteredIcon = new GIcon(baseIcon);
  letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";

  // Set up our GMarkerOptions object
  markerOptions = { icon:letteredIcon };
  var marker = new GMarker(point, markerOptions);

  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("Marker <b>" + letter + "</b>");
  });
  return marker;
}

o meu problema está com esta parte: GEvent.addListener
como ponho isto a funcionar? eu apenas tenho um "pin" e não é nada como este com letras, por isso acho o caso bem mais simples. No entanto a minha ignorância não dá para mais...

Será que algum de vocês me poderá dar uma ajudinha?
gratos!
Ir para o topo Ir para baixo
K@tuyci
Mini
K@tuyci


Mensagens : 34
Data de inscrição : 11/10/2008
Idade : 38
Localização : Coimbra, Sem Casa, Portugal

Google Maps API Empty
MensagemAssunto: Re: Google Maps API   Google Maps API Icon_minitimeDom Dez 28, 2008 9:45 am

ups esquecime de postar o meu codigo...
Código:

function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(40.207330, -8.424155), 16);
      var mapControl = new GMapTypeControl();
      map.addControl(mapControl);
      map.addControl(new GSmallMapControl());
      map.setMapType(G_HYBRID_MAP);
      
      var baseIcon = new GIcon(G_DEFAULT_ICON);
      baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
      baseIcon.iconSize = new GSize(20, 34);
      baseIcon.shadowSize = new GSize(37, 34);
      baseIcon.iconAnchor = new GPoint(9, 34);
      baseIcon.infoWindowAnchor = new GPoint(9, 2);
      markerOptions = { icon:baseIcon };
      
      var point = new GLatLng(40.207330, -8.424155)
      map.addOverlay(new GMarker(point, markerOptions));
      
      }
    }
Ir para o topo Ir para baixo
Andre Martins
Caneco
Andre Martins


Mensagens : 162
Data de inscrição : 18/11/2007

Google Maps API Empty
MensagemAssunto: Re: Google Maps API   Google Maps API Icon_minitimeDom Dez 28, 2008 3:15 pm

Primeiro, quero perguntar-te se vais fazer a página de raiz em HTML? Segundo, dentro do google maps, não precisas de saber o código para o colocares na página. Se vires o meu website:
http://www.andremartins.synthasite.com/index.php

eu tenho lá o googlemap inserido, e como obtive o código? Foi simples, as aplicações deste website maker permitem que metas tudo como queres e depois fazes, "generate code", et voilá, c'est ça!!!

Por isso, se queres bater com o cabeção, força continua e depois ensina-nos como se faz, se queres uma cena simples, eficaz e bonita sem stresses usa um website maker.

Wink

Vou ver se te consigo gerar o código que percisas. farao
Ir para o topo Ir para baixo
K@tuyci
Mini
K@tuyci


Mensagens : 34
Data de inscrição : 11/10/2008
Idade : 38
Localização : Coimbra, Sem Casa, Portugal

Google Maps API Empty
MensagemAssunto: Re: Google Maps API   Google Maps API Icon_minitimeDom Dez 28, 2008 3:22 pm

basicamente estou a usar o dreamweaver e só saltei para o código propriamente dito agora com isto do google maps.
sei que o dreamweaver pode ter um pacote/plugin em que ele adiciona tudo o que quiseres ao "teu" google map duma maneira mt user-friendly. No entanto tive alguns problemas com a posição correcta dos endereços.

assim, obrigado pela sugestao do websitemaker mas não se aplica muito neste caso.

vou continuar a investigar/tentar!
Ir para o topo Ir para baixo
K@tuyci
Mini
K@tuyci


Mensagens : 34
Data de inscrição : 11/10/2008
Idade : 38
Localização : Coimbra, Sem Casa, Portugal

Google Maps API Empty
MensagemAssunto: Re: Google Maps API   Google Maps API Icon_minitimeSex Fev 13, 2009 8:13 am

graças á ajuda do JP descobrimos como pôr a coisa a funcionar:

basicamente temos de criar primeiro a função do balao onde aparecerá o texto
Código:
// Balao

      function createMarker(point, markerOptions, myMessage) {
      var marker = new GMarker(point, markerOptions);
      marker.value = 'Marker Value';
      GEvent.addListener(marker,"click", function() {
      var myHtml = myMessage;
      map.openInfoWindowHtml(point, myHtml);
      });
      return marker;
      }

depois quando criamos o pin na posicao que queremos, deveremos definir que uma das opções do overlay será a função acima referida
Código:
var baseIcon = new GIcon(G_DEFAULT_ICON);
      baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
      baseIcon.iconSize = new GSize(20, 34);
      baseIcon.shadowSize = new GSize(37, 34);
      baseIcon.iconAnchor = new GPoint(9, 34);
      baseIcon.infoWindowAnchor = new GPoint(9, 2);
      markerOptions = { icon:baseIcon };
      
      var point = new GLatLng(40.207330, -8.424155)
      map.addOverlay(createMarker(point, markerOptions)

se queremos que apareça a seguinte frase "WhatHaveIDone, Conseguimos", a ultima linha do codigo acima ficaria assim:
Código:
map.addOverlay(createMarker(point, markerOptions, "WhatHaveIDone, Conseguimos")

aí fica a solução
Ir para o topo Ir para baixo
Conteúdo patrocinado





Google Maps API Empty
MensagemAssunto: Re: Google Maps API   Google Maps API Icon_minitime

Ir para o topo Ir para baixo
 
Google Maps API
Ir para o topo 
Página 1 de 1
 Tópicos semelhantes
-
» Google Earth no Ubuntu

Permissões neste sub-fórumNão podes responder a tópicos
whathaveidone :: Informática :: Informática e tecnologia-
Ir para: