Desenvolvimento Com API Googlemaps

Embed Size (px)

Citation preview

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    1/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    Desenvolvimento com o API de Google Maps

    Autores do manual

    Este manual foi criado pelos seguintes colaboradores de Criarweb.com:

    Javier Chaurehttp://www.xski.net (2 captulos!

    Miguel Angel Alvarez -Tradução de JML (2" captulos!

    Desenvolvimento com o API de Google Mas! """#criar"e$#com%desenvolvimento-google-mas%  # $s manuais de Criar%eb.com t&m cop'right dos autores. )o reprodu*ir sem autori*a+)o.

    ,

    http://www.desarrolloweb.com/http://www.xski.net/http://www.criarweb.com/desenvolvimento-google-maps/http://www.xski.net/http://www.criarweb.com/desenvolvimento-google-maps/http://www.desarrolloweb.com/

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    2/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    O básico para começar a desenvolver com Google Maps I

    -m dos ltimos servi+os do gigante oogle 0ue mais deu o 0ue falar 1 oogle Maps. Em um

    navegador e com um simples cli0ue o usu3rio pode dar a volta virtual pelo mundodesfrutando de fotos a1reas de grande 0ualidade em algumas *onas e do mapeamentovetorial completo de outras. 4or1m o interessante do servi+o 1 0ue oogle oferece uma 546(5pplication 4rogramming 6nterface! para todos a0ueles interessados em usar este servi+o eintegra7lo em sua pr8pria p3gina de forma simples e gratuita. 5o longo deste artigo veremosos fundamentos para integrar oogle Maps em nosso website e atrav1s de um exemplocriaremos um primeiro mapa usando as funcionalidades mais b3sicas da 546.

    5 caracterstica 0ue sem dvida mais chama a aten+)o do funcionamento de oogle Maps 1 asua interatividade. 4odemos clicar v3rias ve*es no mapa para nos movermos pelo mundo dar*oom e escolher o tipo do mapa sem necessidade de recarregar a p3gina tudo isso de formaf3cil e intuitiva. Este tipo de aplica+)o web se en0uadra dentro da tecnologia 0ue 5daptive 4athdenominou 595 (5s'nchronous 9avascript ; M

    595 n)o 1 uma nova tecnologia e sim uma combina+)o de tecnologias =3 existentes paraoferecer uma nova vis)o na hora de criar aplica+>es web. ?eguindo um plane=amento 595usaremos C?? e @ABM< para a apresenta+)o dos dados o @$M (@ocument $b=ect Model! paratratar dinamicamente a apresenta+)o destes dados M< e ?es 595 em oogle ?uggest e mail.

    Como vimos anteriormente na introdu+)o deste artigo oogle nos permite usar oogle Mapsem nossa p3gina web de forma gratuita. 5 seguir veremos como temos de proceder parareali*ar nosso primeiro mapa vendo os fundamentos da 546 0ue oogle nos oferece.

    $s re0uisitos para come+ar a trabalhar s)o realmente escassos. Com um simples editor dehtml e um servidor pblico podemos come+ar a criar mapas em nosso domnio. G importante

    assinalar 0ue o servidor onde hospedarmos nossos scripts para oogle Maps h3 de ser pblicoentre outras ra*>es por0ue oogle monitori*ar3 o uso 0ue fi*ermos do mapa de acordo comseus termos e condi+>es de uso.

    $ primeiro passo para come+ar a usar oogle Maps 1 obter uma chave (ke'! 0ue 1 concedida0uando fa*emos a inscri+)o no servi+o. Esta chave 1 nica para cada usu3rio de oogle Maps e1 restritiva no 0ue se refere ao seu uso =3 0ue s8 nos permite usar os scripts em um dosdiret8rios de nosso servidor.

    -ma ve* 0ue tivermos nossa chave =3 estaremos em condi+>es de criar nosso primeiro mapa:

    HI@$CBJ4E html 4-K

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    3/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    Hhtml xmlnsNhttp://www.wL.org/,OOO/xhtml xmlns:vNurn:schemas7microsoft7com:vmlHhead

    Hmeta http7e0uivNcontent7t'pe contentNtext/htmlP charsetN-BQ7R/

    Htitle6ntrodu+)o a oogle Maps 7 Criar%ebH/title

    Hscript srcNhttp://maps.google.com/mapsSfileNapiTvN,Tke'N5@6C6$EU?-5UCA5VEU5W-6t'peNtext/=avascriptH/script

    H/head

    Hbod'Hdiv idNmap st'leNwidth: X""pxP height: L""pxH/divHscript t'peNtext/=avascript

    var map N new Map(document.getElementK'6d(map!!Pmap.setMapB'pe(U?5BE

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    4/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    previamente para nossa camada container. ote 0ue o mapa se adaptar3 ao tamanho0ue tivermos especificado para esta camada.

    • map.setMapB'pe(U?5BE

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    5/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    $ primeiro 0ue necessitamos s)o as coordenadas dos novos pontos neste caso a 4la*a deCibeles e a 4la*a de eptuno. 5 seguir associaremos um marcador a cada um dos pontos e omostraremos no mapa. $ c8digo 0ue mostra este segundo mapa 1 o seguinte:

    HI@$CBJ4E html 4-K

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    6/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

      map.center5ndYoom(point L!P

    H/script

    H/bod'H/html

    Como se pode ver declaramos uma vari3vel point a partir da 0ual criamos o marcador paraposteriormente mostr37lo no mapa com add$verla'. esta ocasi)o centrali*amos o mapa noltimo ponto declarado o correspondente F 4la*a de Cibeles.

    ]timo =3 temos um mapa criado com uma s1rie de pontos assinalados sobre ele por1m n)ocontribuem com nenhuma informa+)o ao visitante. $ apropriado seria satisfa*er a curiosidadedo usu3rio proporcionando7lhe algo de informa+)o associada a esse ponto. 5dicionamos ent)oalgo mais de informa+)o a nossos marcadores mostrando umas =anelas informativas 0ue nosindi0uem o nome da locali*a+)o fsica sobre a 0ue nos encontramos:

    HI@$CBJ4E html 4-K

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    7/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

      H/script

    H/bod'

    H/html

    Este c8digo nos gera o seguinte mapa no 0ual ao clicar sobre o ponto da 4la*a de Cibeles

    Efetivamente mostra7se a =anela informativa com os dados associados a esse ponto. esteexemplo criamos uma fun+)o 0ue nos cria os markers e seus correspondentes info%indowspara economi*ar algo de c8digo. Esta pe0uena fun+)o recebe como parmetros o 4oint onde0ueremos locali*ar o marker e um parmetro nome 0ue cont1m a informa+)o 0ue 0ueremosmostrar na =anela informativa associada.

    A3 0ue resenhar 0ue para associar o aparecimento da =anela com o cli0ue do usu3rio sobrenosso ponto temos 0ue associar tal evento 0ue 1 o 0ue se fa* na senten+a:

    Event.addes mais b3sicas de oogle Maps 0ue proporcionam asferramentas mais rudimentares para mane=ar o servi+o. 5pesar de n)o haver aprofundadosobre a verdadeira potencialidade do servi+o residente no uso de M

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    8/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

     Artigo por Javier Chaure

    Mapas de Google API 2

    Certamente =3 conhecemos os Mapas de oogle um sistema 0ue permite acessar a fotos desat1lite de todo o mundo 0ue teve bastante sucesso entre os 6nternautas. ?e estamos lendoeste artigo at1 poderemos saber 0ue os Mapas de oogle t&m um 546 atrav1s da 0ualpodemos integr37lo como servi+o em uma p3gina web. 6sto permite 0ue em uma p3gina webdesenvolvida por n8s mesmo possamos colocar mapas e vistas sat1lite de diferentes pontos doplaneta tudo de maneira gratuita.

    Kom pois em Criar%eb.com =3 havamos publicado um par de artigos sobre os Mapas deoogle 0ue explicavam as regras mais b3sicas para come+ar a publicar mapas sat1lite emnosso site.

    • $ b3sico para come+ar a desenvolver com oogle Maps 6 • @esenvolver com oogle Maps 66

    4ero estes dois artigos se utili*avam uma 546 0ue oogle atuali*ou por tanto se tornavanecess3rio uma revis)o para mostrar c8digos de integra+)o de oogle Maps 0ue se=amcompatveis com o 546 0ue se utili*a agora.

    Entretanto os artigos anteriores continuam sendo muito interessantes para ler por0ueexplicam algumas coisas b3sicas como obter uma chave (e'! de oogle registrando7nos nosite de oogle Maps para poder utili*ar os mapas em nosso site.

    5gora veremos um c8digo para criar um mapa conforme Fs especifica+>es do oogle Maps 5462.

    HhtmlHheadHMEB5 ABB47EW-6VNContent7B'pe C$BEBNtext/htmlPcharsetN6?$7RR\O7,HtitleExemplo de oogle Maps 546H/titleHscript srcNhttp://maps.google.com/mapsSfileNapiTvN2Tke'N?-5 CA5VE $$

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    9/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

      H/scriptH/headHbod' onloadNload(! onunloadN-nload(!Hdiv idNmap st'leNwidth: Z,\pxP height: X""pxH/div

    H/bod'H/html

    $ c8digo est3 comentado para uma melhor compreens)o. 5gora daremos umas explica+>esadicionais:

    4rimeiro embora este=a mais tarde no c8digo vamos ver o 0ue h3 no bod' da p3gina. A3 0uever 0ue definimos um evento onloadNload(! 0ue serve para chamar F fun+)o 0ue gera omapa uma ve* 0ue tiver terminado de carregar a p3gina.

    @entro do corpo da p3gina observemos na eti0ueta div onde se mostrar3 o mapa:

    Hdiv idNmap st'leNwidth: Z,\pxP height: X""pxH/div

    $ tamanho definido com estilos a esta camada 1 importante por0ue ser3 o tamanho devisuali*a+)o do mapa. $ 546 de oogle Maps reconhecer3 a largura e altura do container paramostrar um mapa =ustamente ocupando esse espa+o.

    5gora observamos o c8digo 9avascript.

    4rimeiro se inclui a biblioteca onde est3 o 546 9avascript para os mapas de oogle.

    Hscript srcNhttp://maps.google.com/mapsSfileNapiTvN2Tke'N?-5 CA5VE $$

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    10/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    Tipos de mapa en Google Maps

    5o desenvolver com oogle Maps podemos escolher o tipo de mapa 0ue os usu3rios ver)o

    entre as diferentes vistas pr17definidas como s)o a vista sat1lite vista de ruas o vista hbrida(sat1lite e ruas em modo semi7transparente.

    4ara definir o tipo de mapa em um mapa de oogle temos o m1todo setMapB'pe(! da classeMap2. $ m1todo setMapB'pe(! recebe o tipo de mapa 0ue se dese=a ver. princpio existemos seguintes tipos de mapa:

    G,&.MAL,MAP G para um mapa normal 0ue 1 o mapa poltico com os nomes de locali*a+>es. Este mapa 1 odefinido por padr)o. princpio aparecem os diferentes pases por1m se ampliarmos veremosas cidades importantes estradas etc e se dermos mais *oom sobre um povoado veremos osnomes das ruas pra+as bairros etc.

    G,/AT0LLIT0,MAP Este mapa permite ver o mundo com imagens tomadas por sat1lite.

    G,123.ID,MAP Este mapa combina a vista sat1lite e a vista normal. ?obre as fotos sat1lite se pintam em cimaas diferentes locali*a+>es ruas etc.

    Ve=amos um mapa de oogle no 0ual definimos o tipo de mapa. Mostramos uma vista sat1liteneste caso.

    HhtmlHheadHMEB5 ABB47EW-6VNContent7B'pe C$BEBNtext/htmlPcharsetN6?$7RR\O7,HtitleExemplo de oogle Maps 546H/titleHscript srcNhttp://maps.google.com/mapsSfileNapiTvN2Tke'N5W-67?-57CA5VE t'peNtext/=avascriptH/scriptHscript t'peNtext/=avascript

     //HIC@5B5 //fun+)o para carregar um mapa de oogle. //?er3 chamada 0uando a p3gina tiver terminado de carregar. Evento onloadfunction load(! ̂  //comprovamos se o navegador for compatvel com os mapas de google  if (Krowser6sCompatible(!! ^  //instanciamos um mapa com Map passando uma refer&ncia F camada ou Hdiv onde 0uisermos mostrar omapa  var map N new Map2(document.getElementK'6d(map!!P

     //centrali*amos o mapa em uma latitude e longitude dese=adas  map.setCenter(new

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    11/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    pela chave de usu3rio do 546 proporcionada em oogle ao nos registrar para usar seusmapas em nosso web site. http://maps.google.com/mapsSfileNapiTvN2Tke'N5W-67?-57CA5VE

    5 linha map.setMapB'pe(U?5BE

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    12/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

      map.addControl(new MapB'peControl(!!P  map.setMapB'pe(U?5BEes para mudar entre diferentes tipos demapa (mapa poltico de ruas e estradas mapa sat1lite e mapa hbrido 7ruas e estradassobre o fundo de sat1lite!

    • $verviewMapControl: Com este controle aparece um pe0ueno mapa na es0uinainferior direita onde aparece uma vista geral com menos *oom do mapa atual a atrav1sdo 0ual tamb1m podemos nos mover.

    Desenvolvimento com o API de Google Mas! """#criar"e$#com%desenvolvimento-google-mas%  # $s manuais de Criar%eb.com t&m cop'right dos autores. )o reprodu*ir sem autori*a+)o.

    ,2

    http://www.desarrolloweb.com/http://www.criarweb.com/desenvolvimento-google-maps/http://www.criarweb.com/desenvolvimento-google-maps/http://www.criarweb.com/desenvolvimento-google-maps/http://www.criarweb.com/desenvolvimento-google-maps/http://www.desarrolloweb.com/

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    13/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    Adicionar controles a um maa de Google 

    $s controles de usu3rio para os mapas de oogle 0ue vimos se incluem com uma simples

    instru+)o 9avascript na hora de criar o mapa. Como os controles =3 est)o pr17definidos no 546de oogle Maps simplesmente temos 0ue associ37los ao mapa 0ue estamos criando.

    4ara isso se utili*a um m1todo da classe Map2 chamado addControl(!. 5 classe Map2 1 a0ue se utili*a para instanciar um mapa de google. Com ela criamos o ob=eto mapa e logo aeste ob=eto com addControl(! lhe associamos os controles dese=ados. $ m1todo addControl(!recebe uma instancia do controle de usu3rio 0ue se dese=a criar.

    4or exemplo se temos o mapa em um ob=eto chamado map executaremos o m1todoaddControl(! desta maneira:

    map.addControl(new MapB'peControl(!!P

    4odemos incluir todos os controles 0ue dese=armos fa*endo v3rias chamadas ao m1todoaddControl(! passando como parmetro distintas instancias dos controls 0ue 0ueremos incluir.

    Ve=amos um exemplo completo de um mapa de oogle 0ue tem uma s1rie de controles deusu3rio:

    HhtmlHheadHMEB5 ABB47EW-6VNContent7B'pe C$BEBNtext/htmlPcharsetN6?$7RR\O7,HtitleExemplo de oogle Maps 546H/titleHscript srcNhttp://maps.google.com/mapsSfileNapiTvN2Tke'5W-67?-57CA5VE7@$7546

    t'peNtext/=avascriptH/scriptHscript t'peNtext/=avascript //HIC@5B5function load(! ̂  if (Krowser6sCompatible(!! ^  var map N new Map2(document.getElementK'6d(map!!P

    map.setCenter(new

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    14/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    Incluir um mapa de tipo fsicoeste artigo vamos mostrar como trabalhar com um tipo de mapa de oogle especialapresentado h3 pouco tempo no sistema de oogle Maps. Brata7se do mapa fsico 0ue mostraa terra com um desenho de sua superfcie 0ue representa as montanhas rios e outrosacidentes geogr3ficos.

    $ mapa fsico foi apresentado h3 relativamente pouco tempo. 4elo menos 0uando iniciamoseste manual do 546 de oogle Maps n)o existia. 4ortanto nos artigos publicadosanteriormente n)o havamos falado da possibilidade de integrar um mapa fsico. Veremos issoagora.

    o controle de sele+)o de tipo de mapa n)o aparece por padr)o o tipo de mapa fsico com o

    0ue n)o se pode selecionar pelo usu3rio a n)o ser 0ue n8s fa+amos algo para habilit37lo. $stipos de mapas disponveis para o usu3rio por padr)o na hora de trabalhar com oogle Mapss)o os 0ue havamos visto anteriormente:

    • U$DM5

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    15/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    4ara acabar vou mostrar como criar um mapa de oogle fsico 0ue ademais tenha um controle0ue permita mudar entre os tipos de mapa poltico sat1lite e fsico.

    function load(! ̂  if (Krowser6sCompatible(!! ^  var map N new Map2(document.getElementK'6d(map!!P

    map.setCenter(new

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    16/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    classe 4oint 0ue recebe no construtor a longitude e latitude desse ponto.

    var point N new 4oint (7L.["LXR,\\XOR\"XZX X".X,ZROR2Z,,R[R2!P

    2! Criamos a marca4ara criar a marca simplesmente utili*amos a classe Marker 0ue em seu construtor devereceber v3rios valores. 4or en0uanto colocaremos somente o nico valor 0ue 1 obrigadoindicar 0ue 1 o ponto sobre o 0ue colocar a marca criado no passo anterior.

    var marker N new Marker(point!P

    06emlo comleto 

    6sso 1 tudo 0ue necessitamos saber por en0uanto. Embora logo veremos outro detalhesinteressantes 0ue se podem personali*ar nas marcas.

    Ve=amos o c8digo completo de um mapa de oogle com uma marca na pra+a 4uerta del ?olde Madri.

    HhtmlHheadHMEB5 ABB47EW-6VNContent7B'pe C$BEBNtext/htmlPcharsetN6?$7RR\O7,HtitleExemplo de oogle Maps 546H/titleHscript srcNhttp://maps.google.com/mapsSfileNapiTvN2Tke'N5W-67?-57CA5VE7$$

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    17/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    var marker N new Marker(point meu6cone!P

    a vari3vel meu6cone neste caso 1 um ob=eto da classe 6con 0ue pode criar assim:var meu6cone N new 6con(U@EQ5-

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    18/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    map.addControl(new

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    19/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    map.setMapB'pe(U$DM5

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    20/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    H/script

    H/head

    Hbod'  Hdiv idNmap st'leNwidth: [Z\pxP height: LRRpxH/div H/bod'H/html

     Artigo por Miguel Angel Alvarez - Tradução de JML

    Mostrar a posiç#o de uma marca de Google Maps em um formulário

    5gora vamos complicar um pouco o exemplo anterior de recolocar uma marca em um mapa de

    oogle para colocar em um formul3rio na pr8pria p3gina os valores de latitude e longitude.6sto pode nos servir para saber o ponto exato onde se clica para poder obter a latitude elongitude de 0ual0uer ponto geogr3fico.

    o exemplo vamos ter o mapa de oogle e um formul3rio. $ mapa de google assim como otratamento do evento com o 546 de oogle Maps =3 o vimos no captulo anterior portanto n)oser3 explicado novamente.

    Veremos ent)o os novos elementos neste exerccio. 4rimeiro o formul3rio:

    Hform actionN idNposicao nameNposicao: Hinput t'peNtext nameNx valueN /Hbr /

    J: Hinput t'peNtext nameN' valueN /H/form

    Vemos o formul3rio 0ue 1 como 0ual0uer um 0ue tivermos utili*ado em ABM

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    21/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    HI@$CBJ4E html 4-K

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    22/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    pode mudar o *oom para ampliar ou redu*ir a defini+)o. este artigo vamos aprender a obtero *oom atual de um mapa 0uando se produ*a um evento ou se=a como resposta a uma a+)ode um usu3rio. $s eventos em mapas de oogle =3 foram tratados anteriormente neste

    manual de fato este artigo ir3 ampliar outro 0ue =3 havamos reali*ado: Mostrar a posi+)o deuma marca de oogle Maps em um formul3rio. este caso mostraremos o *oom atual do mapade google ao clicar o usu3rio no mapa e o escreveremos em um formul3rio na pr8pria p3gina.a verdade saber o *oom em um mapa 1 simples s8 temos 0ue utili*ar o m1todo getYoom(!da classe Map2. getYoom(! devolve um nmero inteiro 0ue 1 o *oom atual do mapa.

    Colo0uemos 0ue temos o ob=eto mapa em uma vari3vel chamada map. ?endo assimexecutaremos o m1todo com isto:

    *oomUatual N map.getYoom(!P

    5ssim teramos salvo em uma vari3vel *oomUatual o valor inteiro do *oom do mapa.

    ?e 0uisermos mostrar em um formul3rio na p3gina o *oom atual como resposta ao eventocli0ue faremos algo como isto:

    Event.add

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    23/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    melhor o tema.

    Como se disse para criar um tratamento de um evento produ*ido pelo usu3rio se tem 0ueadicionar um escutador de evento com o m1todo addesdeste passo consultar o artigo onde se tratam dos eventos de mapas de google em geral.

    $ mane=ador de evento *oomend ou se=a a fun+)o 0ue se executa 0uando se produ* oevento recebe duas vari3veis. -ma 1 o antigo *oom 0ue tinha o mapa e outra 1 o novo *oom0ue se colocou.

    ?upomos 0ue temos criado um mapa de google e 0ue est3 declarado no ob=eto map da classeMap2. Ent)o se 0uis1ssemos criar um evento para 0ue nos mostrasse em uma caixa dealerta as duas vari3veis com o antigo *oom e o novo faramos algo como isto:

    Event.add

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    24/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

     =anela ou por0ue se alteraram os atributos width e height da capa com 9avascript ou por0ual0uer modo7 mudar3 automaticamente o tamanho do mapa para se a=ustar dinamicamenteao espa+o disponvel.

    @ito isto pode resultar pouco revelador este artigo por0ue n)o vamos ver nada de 9avascriptnem de cria+)o de mapas de oogle e sim mostraremos como construir com C?? tendo emconta 0ue em uma das camadas h3 um mapa de oogle. )o obstante certamente algumasdas informa+>es proporcionadas a0ui n)o ser)o triviais para os leitores.

    Em Criar%eb.com oferecemos um manual no 0ual se pode aprender a trabalhar com o 546 deoogle Maps.

    Bamb1m recomendo a leitura do material 0ue oferecemos em Criar%eb.com sobre aconstru+)o C?? pois darei por explicado os aspectos sobre constru+)o com folhas de estilos eportanto n)o repetirei este contedo neste artigo.

    s atri$utos de altura e largura de um maa são a camada )ue o cont:m 

    $ exemplo mais simples 0ue podemos encontrar para construir um mapa de google 1 0uetenha dimens>es em largura e altura fixas. G como colocamos os mapas no manual at1 estemomento:

    Hdiv idNmap st'leNwidth: [Z\pxP height: LRRpxH/div

    este exemplo o mapa ocupa [Z\ pixel de largura e LRR de altura. 6sto n)o tem nenhumsegredo.

    4or1m o 0ue acontece se 0uisermos 0ue um mapa de oogle Maps tenha a largura de toda a

     =anela do navegadorS 4or0ue sabemos 0ue o navegador pode ter distintos tamanhosdependendo da defini+)o de tela do visitante e se a =anela estiver maximi*ada oudimensionada de 0ual0uer outra forma.

    Ent)o 1 muito simples podemos colocar width:,"" na declara+)o de estilos css da camadaonde est3 o mapa.

    Hdiv idNmap st'leNwidth: ,""P height: LRRpxH/div

    Este mapa ocuparia toda a 3rea disponvel da =anela do navegador ou da camada onde estivercontido.

    $ exemplo se complica se 0uisermos 0ue o mapa de oogle ocupe ademais toda a alturadisponvel no navegador 0ue tamb1m sabemos pode ser vari3vel dependendo dascaractersticas de tela ou do estado da =anela do browser. $ normal 1 0ue prov3ssemos algocomo isto:

    Hdiv idNmap st'leNheight: ,""P width:,""PH/div

    4or1m isto tal 0ual sem fa*er nenhuma outra coisa tem um problema e 1 0uemisteriosamente o mapa aparece va*io ou com height N ". 6sto 1 por0ue os navegadores t&mproblemas ao construir com heightN,"". 5 id1ia para solucion37lo 1 colocar a todas ascamadas 0ue contenham ao mapa height:,"" assim como Fs eti0uetas HK$@J e HABM

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    25/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    .e5er;ncia! 4odemos ver uma Q5W com explica+>es sobre a utili*a+)o do height:,"" em C??.

    5gora ve=amos o exemplo de um mapa de oogle Maps 0ue ocupa toda a largura e altura doespa+o em uma p3gina F parte.

    Construir um maa de Google com "idth e height 9 or:m misturado comoutros elementos 

    4ara acabar veremos um exemplo de constru+)o de um oogle Maps 0ue ocupa o ,"" doespa+o por1m 0ue tem um cabe+alho e uma barra lateral. $ cabe+alho e a lateral ocupam unsespa+os fixos e o mapa de google ocupar3 todo o lugar 0ue os outros elementos da constru+)odeixam livres.

    4ara explic37lo de uma forma mais simples veremos diretamente o exemplo em uma p3gina F

    parte.

    $ exerccio 1 simples por1m necessitaremos conhecimentos de C?? sobre constru+)o eposicionamento. $ c8digo 1 o seguinte:

    HI@$CBJ4E html 4-K

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    26/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    camada 0ue toma o tamanho do cont&iner onde se encontra.  H/div  H/div  Hdiv idNmap st'leNheight: ,""P margin7right:2,"pxPH/div

    H/divH/bod'H/html

     Artigo por Miguel Angel Alvarez - Tradução de JML

    Desen'ar lin'as em mapas de Google

    Continuamos estudando a cria+)o de mapas de oogle com o 546 de oogle Maps nestaocasi)o para mostrar o processo de cria+)o de linhas sobre mapas de oogle. 5s linhas sedesenham em cima dos mapas e se mostram com uma pe0uena transpar&ncia para 0ue sepossa ver o 0ue h3 debaixo delas.

    @esenhar linhas ou polgonos 1 um modo muito interessante de marcar elementos oucaminhos no mapa e 1 muito simples. ?8 necessitamos conhecer previamente alguns conceitossobre a cria+)o de mapas 0ue =3 vimos em artigos anteriores no manual: Manual do 546 deoogle Maps.

    4ara ilustrar este exemplo vamos criar uma linha em um mapa de oogle 0ue vai de Madri aKarcelona. 4odemos ver o exemplo em funcionamento em uma p3gina F parte.

    Classe GPol8line 

    Esta classe serve para desenhar linhas ou polgonos em um mapa. Benta fa*er o trabalhoutili*ando as caractersticas de desenho com vetores dos navegadores e se n)o for possvelsobrep>e uma imagem ao mapa.

    4ara construir um polgono se necessitam v3rios parmetros:

    • 5rra' com os v1rtices das linhas 0ue se indica com os distintos pontos.• 5 cor das linhas 0ue 1 um DK em hexadecimal como os 0ue utili*amos para definir

    cores em ABMes.

    $ nico parmetro 0ue necessitamos indicar de maneira obrigada s)o os pontos das linhas osoutros parmetros s)o opcionais.

    4ara indicar os pontos dos v1rtices se utili*a a classe

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    27/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    var pol'line N new 4ol'line(madrid barcelona """"dd Z ".X!P

    Como vemos se definiu uma linha com dois pontos com cor """"dd 0ue 1 um a*ul com Z

    pixels de largura e ".X de opacidade.Pintar a linha no maa com addverla8 

    4ara 0ue esta linha fi0ue desenhada no mapa se utili*a o m1todo de Map2 chamadoadd$verla'(! ao 0ue lhe passamos por parmetro o pol'line 0ue havamos construdo.

    map.add$verla'(pol'line!P

    Todo o c?digo 

    Este 1 o c8digo completo para a configura+)o do mapa do exemplo:

    function load(! ̂  if (Krowser6sCompatible(!! ^

      var map N new Map2(document.getElementK'6d(map!!Pmap.setCenter(new

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    28/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    especific37lo na hora de instanciar o polgono. 4ara isso primeiro temos 0ue definir uma op+)oadicional ao polgono:

    var opcoesUpoligono N ^geodesic:true`P

    5gora passamos essas op+>es como ltimo parmetro no construtor do ob=eto da classe4ol'line.

    6maginemos 0ue 0ueremos construir um polgono 0ue fa* esta rota: Madri Moscou 6stambulDoma Bunsia e Madri. 4rimeiro criaramos os pontos dessas cidades:

    var madri N new

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    29/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    indeterminado de v1rtices. $ nico 1 0ue o percorrido de v1rtices tem 0ue estar fechado ouse=a come+ar e acabar no mesmo ponto para 0ue n)o se produ*am comportamentosindefinidos na hora de pintar o polgono. Bodos os pontos ou v1rtices t&m 0ue ser indicados

    com um ob=eto e F muralha de jvila (Espanha! e cu=o interior seria a cidade amuralhada. 4rimeirotivemos 0ue obter e gerar os pontos (latitude e longitude com a classe

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    30/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    ocultar e mostrar o polgono por resposta a um evento de usu3rio.

    Esta funcionalidade de mostrar e ocultar polgonos 1 comum Fs distintas overla's 0ue tratamosanteriormente no manual de mapas de oogle (546 de oogle Maps!.

    $ exerccio trata de colocar uma marca e um polgono em um mapa de oogle. 5o clicar amarca se ocultar3 o polgono e ao voltar a clicar se mostrar3 de novo e assim sucessivamente.4odemos ver o exemplo em funcionamento para entender bem o ob=etivo deste manual deoogle Maps.

    Como dissemos no artigo anterior vimos como colocar um polgono em um mapa de oogle. 5nica diferen+a com este caso 1 0ue definimos a vari3vel onde vamos colocar o ob=etopolgono da classe 4ol'gon como global a toda a p3gina. 6sto 1 por0ue teremos 0ue acessareste ob=eto pol'gon atrav1s de outras fun+>es para mostr37lo ou ocult37lo e se n)o estivercomo vari3vel global ser3 impossvel referenci37lo. (4ara criar uma vari3vel global bastadeclar37la fora de 0ual0uer fun+)o olhe o c8digo fonte do exerccio terminado para ver comofa*&7lo.!

    Criamos tamb1m como di*amos uma marca:

    var pontoUmarca N new 4oint (7X.["2 X".Z\["!Pvar marca N new Marker(pontoUmarca!Pmap.add$verla'(marca!P

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    31/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

     Artigo por Miguel Angel Alvarez - Tradução de JML

    &obrepor uma imagem em um mapa de Google

    este artigo do manual de oogle Maps vamos explicar o modo de sobrepor uma imagem aum mapa o 0ue no 546 de desenvolvimento de mapas de oogle chamam round$verla's. . 4ode nos servir para oferecer informa+)o gr3fica do lugar 0ue se est3visuali*ando ou adicionar elementos para chamar a aten+)o do usu3rio.

    5 tarefa 1 muito simples pois s8 necessitamos definir o lugar onde se tem 0ue colar a imagem0ue dese=amos mostrar e a -D< onde se locali*a o ar0uivo gr3fico a sobrepor. 5 imagem 0uecolocarmos sempre aparecer3 sobre o pr8prio fundo tapando o 0ue tiver debaixo.

    5s imagens 0ue se sobrep>em se criam atrav1s da classe round$verla' cu=o construtorrecebe uma -D< ou caminho relativo da imagem e os limites do mapa onde coloc37la.

    var imagem N new round$verla'(ar0uivo7grafico.=pg limitesUimagem!P

    $s limites da imagem s)o por sua ve* outra classe chamada

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    32/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    var map N new Map2(document.getElementK'6d(map!!Pmap.setCenter(new

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    33/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    0ue =3 vimos anteriormente no manual de Criar%eb.com da classe Map2: add$verla'(!.

    map.add$verla'(camadaUpanoramio!P

    Bemos 0ue passar a add$verla'(! a instancia da camada 0ue 0ueremos mostrar 0ue criamosao chamar ao construtor de

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    34/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    function load(! ̂  if (Krowser6sCompatible(!! ^  var map N new Map2(document.getElementK'6d(map!!P

    map.setCenter(new

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    35/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    representa um grande trabalho por0ue teramos 0ue ir pas por pas apontando os pontos dasilhueta em arra's e ademais 0uanto mais detalhistas 0uisermos ser mais pontos teremos0ue extrair. Qeli*mente outras pessoas =3 se encarregaram de obter cada um dos pontos

    geogr3ficos das silhuetas dos pases e al1m do mais disponibili*aram seu trabalho com licen+acop'left para 0ue outros possam utili*37lo em suas explica+>es.

    A3 um pro=eto criado por 5nieto2k 0ue nos servir3 de maneira excelente para obter as linhasde pontos em uma estrutura de dados tipo arra' de coordenadas

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    36/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    Hscript srcNhttp://countr'points.googlecode.com/files/countr'points.=s t'peNtext/=avascriptH/script

    @( 06traio todos os ontos de5inidos ara Portugal var coordenadasUportugal N countr'.4B.coordP

    $s c8digos de pases de duas letras s)o por exemplo 4B para 4ortugal E? para Espanha e KDpara Krasil... Estes c8digos est)o normali*ados segundo normativa 6?$ L,ZZ7,.

    ( Percorrer as coordenadas ara criar os ol7gonos 

    Com um loop percorro os grupos de coordenadas para criar cada um dos polgonos. (4or0uedevemos lembrar 0ue o arra' de coordenadas era de duas dimens>es para cada um dosterrit8rios separados do pas!

    for (iN"P iHcoordenadasUportugal.lengthP i;;!^  map.add$verla'(new 4ol'gon(coordenadasUportugaliZZOOLL 2 ".[ ZZOOLL ".X!!P`

    C?digo comleto ara colorir a7ses 

    5 seguir ponho um c8digo completo a utili*ar para colorir v3rios pases do mundo.

    Hscript srcNhttp://maps.google.com/mapsSfileNapiTvN2Tke'NtuUllevaUapiUgoogleUmapst'peNtext/=avascriptH/scriptHscript srcNhttp://countr'points.googlecode.com/files/countr'points.=s t'peNtext/=avascriptH/scriptHscript t'peNtext/=avascript

     //HIC@5B5

    function load(! ̂  if (Krowser6sCompatible(!! ^  var map N new Map2(document.getElementK'6d(map!!P

    map.setCenter(new

  • 8/20/2019 Desenvolvimento Com API Googlemaps

    37/37

    Manuais e recursos para desenvolvimento webwww.criarweb.com

    `

    window.onloadNload //

    H/script

    $ exemplo anterior pode7se ver em funcionamento em uma p3gina F parte.

    Esperamos 0ue tenha sido possvel entender o processo para pintar pases. o pr8prio blog docriador de Countr'4oints h3 outras aplica+>es sobre a utili*a+)o deste sistema 0ue 1 de ondeme guiei para fa*er o exemplo 0ue vamos publicar em Criar%eb.com.

    Colorir pases pode ser muito bom para dar um pouco mais de vida e melhor aspecto a nossasaplica+>es por1m ademais este exemplo pode servir para aprender a criar um sistema edefinir uma s1rie de coordenadas de elementos para colorir 0ual0uer coisa 0ue necessitemosem mapas geogr3ficos como estados de um pas cidades bairros etc.

     Artigo por Miguel Angel Alvarez - Tradução de JML

    http://www.desarrolloweb.com/http://www.guiarte.com/mapas-google/desarrolloweb/colorear-paises.phphttp://www.anieto2k.com/2008/10/21/countrypoints-paises-por-puntos-para-google-maps/http://www.anieto2k.com/2008/10/21/countrypoints-paises-por-puntos-para-google-maps/http://www.guiarte.com/mapas-google/desarrolloweb/colorear-paises.phphttp://www.anieto2k.com/2008/10/21/countrypoints-paises-por-puntos-para-google-maps/http://www.anieto2k.com/2008/10/21/countrypoints-paises-por-puntos-para-google-maps/http://www.desarrolloweb.com/