whathaveidone Linux, Bioquimica, Jantaradas, Profissionalismo e um cafezinho |
| | Google Maps API | |
| | Autor | Mensagem |
---|
K@tuyci Mini
Mensagens : 34 Data de inscrição : 11/10/2008 Idade : 38 Localização : Coimbra, Sem Casa, Portugal
| Assunto: Google Maps API Dom 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! | |
| | | K@tuyci Mini
Mensagens : 34 Data de inscrição : 11/10/2008 Idade : 38 Localização : Coimbra, Sem Casa, Portugal
| Assunto: Re: Google Maps API Dom 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)); } } | |
| | | Andre Martins Caneco
Mensagens : 162 Data de inscrição : 18/11/2007
| Assunto: Re: Google Maps API Dom 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. Vou ver se te consigo gerar o código que percisas. | |
| | | K@tuyci Mini
Mensagens : 34 Data de inscrição : 11/10/2008 Idade : 38 Localização : Coimbra, Sem Casa, Portugal
| Assunto: Re: Google Maps API Dom 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! | |
| | | K@tuyci Mini
Mensagens : 34 Data de inscrição : 11/10/2008 Idade : 38 Localização : Coimbra, Sem Casa, Portugal
| Assunto: Re: Google Maps API Sex 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 | |
| | | Conteúdo patrocinado
| Assunto: Re: Google Maps API | |
| |
| | | | Google Maps API | |
|
Tópicos semelhantes | |
|
| Permissões neste sub-fórum | Não podes responder a tópicos
| |
| |
| |
|