Como utilizar um vídeo com informações do Google Maps

Atenção: Este conteúdo só deve ser utilizado nos monitores profissionais Samsung e player Chrome.

Este conteúdo exibe informações do trânsito baseado em um local de referência (ponto de partida) e três locais distintos (pontos de chegada).

No exemplo abaixo, o ponto de referência é a Praça 7 de Setembro e os três locais distintos de chegada são: Aeroporto de Confins, Aeroporto da Pampulha e BH Shopping.

O conteúdo informa:

  • Qual a melhor via para os destinos
  • A distância a percorrer em km
  • O tempo de percurso, contanda a situação de tráfego no momento
  • O estado do trânsito na via de acordo com a escala de cores

 

 

Para utilizar este conteúdo é necessário:

 

Como gerar uma chave de API do Google Maps

É necessário ter uma conta do Google para efetuar o processo de criação desta chave.

Para criar uma conta de e-mail do Gmail acesse: Crie uma conta do Gmail

Com sua conta do Gmail aberta abra uma nova aba e acesse a URL abaixo.

Google APIs

Na opção Meu Projeto clique em Criar Projeto.

 

Em seguida no campo Nome do Projeto digite qualquer nome que permitira a você reconhecer o projeto posteriormente e em seguida clique em Criar.

 

Atenção: A criação deste projeto pode demorar alguns segundos.

Com sua conta já criada, clique em Biblioteca caso a mesma não esteja selecionada.

 

Em APIs do Google Maps clique na opção Google Maps Distance Matrix API.

 

Agora clique em Ativar.

 

Sua API está ativada, porém você não pode usá-la em seu projeto até criar credenciais. Clique no botão Ir para Credenciais.

 

Em seguida clique na opção Preciso de quais credenciais?.

 

Nesta etapa a sua chave de API foi criada.

 

Acesse o link abaixo ainda logado na mesma conta do Gmail;

Google For Works

Clique no botão GET A KEY.

 

 

Selecione o projeto criado.

 

Após selecionar o projeto clique em ENABLE API.

 

Copie a chave que foi gerada. Ela será utilizada no arquivo de informações do trânsito.

 

Como editar o arquivo Trânsito

Para criar ou editar conteúdos em HTML5 será necessário um editor de texto para leitura de códigos.

Sugerimos os programas SublimeText ou o Notepad++. Ambos são editores de texto de código aberto e permitem a instalação em computadores com sistema operacional Windows ou Linux.

Segue link de instalação destes programas:

Baixe aqui o SublimeText

Baixe aqui o Notepad++

Para instalar o Sublime no Linux execute os seguintes comandos no terminal:

   sudo add-apt-repository ppa:webupd8team/sublime-text-2
   sudo apt-get update
   sudo apt-get install sublime-text

Após a instalação do Sublime ou Notepad++ descompacte o arquivo Trânsito.

 

Abra o arquivo index.html com o editor de texto.

 

Agora você deve modificar as informações do arquivo index.html para exibir os locais desejadas. 

 

Configurando o local de partida

Altere as informações no campo origin:

	origin : {
		displayName : 'Praça 7 de Setembro',
		coordinates : {
			lat : -19.9192237,
			lng : -43.9385579
		},
		address : 'Praça Sete de Setembro, s/n - Centro, Belo Horizonte - MG'
	},

Em displayName (1) digite o nome do local de partida.

Ex.: Praça 7 de Setembro. 

Atenção: O nome deve ser mantido dentro de ' ' (aspas).

Ex.: 'Praça 7 de Setembro'. 

Nos campos lat - latitude e lng - longitude (2) digite a coordenadas do local.

Em address (3) digite o endereço do local de partida.

Ex.: Praça Sete de Setembro, s/n - Centro, Belo Horizonte - MG

 

Para encontrar as coordenadas utilize a página, MapCoordinates.

Nesta página você pode descobrir no Google Maps as coordenadas de um local ou área. 

 

Configurando os locais de chegada

Altere as informações no campo routeA:

	routeA : {
		displayName : 'Aeroporto de Confins',
		coordinates : {
			lat : -19.9192237,
			lng : -43.9385579
		},
		address : 'CNF Airport'
	},

Em displayName (1) digite o nome do primeiro local de chegada.

Ex.: Aeroporto de Confins 

Nos campos lat - latitude e lng - longitude (2) digite a coordenadas do local.

Em address (3) digite o endereço do primeiro local de chegada.

Ex.: Rodovia LMG-800, km 7,9, s/n, Confins - MG

 

Altere as informações no campo routeB:

	routeB : {
		displayName : 'Aeroporto da Pampulha',
		coordinates : {
			lat : -19.9192237,
			lng : -43.9385579
		},
		address : 'PLU Airport'
	},

Em displayName (1) digite o nome do segundo local de chegada.

Ex.: Aeroporto da Pampulha

Nos campos lat - latitude e lng - longitude (2) digite a coordenadas do local.

Em address (3) digite o endereço do segundo local.

Ex.: Praça Bagatelle, 204 - São Luís, Belo Horizonte - MG

 

 

Altere as informações no campo routeC:

	routeC : {
		displayName : 'BH Shopping',
		coordinates : {
			lat : -19.9192237,
			lng : -43.9385579
		},
		address : 'Rodovia BR 356, 3049 - Belvedere, Belo Horizonte - MG, 30320-900'
	},

Em displayName (1) digite o nome do terceiro local de chegada.

Ex.: BH Shopping 

Nos campos lat - latitude e lng - longitude (2) digite a coordenadas do local.

Em address (3) digite o endereço do local.

Ex.: Rodovia BR 356, 3049 - Belvedere, Belo Horizonte - MG, 30320-900

 

Agora você deve acrescentar no código a chave de API do Google Maps gerada anteriormente.

},
googleAPIKey : "Chave de API" // Colocar chave do Google
};

Atenção: A chave de API deve ser cadastrada entre " " (aspas).

Ex.: "Chave de API".

 

Salve as alterações que foram efetuadas no arquivo index.html.

 

Agora você deve compactar novamente o arquivo index.html e a pasta googleMapsTraffic.

Selecione os dois arquivos e crie uma pasta compactada. 

 

Você deve adicionar o arquivo compactado (.ZIP) como um conteúdo em sua conta.

Como adicionar conteúdos?

Atenção: Ao adicionar este conteúdo você deve desmarcar a opção Obter automaticamente e definir a Duração (min:seg) manualmente, sugerimos cadastrar 00:15 seg.

 

O próximo passo é associar este conteúdo às suas playlists.

Como associar conteúdos às minhas playlists

Monitore o player para avaliar se o conteúdo está sendo executado como esperado.

 

 

Ainda com dúvidas? Abrir chamado de suporte

Comentários

Powered by Zendesk