Melhorando suas skills com Google Maps API

Evento: JsDay Recife

Palestra apresentada no CESAR, falando sobre como iniciar com o Google Maps API, mostrando alguns casos de uso e exemplos.

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_
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. https://thulioph.github.io/formlocation.js Demo
60. http://thulioph.github.io/twitter-realtime Demo
61. Perguntas?
62. http://tableless.com.br/api-google-maps-v3/ Referências https://developers.google.com/maps/ documentation/javascript/tutorial
63. v Obrigado!