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.
Google Maps APIMelhorando suas Skills com
View Slide
Recife, PEFront-end Engineer @ EpitrackThulio PhilipeWeb Apps @ Unibratec@thulioph
Recife, PEFront-end Engineer @ EpitrackThulio PhilipeWeb Apps @ Unibratec@thulioph_
Era uma vez...
Como Começar?
1. Crie um projeto2. Ative a api3. Adquira uma chave válida
https://console.developers.google.com/projectCrie um projeto
https://console.developers.google.com/project/nome-do-projeto/apiui/apis/libraryAtivando a API
https://console.developers.google.com/project/nome-do-projeto/apiui/credentialAdquirindo uma chave válida
Let's cook!code
Preparando o HTML
Preparando o CSS
Exibindo um mapa simpleshttps://gist.github.com/thulioph/8150735
http://s.codepen.io/thulioph/debug/LpVVmB?Exibindo um mapa simples
Modificando os controles do usuário
http://s.codepen.io/thulioph/debug/YyXXjB?Modificando os controles do usuário
Inserindo marcador personalizado
http://s.codepen.io/thulioph/debug/PPqqyY?Inserindo marcador personalizado
InfoWindow
InfoWindowNão precisa vincular a um evento
http://s.codepen.io/thulioph/debug/yYNNQM?InfoWindow
Modificando a cor do mapa
Modificando a cor do mapa1. crie um array de estilos
Modificando a cor do mapa2. atribuindo o array ao mapa
http://s.codepen.io/thulioph/debug/YyXXdg?Modificando a cor do mapa
Casos de uso
Preenchimento de formulárioCasos de usohttps://www.ifood.com.br/
Preenchimento de formulárioCasos de usohttp://www.pizzariaatlantico.com.br/
Preenchimento de formulárioCasos de usohttp://www.pedidosja.com.br/
Preenchimento de formulárioCasos de usohttp://www.chinainbox.com.br/
Visualização de dadosCasos de usowww.flunearyou.org
Visualização de dadosCasos de usowww.foursquare.com
Traçar rotaCasos de usowww.pianolab.com.br
Outras engines
www.cartodb.com www.mapnik.org www.mapbox.com www.leafletjs.comOutras enginesOutras alternativas
Demo (666)
http://thulioph.github.io/twitter-realtimeDemo
Perguntas?
http://tableless.com.br/api-google-maps-v3/Referênciashttps://developers.google.com/maps/documentation/javascript/tutorial
vObrigado!