$30 off During Our Annual Pro Sale. View Details »

Melhorando suas Skills com a Google Maps API

Melhorando suas Skills com a Google Maps API

Evento: JsDay Maceió

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.

Thulio Philipe

September 12, 2015
Tweet

More Decks by Thulio Philipe

Other Decks in Programming

Transcript

  1. MELHORANDO SUAS SKILLS
    COM A GOOGLE MAPS API
    @thulioph_

    View Slide

  2. Front-end Enginner

    View Slide

  3. POR QUE
    USAR GOOGLE
    MAPS ?

    View Slide

  4. COMO
    COMEÇAR?

    View Slide

  5. 01
    Crie um projeto

    View Slide

  6. 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

    View Slide

  7. 02
    Ative a api

    View Slide

  8. 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

    View Slide

  9. 03
    Pegue uma chave válida.

    View Slide

  10. 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

    View Slide

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

    View Slide

  12. 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 ;
    }

    View Slide

  13. 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 ) ;
    }

    View Slide

  14. 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 ;

    View Slide

  15. 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!

    View Slide

  16. 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 ?

    View Slide

  17. 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

    View Slide

  18. 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 ?

    View Slide

  19. 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

    View Slide

  20. 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

    View Slide

  21. 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 ?

    View Slide

  22. 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

    View Slide

  23. 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

    View Slide

  24. É 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!

    View Slide

  25. 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 ?

    View Slide

  26. 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

    View Slide

  27. 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

    View Slide

  28. 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

    View Slide

  29. 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 ?

    View Slide

  30. CASOS DE USO
    Preenchimento de formulário
    Data visualization

    View Slide

  31. 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 /

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  37. 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

    View Slide

  38. Obrigado!

    View Slide