Save 37% off PRO during our Black Friday Sale! »

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.

7418428588f726b3a8a59f910afc1b9c?s=128

Thulio Philipe

October 18, 2015
Tweet

Transcript

  1. Google Maps API Melhorando suas Skills com

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

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

    @ Unibratec @thulioph_
  4. None
  5. Era uma vez...

  6. Como Começar?

  7. 1. Crie um projeto 2. Ative a api 3. Adquira

    uma chave válida
  8. https://console.developers.google.com/project Crie um projeto

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

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

  11. Let's cook! code

  12. Preparando o HTML

  13. Preparando o CSS

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

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

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

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

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

  19. Modificando os controles do usuário

  20. Modificando os controles do usuário

  21. Modificando os controles do usuário

  22. Modificando os controles do usuário

  23. Modificando os controles do usuário

  24. Modificando os controles do usuário

  25. Modificando os controles do usuário

  26. Modificando os controles do usuário

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

  28. Inserindo marcador personalizado

  29. Inserindo marcador personalizado

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

  31. InfoWindow

  32. InfoWindow

  33. InfoWindow

  34. InfoWindow

  35. InfoWindow Não precisa vincular a um evento

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

  37. Modificando a cor do mapa

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

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

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

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

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

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

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

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

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

  47. Casos de uso

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

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

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

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

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

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

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

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

  56. Outras engines

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

  58. Demo (666)

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

  60. Perguntas?

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

  62. v Obrigado!