Google Maps API - Como você nunca viu.

Evento: JsDay Campina Grande - PB

Palestra apresentada no Teatro UNIFACISA, falando sobre o funcionamento da API do Google Maps no Uber, 99Táxis e Easy Táxi, mostrando exemplos e sugestões.

Transcript

1. como você nunca viu. Google Maps
3. Front-end engineer Web Apps @Unibratec CSS ❤ Offline First @thulioph
4. Front-end engineer Web Apps @Unibratec CSS ❤ Offline First @thulioph_
8. Maps, maps e mais maps.. https://flunearyou.org
9. Maps, maps e mais maps.. https://foursquare.com
10. Maps, maps e mais maps.. https://guardioesdasaude.org
11. Maps, maps e mais maps.. https://thulioph.github.io/twitter-realtime
12. Maps, maps e mais maps.. https://thulioph.github.io/formlocation.js
13. Maps, maps e mais maps.. https://hortalivre.com.br
16. Cronograma • Geocode • Matriz de distância • Directions API • Street View
17. geocode
18. Documentação 
 https://developers.google.com/maps/documentation/geocoding/intro "Geocodificação é o processo de conversão de endereços (rua, avenida, bairro) em coordenadas geográficas (latitude e longitude) que podem ser usadas para inserir marcadores em um mapa ou posicionar o mapa."
19. pra que eu vou usar?
20. Mostrar a localização do usuário no mapa Pegar a latitude e longitude para fazer qualquer coisa Traçar a rota entre dois ou mais pontos Detalhes sobre o endereço de onde o usuário está Pega as coordenadas e mostra o endereço
21. como funciona?
22. Copie e cole o código Obtenha uma chave Adicione o script do google maps ao seu projeto https://maps.googleapis.com/maps/api/js?key=sua_key_aqui
23. https://maps.googleapis.com/maps/api/ geocode/output?parameters
24. https://maps.googleapis.com/maps/api/ geocode/json?address=Rua+Joao+Fragoso+de +Medeiros+1851+Jaboatao+dos +guararapes&key=sua_chave_aqui&language=pt -BR
25. https://maps.googleapis.com/maps/api/ geocode/json?address=Rua+Joao+Fragoso+de +Medeiros+1851+Jaboatao+dos +guararapes&key=sua_chave_aqui&language=pt -BR parâmetro obrigatório
26. https://maps.googleapis.com/maps/api/ geocode/json?address=Rua+Joao+Fragoso+de +Medeiros+1851+Jaboatao+dos +guararapes&key=sua_chave_aqui&language=pt -BR parâmetro obrigatório
27. https://maps.googleapis.com/maps/api/ geocode/json?address=Rua+Joao+Fragoso+de +Medeiros+1851+Jaboatao+dos +guararapes&key=sua_chave_aqui&language=pt -BR
28. ok, zero_results, over_query_limit, request_denied, invalid_request unknown_error array com endereços geocodificados e informações geométricas.
29. Documentação 
 https://developers.google.com/maps/documentation/geocoding/intro "A geocodificação reversa é o processo de conversão de coordenadas geográficas em um endereço legível".
30. https://maps.googleapis.com/maps/api/ geocode/json? latlng=-8.1948382,-34.9231098&key=sua_chav e_aqui&language=pt-BR atenção na ordem
31. http://codepen.io/thulioph/pen/yizek
32. • Geocode • Matriz de distância • Directions API • Street View Cronograma
33. matriz distância de
34. Documentação 
 https://developers.google.com/maps/documentation/distance-matrix/ "O serviço calcula a distância e duração de um curso/viagem entre várias origens e destinos, usando um determinado modo de viagem."
35. pra que eu vou usar?
36. Estimar a distância e duração de uma viagem para múltiplos destinos.
37. como funciona?
38. Copie e cole o código Adquira uma chave de servidor (server key) Adicione o script do google maps ao seu projeto https://maps.googleapis.com/maps/api/js?key=sua_key_aqui
39. https://maps.googleapis.com/maps/api/ distancematrix/output?parameters
40. https://maps.googleapis.com/maps/api/ distancematrix/json?origins=Rua+Joao +Fragoso+de+Medeiros+Jaboatao+dos +Guararapes|Candeias+Jaboatao+dos +Guararapes&destinations=Casa+Caiada +Olinda|Praia+do+Janga+Paulista +Olinda&mode=bicycling&language=pt- BR&departure_time=1461378165760&traffic_mo del=best_guess
41. https://maps.googleapis.com/maps/api/ distancematrix/json?origins=Rua+Joao +Fragoso+de+Medeiros+Jaboatao+dos +Guararapes|Candeias+Jaboatao+dos +Guararapes&destinations=Casa+Caiada +Olinda|Praia+do+Janga+Paulista +Olinda&mode=bicycling&language=pt- BR&departure_time=1461378165760&traffic_mo del=best_guess parâmetro obrigatório
42. https://maps.googleapis.com/maps/api/ distancematrix/json?origins=Rua+Joao +Fragoso+de+Medeiros+Jaboatao+dos +Guararapes|Candeias+Jaboatao+dos +Guararapes&destinations=Casa+Caiada +Olinda|Praia+do+Janga+Paulista +Olinda&mode=bicycling&language=pt- BR&departure_time=1461378165760&traffic_mo del=best_guess parâmetro obrigatório
43. https://maps.googleapis.com/maps/api/ distancematrix/json?origins=Rua+Joao +Fragoso+de+Medeiros+Jaboatao+dos +Guararapes|Candeias+Jaboatao+dos +Guararapes&destinations=Casa+Caiada +Olinda|Praia+do+Janga+Paulista +Olinda&mode=bicycling&language=pt- BR&departure_time=1461378165760&traffic_mo del=best_guess utilize uma barra para separar os endereços aceita até 25 pares de origem/destino por requisição
44. https://maps.googleapis.com/maps/api/ distancematrix/json?origins=Rua+Joao +Fragoso+de+Medeiros+Jaboatao+dos +Guararapes|Candeias+Jaboatao+dos +Guararapes&destinations=Casa+Caiada +Olinda|Praia+do+Janga+Paulista +Olinda&mode=bicycling&language=pt- BR&departure_time=1461378165760&traffic_mo del=best_guess driving, walking, bicycling, transit
45. https://maps.googleapis.com/maps/api/ distancematrix/json?origins=Rua+Joao +Fragoso+de+Medeiros+Jaboatao+dos +Guararapes|Candeias+Jaboatao+dos +Guararapes&destinations=Casa+Caiada +Olinda|Praia+do+Janga+Paulista +Olinda&mode=bicycling&language=pt- BR&departure_time=1461378165760&traffic_mo del=best_guess
46. https://maps.googleapis.com/maps/api/ distancematrix/json?origins=Rua+Joao +Fragoso+de+Medeiros+Jaboatao+dos +Guararapes|Candeias+Jaboatao+dos +Guararapes&destinations=Casa+Caiada +Olinda|Praia+do+Janga+Paulista +Olinda&mode=bicycling&language=pt- BR&departure_time=1461378165760&traffic_mo del=best_guess timestamp, now
47. https://maps.googleapis.com/maps/api/ distancematrix/json?origins=Rua+Joao +Fragoso+de+Medeiros+Jaboatao+dos +Guararapes|Candeias+Jaboatao+dos +Guararapes&destinations=Casa+Caiada +Olinda|Praia+do+Janga+Paulista +Olinda&mode=bicycling&language=pt- BR&departure_time=1461378165760&traffic_mo del=best_guess best_guess, pessimistic, optimistic
48. ok, invalid_request, max_elements_exceeded, over_query_limit, request_denied, unknown_error array com origens e destinos informações de distância e duração
49. • Geocode • Matriz de distância • Directions API • Street View Cronograma
50. direc tions
51. Documentação 
 https://developers.google.com/maps/documentation/javascript/directions "Um serviço que calcula direções entre locais, usando uma requisição HTTP"
52. pra que eu vou usar?
53. Traçar a rota entre dois pontos.
54. como funciona ?
55. Copie e cole o código Adquira uma chave de servidor (server key) Adicione o script do google maps ao seu projeto https://maps.googleapis.com/maps/api/js?key=sua_key_aqui
56. https://maps.googleapis.com/maps/api/ directions/output?parameters
57. https://maps.googleapis.com/maps/api/ directions/json?origin=Rua+Joao+Fragoso+de +Medeiros+Jaboatao+dos +Guararapes&destination=Casa+Caiada +Olinda&mode=driving&language=pt- BR&waypoints=Av+Rio+Branco+Recife+PE|Av +Cde+boa+vista
58. https://maps.googleapis.com/maps/api/ directions/json?origin=Rua+Joao+Fragoso+de +Medeiros+Jaboatao+dos +Guararapes&destination=Casa+Caiada +Olinda&mode=driving&language=pt- BR&waypoints=Av+Rio+Branco+Recife+PE|Av +Cde+boa+vista parâmetro obrigatório
59. https://maps.googleapis.com/maps/api/ directions/json?origin=Rua+Joao+Fragoso+de +Medeiros+Jaboatao+dos +Guararapes&destination=Casa+Caiada +Olinda&mode=driving&language=pt- BR&waypoints=Av+Rio+Branco+Recife+PE|Av +Cde+boa+vista parâmetro obrigatório
60. https://maps.googleapis.com/maps/api/ directions/json?origin=Rua+Joao+Fragoso+de +Medeiros+Jaboatao+dos +Guararapes&destination=Casa+Caiada +Olinda&mode=driving&language=pt- BR&waypoints=Av+Rio+Branco+Recife+PE|Av +Cde+boa+vista driving, walking, bicycling
61. https://maps.googleapis.com/maps/api/ directions/json?origin=Rua+Joao+Fragoso+de +Medeiros+Jaboatao+dos +Guararapes&destination=Casa+Caiada +Olinda&mode=driving&language=pt- BR&waypoints=Av+Rio+Branco+Recife+PE|Av +Cde+boa+vista
62. https://maps.googleapis.com/maps/api/ directions/json?origin=Rua+Joao+Fragoso+de +Medeiros+Jaboatao+dos +Guararapes&destination=Casa+Caiada +Olinda&mode=driving&language=pt- BR&waypoints=Av+Rio+Branco+Recife+PE|Av +Cde+boa+vista pontos de referência
63. ok, not_found, zero_results, max_waypoints_exceeded, invalid_request, over_query_limit, request_denied, unknow_error array com detalhes da geocodificação array com informações sobre as rotas informações detalhadas, passo-a-passo, distância e duração
64. https://github.com/thulioph/distance-direction
65. • Geocode • Matriz de distância • Directions API • Street View Cronograma
66. street view
67. Documentação 
 https://developers.google.com/maps/documentation/javascript/streetview "Visualizações panorâmicas em 360º de vias designadas em toda a área de cobertura."
68. Pra que eu vou usar? pra que eu vou usar?
69. Exibir a localização Fornecer informações adicionais para o usuário do local que ele está Melhorar a experiência do usuário na sua aplicação (UX)
70. como funciona?
71. Copie e cole o código Adquira uma chave Adicione o script do google maps ao seu projeto https://maps.googleapis.com/maps/api/js?key=sua_key_aqui
72. new google.maps.StreetViewPanorama(container, obj)
73. var map = new google.maps.Map(document.getElementById( 'map'), { center: userPosition, zoom: 14 }); objeto com latitude e longitude elemento do html
74. var panorama = new google.maps.StreetViewPanorama( document.getElementById('pano'), { position: userPosition, pov: { heading: 34, pitch: 10 } }); ângulo de rotação horizontal e vertical elemento do html
75. map.setStreetView(panorama);
76. https://github.com/thulioph/street-panorama
77. Prontos para brincar com a api do Google Maps?
78. Obrigado! Thulio Philipe thulioph@gmail.com @thulioph_