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.
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
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
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!
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
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
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!
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
thulioph
kasacchiful
ivargrimstad
tanakahisateru
cmnakamurashogo
pospome
smt7174
niftycorp
chururi
yuhei_fujita
seike460
mazrean
atinfinity
ammeep
lara
reverentgeek
vanstee
zakiyama
chrislema
philhawksworth
yeseniaperezcruz
tammielis
jacobian
myddelton
kevinliebholz