$30 off During Our Annual Pro Sale. View Details »

Melhorando suas Skills com a Google Maps API

Melhorando suas Skills com a Google Maps API

Evento: GDG DevFest NE 2015

Nesta talk, irei abordar os conceitos básicos para se utilizar a API do Google Maps, mostrarei outras engines como alternativas, casos de uso, exemplos e como personalizar um mapa de acordo com o seu projeto.

Thulio Philipe

October 18, 2015
Tweet

More Decks by Thulio Philipe

Other Decks in Programming

Transcript

  1. Google Maps API
    Melhorando suas Skills com

    View Slide

  2. Recife, PE
    Front-end Engineer @ Epitrack
    Thulio Philipe
    Web Apps @ Unibratec
    @thulioph

    View Slide

  3. Recife, PE
    Front-end Engineer @ Epitrack
    Thulio Philipe
    Web Apps @ Unibratec
    @thulioph_

    View Slide

  4. View Slide

  5. Era uma vez...

    View Slide

  6. Como Começar?

    View Slide

  7. 1. Crie um projeto
    2. Ative a api
    3. Adquira uma chave válida

    View Slide

  8. https://console.developers.google.com/project
    Crie um projeto

    View Slide

  9. https://console.developers.google.com/project/nome-do-projeto/apiui/apis/library
    Ativando a API

    View Slide

  10. https://console.developers.google.com/project/nome-do-projeto/apiui/credential
    Adquirindo uma chave válida

    View Slide

  11. Let's cook!
    code

    View Slide

  12. Preparando o HTML

    View Slide

  13. Preparando o CSS

    View Slide

  14. Exibindo um mapa simples
    https://gist.github.com/thulioph/8150735

    View Slide

  15. Exibindo um mapa simples
    https://gist.github.com/thulioph/8150735

    View Slide

  16. Exibindo um mapa simples
    https://gist.github.com/thulioph/8150735

    View Slide

  17. Exibindo um mapa simples
    https://gist.github.com/thulioph/8150735

    View Slide

  18. http://s.codepen.io/thulioph/debug/LpVVmB?
    Exibindo um mapa simples

    View Slide

  19. Modificando os controles do usuário

    View Slide

  20. Modificando os controles do usuário

    View Slide

  21. Modificando os controles do usuário

    View Slide

  22. Modificando os controles do usuário

    View Slide

  23. Modificando os controles do usuário

    View Slide

  24. Modificando os controles do usuário

    View Slide

  25. Modificando os controles do usuário

    View Slide

  26. Modificando os controles do usuário

    View Slide

  27. http://s.codepen.io/thulioph/debug/YyXXjB?
    Modificando os controles do usuário

    View Slide

  28. Inserindo marcador personalizado

    View Slide

  29. Inserindo marcador personalizado

    View Slide

  30. http://s.codepen.io/thulioph/debug/PPqqyY?
    Inserindo marcador personalizado

    View Slide

  31. InfoWindow

    View Slide

  32. InfoWindow

    View Slide

  33. InfoWindow

    View Slide

  34. InfoWindow

    View Slide

  35. InfoWindow
    Não precisa vincular a um evento

    View Slide

  36. http://s.codepen.io/thulioph/debug/yYNNQM?
    InfoWindow

    View Slide

  37. Modificando a cor do mapa

    View Slide

  38. Modificando a cor do mapa
    1. crie um array de estilos

    View Slide

  39. Modificando a cor do mapa
    1. crie um array de estilos

    View Slide

  40. Modificando a cor do mapa
    1. crie um array de estilos

    View Slide

  41. Modificando a cor do mapa
    1. crie um array de estilos

    View Slide

  42. Modificando a cor do mapa
    2. atribuindo o array ao mapa

    View Slide

  43. Modificando a cor do mapa
    2. atribuindo o array ao mapa

    View Slide

  44. Modificando a cor do mapa
    2. atribuindo o array ao mapa

    View Slide

  45. Modificando a cor do mapa
    2. atribuindo o array ao mapa

    View Slide

  46. http://s.codepen.io/thulioph/debug/YyXXdg?
    Modificando a cor do mapa

    View Slide

  47. Casos de uso

    View Slide

  48. Preenchimento de formulário
    Casos de uso
    https://www.ifood.com.br/

    View Slide

  49. Preenchimento de formulário
    Casos de uso
    https://www.ifood.com.br/

    View Slide

  50. Preenchimento de formulário
    Casos de uso
    http://www.pizzariaatlantico.com.br/

    View Slide

  51. Preenchimento de formulário
    Casos de uso
    http://www.pedidosja.com.br/

    View Slide

  52. Preenchimento de formulário
    Casos de uso
    http://www.chinainbox.com.br/

    View Slide

  53. Visualização de dados
    Casos de uso
    www.flunearyou.org

    View Slide

  54. Visualização de dados
    Casos de uso
    www.foursquare.com

    View Slide

  55. Traçar rota
    Casos de uso
    www.pianolab.com.br

    View Slide

  56. Outras engines

    View Slide

  57. www.cartodb.com www.mapnik.org www.mapbox.com www.leafletjs.com
    Outras engines
    Outras alternativas

    View Slide

  58. Demo (666)

    View Slide

  59. http://thulioph.github.io/twitter-realtime
    Demo

    View Slide

  60. Perguntas?

    View Slide

  61. http://tableless.com.br/api-google-maps-v3/
    Referências
    https://developers.google.com/maps/
    documentation/javascript/tutorial

    View Slide

  62. v
    Obrigado!

    View Slide