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.

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