Google Maps API: Um exemplo prtico e comentado

Esta semana montei um servio bem simples para poder testar o uso da API do Google Maps. O servio foi oferecido aos congressistas do evento PHP Conference Brasil !!" e era bem simples# cada um entrava e dei$ava marcado seu ponto de origem% com isso obter&amos um mapa demonstrando de onde os participantes vieram e 'uantos (ilometros via)aram. Ainda restam aplicar algumas fun*es + este servio% mas ele serviu como meu teste inicial. ,esolvi ent-o abrir o c.digo fonte e o flu$o de dados do servio para 'ue voc/s possam con0ecer e 'uem sabe comear utili1ar a Google Maps API tamb2m. Utilizando o Google Maps API para localizar congressistas Ateno: Para usar a API voc/ deve registrar sua pr.pria API 3e4# ve)a a'ui

A primeira parte deste sistema% conforme o diagrama anterior% se trata do ar'uivo .0tm onde colocamos o c.digo do Google Maps API% 'ue 2 todo escrito em )avascript. Este ar'uivo se resume as seguintes fun*es# 1. Inicializar o Mapa 5este ponto devemos iniciali1ar o c.digo do mapa% setando os controles 'ue dese)amos ter al2m de setar a posi-o 6center7 inicial do mapa e seu 1oom. 8ava9cript#
1. <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=AP !"#$" type="te%t/&avascript"'</script' 2. <script type="te%t/&avascript"' (. ). *. 2. 8. 1. ?. 14. //<![CDATA[ var +ero,at = new -,at,.g/02(.*11(()(*12112**30)2.212(4142*(24115; //Ponto central (local do evento) function loa6/5 7 if /-9ro:ser s;ompati<le/55 7 var map = new -=ap2/6oc>me.t.get#leme.t9y 6/"map"55; map.a66;o.trol/new -,arge=ap;o.trol/55; //Controles de Zoom, movimento map.a66;o.trol/new -=ap@ype;o.trol/55; // Controle de tipo de mapa

11. 12. 1(. 1). 1*.

map.a66;o.trol/new -Avervie:=ap;o.trol/55; //Mapinha peq eno no canto map.set;e.ter/+ero,at3 *5; //!etar centro do mapa, com nivel " de #oom

//$$$ M%&' C%D' $$$ </script'

2. Ler dados do XML Agora devemos criar uma funo que far a leitura de nosso arquivo XML e criar uma instncia de cada item como um marker no Mapa. Note que para o evento, que nosso ponto central, setamos um ponto !latitude,longitude" central e utili#amos um $cone especial para o mesmo.

8ava9cript#
($ //)andle *M+ 2. -Bo:.loa6Crl/"phpco.f<rasil2442.%ml"3 function/6ata3 respo.se;o6e5 7 (. ). *. 2. 8. 1. ?. 14. 11. 12. 1(. 1). 1*. 12. 18. 11. 1?. 24. 21. 22. 2(. 2). 2*. 22. 28. 21. //Adicionar +inha q e li-a ponto ao evento var polyli.e = new -Polyli.e/J +ero,at3 poi.t K3 "Nff4444"3 15; map.a66Averlay/polyli.e5; var 6a6os = 7 title: markersJiK.getAttri<>te/"tit"53 ico.: my co.M; //Dados map.a66Averlay/new -=arker/poi.t36a6os55; //Criar mar1er M if /markersJiK.getAttri<>te/"tit"5 == "PGP ;o.fere.ce 9rasil 2442"57 //'.ce/0o para ponto central var my co. = new - co./-!B#IAC,@! ;AE3Fev0ico..p.gF5; my co..ico.Li+e = new -Li+e/**3 *)5; my co..ico.A.chor = new -Poi.t/123 *25; Melse7 var my co. = -!B#IAC,@! ;AE; for /var i = 4; i <markers.le.gth; iHH5 7 var poi.t = new -,at,.g/parseIloat/markersJiK.getAttri<>te/"lat"553 parseIloat/markersJiK.getAttri<>te/"l.g"555; 6oc>me.t.get#leme.t9y 6/Fco>.tF5.i..erG@=, = "<<';o.gressistas registra6os: "Hmarkers.le.gthH"</<'"; //P ,licar conta-em var %ml = -Dml.parse/6ata5; var markers = %ml.6oc>me.t#leme.t.get#leme.ts9y@agEame/"marker"5; //+er lista de pontos

2?. (4. (1. (2. ((. (). (*. M //Adicionar na +ista ()TM+) var >l = 6oc>me.t.get#leme.t9y 6/F>llistaF5; var li = 6oc>me.t.create#leme.t/FliF5; li.i..erG@=, = "<<'"HmarkersJiK.getAttri<>te/"tit"5H" 0 \t\tBistO.cia: "H =ath.ro>.6/poi.t.6ista.ceIrom/+ero,at5/14445H "km"; >l.appe.6;hil6/li5;

(2. M5;

%strutura do XML

:M;#
1. <?%ml versio.="1.4"?> 2. <markers> (. ). <marker lat="02(.*11(()(*12112**" l.g="0)2.212(4142*(2411" tit="PGP ;o.fere.ce 9rasil 2442"/> <marker lat="01*.1(81(122()2?21" l.g="0)8.11214)111?12412" tit="Pafael Bohms 0 9rasilia3BI"/>

*. </markers>

3. Setar andler do !lic" Agora devemos di1er ao mapa 'ue ao clicar sobre ele deve ser fornecida uma cai$a de dialogo cu)os dados ser-o usados para criar o mar(er. Ap.s criar este mar(er o sistema deve instanciar uma cone$-o A8A: para um bac(end PHP. Caso o usu<rio cli'ue sobre um mar(er o script deve fa1er o calculo ate o ponto central e apresentar uma )anela de informa-o com este dado.

8ava9cript#
1. -#ve.t.a66,iste.er/map3 "click"3 function/marker3 poi.t5 7 2. if /marker5 7 //!e estiver clicando so,re mar1er (. ). *. 2. 8. 1. ?. 14. 11. 12. 1(. 1). 1*. 12. M var 6a6os = 7 title: .ome M map.a66Averlay/new -=arker/poi.t36a6os55; var c.t = "<6iv i6=Fpop>pF'"; c.t c.t H= "<<r /'BistO.cia: "H=ath.ro>.6/6ista.ce5H" km"; //Calc lar distancia H= "</6iv'"; var tpoi.t = marker.getPoi.t/5; //pe-ar ponto lat por lonvar 6ista.ce = tpoi.t.6ista.ceIrom/+ero,at5/1444;

marker.ope. .foQi.6o:Gtml/c.t5; M else 7 //!e estiver clicando em ponto em ,ranco var .ome = :i.6o:.prompt/"Bigite: EA=# 0 ;i6a6e3#sta6o"5; //Pe-ar te.to para nome do mar1er if /R.ome57 return false

18. 11. 1?. 24. 21. 22. 2(. 2). 2*. 22. 28. 21. M //Montar par3metros var param = Ftit=F H .ome; param param H= F&lat=F H poi.t.lat/5; H= F&l.g=F H poi.t.l.g/5; //Adicionar no *M+ via A2A* var reS = -DmlGttp.create/5; reS.ope./"PAL@"3 "a66marker.php"3 true5; reS.setPeS>estGea6er/F;o.te.t0@ypeF3 Fapplicatio./%0:::0form0>rle.co6e6F5;

reS.se.6/param5;

2?. M5;

A seg#nda parte do sistema se trata de um ar'uivo PHP respons<vel por receber os dados do ponto criado e criar um registro no :M; deste ponto. Cada ponto possui uma latitude% uma longitude e um t&tulo. Como este $ml s. ser< usado na pr.$ima atuali1a-o o script n-o necessita de retornar dados ao script original. PHP#
1. <? 4$ //&ece,e os dados e Cria (. 5$ //De6inir Arq ivo *M+ *. 6efi.e(FI ,#F3"phpco.f<rasil2442.%ml"); 2. 7$ //A,rir *M+ 1. T%mlBoc = new BA=Boc>me.t(F1.4F3F>tf01F); ?. T%mlBoc0'loa6(I ,#); 14. T%mlBoc0'formatA>tp>t = true; 11. (4$ //Criar novo item 1(. T.,ocatio. = T%mlBoc0'create#leme.t(FmarkerF); 1). T.,ocatio.0'setAttri<>te(FlatF3T!PAL@[FlatF]); 1*. T.,ocatio.0'setAttri<>te(Fl.gF3T!PAL@[Fl.gF]); 12. T.,ocatio.0'setAttri<>te(FtitF3T!PAL@[FtitF]); 18. (8$ //Adicionar ao n9 mar1ers 1?. T.,ocatio. = T%mlBoc0'first;hil60'appe.6;hil6(T.,ocatio.); 24. 4($ //!alvar arq ivo 22. T%mlBoc0'save(I ,#); m novo strin- no *M+

2(. 2). ?>

Assim temos um script completo. 5este caso pedimos para 'ue al2m de mostrar o mapa com os mar(er o script deve tamb2m imprimir uma ;I9= com o te$to de todos registros e uma contagem de 'uantos estes s-o.O e$emplo 2 bem simples% mas ac0o 'ue passa uma id2ia inicial do 'ue pode ser feito e como pode ser feito utili1ando o Google Maps API.