Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Google Maps API V3

Apresentação a equipe de Portais utlização do google maps api V3.
by

thiago pelegrine

on 4 January 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Google Maps API V3

Google Maps Javascript API V3 Carregando o Google Maps API Elementos DOM do mapa Getting Started O que fizemos: Declaramos o aplicativo como HTML5 usando a declaração <!DOCTYPE html>.
Incluímos a Google Maps JavaScript API usando uma tag script.
Criamos um elemento div chamado "map_canvas" para suportar o mapa.
Criamos um literal de objeto JavaScript para conter diversas propriedades do mapa.
Escrevemos uma função JavaScript para criar um objeto "map".
Inicializamos o objeto do mapa a partir do evento onload da tag body. O URL http://maps.google.com/maps/api/js , aponta para o local de um arquivo JavaScript que carrega todos os símbolos e as definições necessárias ao uso da API do Google Maps V3. A sua página deve conter uma tag script que aponte para esse URL. Introdução O elemento fundamental de qualquer aplicativo da API do Google Maps é o próprio mapa, nesta apresentação serão mostradas as noções básica de operação do mapa. Hello World Google Maps A tag <meta> nesse cabeçalho especifica que esse mapa deve ser exibido na tela inteira e não deve ser redimensionado pelo usuário. Também precisamos definir um parâmetro sensor para indicar se esse aplicativo usa um sensor para determinar a localização do usuário. Deixamos esse exemplo como uma variável set_to_true_or_false para enfatizar que você deve definir este valor explicitamente para true ou false. Para que o mapa seja exibido em uma página da web, precisamos reservar um lugar para ele. Normalmente, fazemos isso criando um elemento div e obtendo uma referência a ele no DOM (modelo de objeto do documento) do navegador.

No exemplo acima, definimos uma <div> chamado "map_canvas" e definimos o seu tamanho usando atributos de estilo. Esse tamanho está definido como "100%". Talvez seja necessário ajustar esses valores com base no tamanho da tela e no preenchimento do navegador. O mapa sempre assumirá o tamanho do elemento que o contém, de modo que você sempre deve definir um tamanho em <div> explicitamente. Opções do mapa Para inicializar um mapa, primeiro criamos um objeto myOptions para conter as variáveis de inicialização do mapa. Esse objeto não é construído; É criado como um literal de objeto.
Como queremos centralizar o mapa em um ponto específico, também criamos um valor myLatlng para conter a latitude e longitude deste local e o passamos nas opções do mapa. Também definimos o nível de zoom inicial e mapTypeId como google.maps.MapTypeId.ROADMAP. Os seguintes tipos são suportados: ROADMAP: exibe os blocos 2D normais, padrão, do Google Maps.
SATELLITE: exibe blocos fotográficos.
HYBRID: exibe uma mistura entre blocos fotográficos e uma camada de blocos com recursos importantes (estradas, nomes de cidade).
TERRAIN: exibe blocos de relevo físico para exibição de recursos de elevação e água (montanhas, rios etc.). Como carregar o mapa O objeto google.maps.Map No construtor do objeto o primeiro parâmetro recebe o elemento que irá conter o mapa, e no segundo os parâmetros de inicialização do mapa que definimos anteriormente. Note que ele armazenamos a referência ao mapa na variável map e é através dela que podemos modificar o mapa inserindo marcadores, etc.

Podemos mudar várias propriedades do mapa através de funções.

//centralizando o mapa
map.setCenter( new google.maps.LatLng(-29.767954 , -53.071657) );

//mudando o zoom do mapa
map.setZoom(8);

//mudando o tipo do mapa
map.setMapTypeId(google.maps.MapTypeId.SATELLITE); Durante a renderização de uma página HTML, o DOM é criado e todas as imagens e scripts externos são recebidos e incorporados ao objeto document. Para garantir que nosso mapa seja colocado na página após ela ter sido totalmente carregada, só executamos a função que cria o objeto Map depois que o elemento <body> da página HTML recebe um evento onload. Isso evita um comportamento imprevisível e nos dá mais controle sobre como e quando o mapa é desenhado.

O atributo onload da tag body é um exemplo de um manipulador de evento.

A API Javascript do Google Maps fornece ainda um conjunto de eventos que podem ser manipulados para determinar alterações de estado. Compatibilidade e limites de uso Navegadores e SO
compatíveis IE 7.0 ou superior
Firefox 3.0 ou superior
Safari 4+ (Mac SO X, iOS)
Chrome
(Windows, Mac SO X e Linux)
Android
BlackBerry 6
Dolfin 2.0+ (Samsung Bada) Limites de uso Se o uso da API do Google Maps tiver um limite maior de 25.000 cargas diárias deve-se respeitar os termos de uso e comprar a licença.
( Google Maps Premier) ou comprar
uma quota adicional. Entretanto, nem
todos os usos comerciais são
permitidos. Eventos O JavaScript no navegador é orientado por eventos, ou seja, o JavaScript responde a interações gerando eventos e espera que um programa escute os eventos relevantes.
No modelo de evento da API do Google Maps V3 há dois tipos de eventos:

Eventos de usuário são propagados do DOM para a API do Google Maps. Exemplo:
'click'
'dblclick'
'mouseup'
'mousedown'
'mouseover'
'mouseout'

As notificações de alteração de estado do MVC ( são nomeadas usando uma convenção property_changed ) Controles Os mapas do Google Maps contêm elementos de interface do usuário que possibilitam a interação do usuário em todo o mapa. Esses elementos são conhecidos como controles e você pode incluir variações desses controles no aplicativo da API do Google Maps. A API do Google Maps é fornecida com vários controles incorporados que você pode usar nos seus mapas ( controle de zoom, controle de panorâmica, controle de Escala, controle de MapType , controle Street View, controle de rotação e controle do mapa de visão geral ). Desativar e Adicionar controles Como desativar a interface do usuário padrão https://developers.google.com/maps/documentation/javascript/examples/control-disableUI?hl=pt-br Como desativar a interface do usuário padrão https://developers.google.com/maps/documentation/javascript/examples/control-simple?hl=pt-br Opções de controle https://developers.google.com/maps/documentation/javascript/examples/control-simple?hl=pt-br panControl: boolean,
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
overviewMapControl: boolean Controle de zoom:
google.maps.ZoomControlStyle.SMALL
google.maps.ZoomControlStyle.LARGE
google.maps.ZoomControlStyle.DEFAULT https://developers.google.com/maps/documentation/javascript/examples/control-options?hl=pt-br Controle MapType
google.maps.MapTypeControlStyle.HORIZONTAL_BAR
google.maps.MapTypeControlStyle.DROPDOWN_MENU
google.maps.MapTypeControlStyle.DEFAULT Posicionamento do controle https://developers.google.com/maps/documentation/javascript/examples/control-positioning?hl=pt-br Marcadores Os marcadores identificam locais no mapa. Por padrão, eles usam um ícone padrão, embora você possa definir um ícone personalizado no construtor do marcador ou chamando setIcon() no marcador. O construtor google.maps.Marker usa um único literal de objeto Marker options que especifica as propriedades iniciais do marcador.
Os campos a seguir são especialmente importantes e, em geral, são definidos durante a construção do marcador:

position (obrigatório) especifica um LatLng que identifica o local inicial do marcador.
map especifica o objeto Map no qual o marcador será colocado.

No construtor Marker, especifique o mapa ao qual o marcador será adicionado. Se você não especificar esse argumento, o marcador será criado, mas não será anexado (ou exibido) no mapa.

Os marcadores são criados para serem interativos. Por padrão, eles recebem, por exemplo, eventos 'click' e são normalmente usados nas escutas de evento para mostrar janelas de informações. https://developers.google.com/maps/documentation/javascript/examples/marker-simple?hl=pt-br https://developers.google.com/maps/documentation/javascript/examples/marker-animations?hl=pt-br Marcadores simples: Marcadores animados: BOUNCE e DROP
Janelas de informação As InfoWindows exibem conteúdo em uma janela flutuante acima do mapa. A janela de informações se parece um pouco com os balões das histórias em quadrinhos. Ela apresenta uma área de conteúdo ligada por um traço cuja ponta permanece em um local específico do mapa. Você pode vê-la em ação clicando em marcadores de empresas no Google Maps. https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple?hl=pt-br Dúvidas Geolocalização SERVIÇOS
Full transcript