MELHORANDO SUAS SKILLS COM A GOOGLE MAPS API @thulioph_ 

Front-end Enginner 

POR QUE USAR GOOGLE MAPS ? 

COMO COMEÇAR? 

01 Crie um projeto 

h t t p s : / / c o n s o l e . d e v e l o p e r s . g o o g l e . c o m / p r o j e c t / n o m e - d o - p r o j e t o / a p i u i / a p i s / l i b r a r y 

02 Ative a api 

h t t p s : / / c o n s o l e . d e v e l o p e r s . g o o g l e . c o m / p r o j e c t 

03 Pegue uma chave válida. 

h t t p s : / / c o n s o l e . d e v e l o p e r s . g o o g l e . c o m / p r o j e c t / n o m e - d o - p r o j e t o / a p i u i / c r e d e n t i a l 

PREPARANDO O HTML < d i v i d = " m a p a " > < / d i v > 

PREPARANDO O CSS # m a p a { w i d t h : 1 0 0 % ; h e i g h t : 5 0 0 p x ; b o r d e r : 1 p x s o l i d # c c c ; } 

EXIBINDO UM MAPA SIMPLES f u n c t i o n i n i t i a l i z e ( ) { v a r m y L a t l n g = n e w g o o g l e . m a p s . L a t L n g ( l a t i t u d e , l o n g i t u d e ) ; v a r m a p O p t i o n s = { z o o m : 1 7 , c e n t e r : m y L a t l n g , m a p T y p e I d : g o o g l e . m a p s . M a p T y p e I d . R O A D M A P } v a r m a p = n e w g o o g l e . m a p s . M a p ( d o c u m e n t . g e t E l e m e n t B y I d ( “ m a p a ” ) , m a p O p t i o n s ) ; } 

EXIBINDO UM MAPA SIMPLES f u n c t i o n l o a d S c r i p t ( ) { v a r s c r i p t = d o c u m e n t . c r e a t e E l e m e n t ( “ s c r i p t ” ) ; s c r i p t . t y p e = “ t e x t / j a v a s c r i p t ” ; s c r i p t . s r c = ” h t t p : / / m a p s . g o o g l e a p i s . c o m / m a p s / a p i / j s ? k e y = S U A _ A P I _ K E Y & s e n s o r = t r u e _ o r _ f a l s e & c a l l b a c k = i n i t i a l i z e ” ; d o c u m e n t . b o d y . a p p e n d C h i l d ( s c r i p t ) ; } w i n d o w . o n l o a d = l o a d S c r i p t ; 

P a r a o s p a r â m e t r o s d o s c r i p t . s r c o n d e e m k e y v o c ê t e r á q u e i n s e r i r a s u a c h a v e d e A P I , e m s e n s o r = t r u e / f a l s e v o c ê i n f o r m a s e s u a a p l i c a ç ã o u s a a l g u m s e n s o r p a r a d e t e r m i n a r a l o c a l i z a ç ã o d o u s u á r i o g p s e e m c a l l b a c k = i n i t i a l i z e v o c ê i n s t r u i a a p i p a r a s ó e x e c u t a r a f u n ç ã o i n i t i a l i z e ( ) a p ó s a a p i s e r t o t a l m e n t e c a r r e g a d a . ATENÇÃO! 

E X I B I N D O U M M A P A S I M P L E S h t t p : / / s . c o d e p e n . i o / t h u l i o p h / d e b u g / L p V V m B ? 

p a n C o n t r o l , z o o m C o n t r o l , m a p T y p e C o n t r o l , s c a l e C o n t r o l , s t r e e t V i e w C o n t r o l , o v e r v i e w M a p C o n t r o l . MODIFICANDO OS CONTROLES DO USUÁRIO 

M O D I F I C A N D O O S C O N T R O L E S D O U S U Á R I O h t t p : / / s . c o d e p e n . i o / t h u l i o p h / d e b u g / Y y X X j B ? 

N E W G O O G L E . M A P S . M A R K E R , M A R C A D O R P E R S O N A L I Z A D O , P O S I T I O N , M A P , I C O N , T I T L E , A N I M A T I O N INSERINDO MARCADOR PERSONALIZADO 

v a r i m a g e = ‘ h t t p s : / / c d n 1 . i c o n f i n d e r . c o m / d a t a / i c o n s / g p s m a p i c o n s / b l u e / g p s m a p i c o n s 0 1 . p n g ’ ; v a r m a r c a d o r P e r s o n a l i z a d o = n e w g o o g l e . m a p s . M a r k e r ( { p o s i t i o n : m y L a t l n g , m a p : m a p , i c o n : i m a g e , t i t l e : ‘ T í t u l o q u a l q u e r ’ , a n i m a t i o n : g o o g l e . m a p s . A n i m a t i o n . D R O P } ) ; INSERINDO MARCADOR PERSONALIZADO 

I N S E R I N D O M A R C A D O R P E R S O N A L I Z A D O h t t p : / / s . c o d e p e n . i o / t h u l i o p h / d e b u g / P P q q y Y ? 

N E W G O O G L E . M A P S . I N F O W I N D O W , C O N T E N T , M A X W I D T H JANELA DE INFORMAÇÃO 

v a r c o n t e n t S t r i n g = ‘ O c o n t e ú d o d a m i n h a j a n e l a d e i n f o r m a ç õ e s . ’ ; v a r i n f o w i n d o w = n e w g o o g l e . m a p s . I n f o W i n d o w ( { c o n t e n t : c o n t e n t S t r i n g , m a x W i d t h : 7 0 0 } ) ; g o o g l e . m a p s . e v e n t . a d d L i s t e n e r ( m a r c a d o r P e r s o n a l i z a d o , ‘ c l i c k ’ , f u n c t i o n ( ) { i n f o w i n d o w . o p e n ( m a p , m a r c a d o r P e r s o n a l i z a d o ) ; } ) ; JANELA DE INFORMAÇÃO 

É p r e c i s o a t r i b u i r u m e v e n t o a o m é t o d o i n f o w i n d o w . o p e n c a s o c o n t r á r i o e l e n ã o s e r á a b e r t o n o c l i q u e . O g o o g l e . m a p s . e v e n t . a d d L i s t e n e r a d i c i o n a u m e v e n t o d e ‘ c l i c k ’ a o m a r c a d o r P e r s o n a l i z a d o , i s s o i r á d i s p a r a r o m é t o d o i n f o w i n d o w . o p e n n o m a p e n o m a r c a d o r P e r s o n a l i z a d o . A g o r a q u a n d o v o c ê c l i c a r n o p i n i r á a b r i r o b a l ã o d e i n f o r m a ç õ e s c o m o c o n t e ú d o d a v a r i á v e l c o n t e n t S t r i n g . ATENÇÃO! 

J A N E L A D E I N F O R M A Ç Ã O h t t p : / / s . c o d e p e n . i o / t h u l i o p h / d e b u g / y Y N N Q M ? 

F E A T U R E T Y P E , E L E M E N T T Y P E , S T Y L E R S ( H U E , L I G H T N E S S , S A T U R A T I O N , G A M M A , I N V E R S E _ L I G H T N E S S , V I S I B I L I T Y ) , g o o g l e . m a p s . S t y l e d M a p T y p e , g o o g l e . m a p s . M a p T y p e I d . R O A D M A P , MODIFICANDO A COR DO MAPA 

v a r s t y l e s = [ { s t y l e r s : [ { h u e : “ # 4 1 a 7 d 5 ” } , { s a t u r a t i o n : 6 0 } , { l i g h t n e s s : - 2 0 } , { g a m m a : 1 . 5 1 } ] } , { f e a t u r e T y p e : “ r o a d ” , e l e m e n t T y p e : “ g e o m e t r y ” , s t y l e r s : [ { l i g h t n e s s : 1 0 0 } , { v i s i b i l i t y : “ s i m p l i f i e d ” } ] } , { f e a t u r e T y p e : “ r o a d ” , e l e m e n t T y p e : “ l a b e l s ” } ] ; MODIFICANDO A COR DO MAPA 

m a p T y p e C o n t r o l O p t i o n s : { m a p T y p e I d s : [ g o o g l e . m a p s . M a p T y p e I d . R O A D M A P , ‘ m a p _ s t y l e ’ ] } m a p . m a p T y p e s . s e t ( ‘ m a p _ s t y l e ’ , s t y l e d M a p ) ; m a p . s e t M a p T y p e I d ( ‘ m a p _ s t y l e ’ ) ; MODIFICANDO A COR DO MAPA 

M O D I F I C A N D O A C O R D O M A P A h t t p : / / s . c o d e p e n . i o / t h u l i o p h / d e b u g / Y y X X d g ? 

CASOS DE USO Preenchimento de formulário Data visualization 

ifood h t t p : / / s . c o d e p e n . i o / t h u l i o p h / d e b u g / Y y X X j B ? h t t p s : / / w w w . i f o o d . c o m . b r / 

Pedidos já h t t p : / / w w w . p e d i d o s j a . c o m . b r / 

Flu Near You h t t p s : / / f l u n e a r y o u . o r g / 

Foursquare h t t p s : / / p t . f o u r s q u a r e . c o m / 

Pianolab h t t p s : / / w w w . p i a n o l a b . c o m . b r / 

https://cartodb.com/ http://mapnik.org/ www.mapbox.com http://leafletjs.com/ Outras engines 

PERGUNTAS? h t t p : / / t h u l i o p h . g i t h u b . i o / t w i t t e r - r e a l t i m e 

Obrigado!