Como codificar o Google Maps no seu site com a API do Google Maps JavaScript

1. API do Google Maps - Boas-vindas: Bem-vindo de volta ao canal criativo de conjuntos de habilidades da geração Y Hoje, ensinaremos como integrar a API do Google Maps ao seu site. Estou acompanhado por um bom amigo meu, Jacob, que já nos ensinou como codificar um site do zero Ele é engenheiro de software e hoje vai fazer o curso. Vou passar para ele. Oi, pessoal. Sou Jacob. Sou graduado em engenharia de software. E hoje, vou falar sobre como adicionar a integração do Google Maps ao seu site. Isso é útil se você estiver exibindo local ou algo em seu site, e também se estiver usando projetos que envolvam a adição de integração de mapas, e você pode criar alguns recursos interessantes com o Google Maps e tornar seu projeto mais interessante. Então, vamos usar scripts HTML, CSS e Java para adicionar essa integração de mapas ao seu projeto. vou colocar um exemplo na tela Agora vou colocar um exemplo na tela de como será o projeto final. Começaremos mostrando uma localização no mapa e, em seguida, adicionaremos marcadores e, em seguida, adicionaremos vários marcadores e também descobriremos como personalizar o mapa e também adicionar código go para personalizar o mapa e também adicionar código go que você possa mostrar locais específicos no Essa é uma ferramenta extremamente útil para programadores, proprietários de empresas e qualquer pessoa que queira adicionar um recurso interativo ao seu projeto. Vamos mergulhar nisso. 2. Google Maps - A configuração: Bem-vindo à primeira classe . Nesta aula, falaremos sobre qual software precisamos para começar a usar a integração do Google Maps no projeto. Então, como estamos usando a API JavaScript do Google Maps, que permite personalizar mapas com seu próprio conteúdo e imagens para exibição em páginas da Web e dispositivos móveis, usaremos o Visual Studios, o IDE para poder codificar os arquivos HTML, CSS e JavaScript Então, o que eu fiz aqui foi criar três arquivos simples, um arquivo HML de pontos de índice e um arquivo JavaScript de pontos de mapa E um arquivo CSS de estilo. Agora, para explicar brevemente esses arquivos, o arquivo de índice será onde nosso código HTML será usado para exibir o layout da página da web O arquivo JavaScript do mapa será para onde nosso código JavaScript será direcionado para poder lidar com o carregamento real dos mapas do Google. O estilo CSS conterá o código para exibir a aparência do site. Então, por enquanto, essa classe é intermediária, o que significa que presumo que você tenha uma compreensão básica dos arquivos HTML CSS e JavaScript e o que eles Mas se você não tiver certeza, quero um entendimento mais aprofundado, tenho outro vídeo neste canal explicando como criar um site do zero Então, para começar com o arquivo HML, incluí um documento HML básico que contém um link para nosso arquivo CSS e também nosso arquivo JavaScript contendo o código do Eu criei um cabeçalho simples para dar um pouco de design ao site e também incluí um div que contém o mapa, que será estilizado posteriormente Do CSS, temos estilo básico apenas para dar um pouco de estilo ao site Então, temos o corpo que terá a cor de fundo, a largura e o cabeçalho, que terá uma leve coloração e algumas margens, além de uma pequena borda E na parte inferior, temos o estilo do mapa, que mostra a largura do mapa e a borda do mapa para que o Google Maps defina um modelo para a largura e altura do Google Maps E também temos um arquivo o script ao qual adicionaremos algum código posteriormente para criar a funcionalidade do mapa e permitir personalização e quaisquer alterações na funcionalidade do mapa Então, agora temos uma configuração básica de funcionalidade. Agora estamos prontos para começar a adicionar a integração do Google Maps ao site. Então, na próxima aula, veremos como realmente adicionar a integração do Google Maps ao projeto para que possamos começar a adicionar os mapas e começar a visualizar o mapa. Para fazer isso, usaremos a API do Google Maps e mostraremos como se inscrever na API e também instalar a chave e o código irrelevante no projeto Então, nesta aula, veremos como começar com o projeto e definir o código base necessário antes de começarmos a adicionar a integração do Google Maps ao projeto. 3. Guia de Console do Google Maps (CHA) (CHa: Bem-vindo à segunda classe. Nesta aula, veremos as etapas que precisamos seguir para nos inscrevermos no Google Cloud Platform a fim de obter a APIKey para que possamos adicioná-la ao nosso A primeira etapa é criar uma conta do Google, fazer login no Google Cloud Platform e depois acessar o console. Você também precisa ativar os lances em sua conta para poder usar o Google Maps Não vou mostrar como fazer essa etapa, mas é muito simples de fazer e não leva muito tempo. A próxima etapa é criar um projeto no console do Google Clouds, que o Google usará para que você possa adicionar suas credenciais e chaves de API ao projeto Para fazer isso, selecione seu projeto e clique em Novo projeto Nomeie seu projeto e pressione Criar. Feito isso, abra as configurações e vá para API e Serviços. Clique no Painel e ative a API e os serviços. As duas APIs que vamos usar para este projeto são mapear a API JavaScript para a funcionalidade principal do mapa e também colocam a API para adicionar em um local de trabalho posteriormente Isso será usado para converter uma localização em latitude e longitude para que o marcador possa ser plotado Então clique na API Maps JavaScript e ative-a. Eu já fiz essa etapa, mas você deve ver um botão de ativação da API aqui. O mesmo vale para a API Places. Depois de ativar as APIs, você poderá criar credenciais e obter uma chave de acesso para que os mapas do Google possam ser usados em seu projeto Clique em, crie credenciais, chave de API, que gerará automaticamente uma chave de API para você ser usada, que poderá ser copiada e colada em seu projeto para que os mapas possam ser implementados em seu Eu recomendaria restringir a chave para que ela só possa ser acessada por você e pelas pessoas que você deseja acessá-la, para garantir que ninguém esteja usando sua chave de acesso sem saber e aumentando Como estamos criando um site, precisamos habilitar o HTTP. Em seguida, podemos ativar as restrições do site que queremos usar. Em seguida, habilite o URL do site em que queremos usar o Google Maps. Obviamente, você não precisa restringir a chave, mas é altamente recomendável. Feito isso, você pode copiar sua chave de API, que pode ser inserida no projeto. Depois que os mapas do Google estiverem configurados on-line, você poderá adicionar o código ao seu projeto para começar a usar os mapas. Portanto, em seu arquivo HML, basta adicionar um script curto, que contém sua chave no final da URL, e também uma função de retorno de chamada, que define qual função no arquivo Javascript será usada para configurar primeiro o Para falar um pouco sobre o que esses símbolos significam. A fonte é de onde o mapa é carregado e conterá a chave da API e a função de retorno de chamada, que serão usadas para chamar a primeira função do mapa quando o projeto for carregado O A faz com que o navegador faça o download ao mesmo tempo e execute o script ao mesmo tempo em que carrega o HTML Quando o script for carregado, ele chamará a função especificada na função de retorno de chamada Então, obrigado por assistir a esta aula. Nesta aula, analisamos como se inscrever na plataforma Google Cow, ativar as APIs relevantes, obter nossa chave de acesso e obter nossa chave de API de acesso, além de restringi-la para garantir que ela seja usada apenas para os propósitos corretos Na próxima aula, veremos como definir a função que é chamada pela primeira vez quando o arquivo HTML é carregado, que é usada para exibir o mapa. 4. Como mostrar o Google Maps e encontrar locais de o de localização!: Bem-vindo à classe três. Nesta aula, veremos o código relevante necessário para ser adicionado ao Driscriptfile, que possamos exibir nossa primeira localização no mapa Então, como falamos anteriormente, temos um script aqui vinculado ao arquivo JS map dot. Nossa função de retorno de chamada informa ao arquivo HML qual função deve ser acessada primeiro quando a página é carregada no arquivo JS map dot Nós o chamamos de Init Map. No arquivo S, definimos a função chamada Init Map Obtemos o ID do mapa do arquivo HML e definimos o centro do mapa a ser exibido O Google Maps faz isso usando longitude e latitude para traçar a localização no mapa Definimos o centro do mapa como a localização do Big Ben. Também podemos definir o nível de zoom que queremos que o mapa tenha. Oito é quase o meio. Quanto mais alto você tiver seu Zoom, mais ampliado ele será, quanto menos você o tiver, mais ampliado será o mapa Ao abrir o arquivo HTML usando o Google Chrome, agora podemos ver o que codificamos Os mapas do Google são exibidos claramente na tela, com o Big Ben no centro do mapa. Até o momento, não adicionamos marcadores, mas isso fará parte da próxima aula Vou aumentar o zoom para ter uma imagem melhor do que o mapa está mostrando. Agora que fiz isso, você pode ver que no meio do mapa está o Big Ben. O mapa é interativo e você pode arrastá-lo, reduzir o zoom e ver uma visão de satélite. E também arraste um marcador até a localização atual e role ao redor Os benefícios do script de são que o mapa é interativo, então podemos interagir com esse mapa, rolar e também personalizar os recursos de design do mapa. Vamos ver como personalizar os marcadores do mapa mais tarde Então, obrigado por assistir a esta aula. Analisamos o código relevante necessário para entrar em nosso arquivo de script de desenho para poder mostrar claramente a localização no mapa e também como ampliar e reduzir o mapa e interagir com ele. Na próxima aula, veremos como adicionar marcadores ao mapa para que possamos traçar claramente as coordenadas da localização no mapa 5. Como adicionar marcadores de localização ao seu de mapa!: Bem-vindo à classe quatro. Nesta aula, veremos como realmente adicionar um marcador ao mapa para que as coordenadas específicas do local possam ser visualizadas no mapa Portanto, para adicionar o marcador ao projeto, precisamos apenas editar o arquivo JS do mapa, para que o índice em HTML e o estilo em CSS permaneçam os mesmos Eu fiz algumas pequenas alterações no código. Eu usei uma variável para armazenar os códigos de localização do ponto que queremos traçar no mapa. Em seguida, defino o centro do mapa com essas coordenadas de localização. A parte importante é destacada aqui. Queremos criar um marcador para o mapa. A API do Google Map tem uma função embutida para fazer isso. Simplesmente definimos a posição do mapa com as coordenadas de localização que queremos traçar e, em seguida, definimos o mapa no qual você deseja traçar a coordenada No nosso caso, estamos apenas chamando-o de mapa porque é para isso que definimos o mapa. Feito isso, você poderá ver a localização do Big Ben a ser plotada no mapa usando este marcador vermelho aqui Claro, não precisa ser o Big Ben. Você pode simplesmente editar qualquer uma das coordenadas de localização para traçar a localização específica desejada. Obrigado por assistir a esta aula. Aprendemos qual código precisa ser adicionado ao nosso arquivo Java script para traçar o marcador do local que queremos exibir no mapa Na próxima aula, veremos personalização básica dos mapas e como podemos mudar o marcador do mapa para ser uma imagem do que quisermos 6. Como adicionar vários marcadores no de mape, a que a (CHa: Bem-vindo de volta à classe seis. Nesta aula, veremos como adicionar vários marcadores ao mapa para que você possa visualizar propriedades diferentes ao mesmo tempo Novamente, vamos apenas editar o arquivo maps do JavaScript, que será construído em grande parte o mesmo código da última classe. Em nossa matriz de alocações, adicionei mais coordenadas para que possamos traçar marcadores diferentes no Nesse caso, eu tenho o Big Ben, o Palácio de Londres e o Palácio Buchanan em uma matriz de alocação, então poderemos ter três marcadores o Palácio de Londres e o Palácio Buchanan em uma matriz de alocação, então poderemos ter três marcadores no mapa. Mas isso é ilimitado. Você pode ter quantos marcadores quiser. Acabei de adicionar as coordenadas de latitude e longitude de cada um desses pontos de referência na matriz de posição Também defini o tipo como info, para que ele exiba um marcador de informações Mas, novamente, isso pode ser configurado para o que você quiser. Para mudar isso, basta definir a matriz de ícones e adicionar um novo ícone. Para poder desenhar vários marcadores, precisamos ter quatro voltas para percorrer a matriz de localizações e adicionar todas as localizações ao mapa Como você pode ver, eu adicionei quatro loops que representam o comprimento dos locais Então, no nosso caso, temos três localizações, então ele dá três voltas e desenha três marcadores no mapa Vou traçar a posição do primeiro local antes de dar uma volta para o segundo local e depois para o E para cada um desses marcadores, podemos ter a mesma animação e também o mesmo logotipo, e todos serão desenhados no mesmo mapa Como você pode ver, quando eu carrego a página, podemos ver os três marcadores no mapa em três locais diferentes Então, como você pode ver no mapa, temos três localizações, que são três pontos que traçamos Portanto, o circuito de quatro voltas deu três voltas para cada localização em nossa matriz de localização e traçou esses pontos usando a longitude e a latitude no e Como você pode ver, quando atualizamos a página, os logotipos saltam para cima e para baixo usando a animação que codificamos Obrigado por assistir a esta aula. Aprendemos como adicionar vários marcadores no mapa e também o potencial de adicionar mais marcadores e alterar os ícones Na próxima aula, veremos como geocodificar uma localização para que não precisemos saber a latitude e longitude de cada ponto que traçamos Em vez disso, podemos ter apenas a localização, que deve ser convertida pela API do Google Map em longitude e latitude para que não precisemos nos preocupar com isso 7. Como personalizar seu mapeamento! (tamanho, animação, logotipo e muito mais!): Bem-vindo a esse custo Analisaremos pequenas personalizações que podemos fazer no mapa e veremos como podemos alterar ícone do marcador e também adicionar algumas animações interessantes Novamente, estamos apenas editando o arquivo JS de pontos do mapa. Eu fiz algumas pequenas variações no código aqui. A primeira é que definimos base do ícone para obter a imagem do mapa da biblioteca de exemplos de JavaScript do Google e, em seguida, definimos o ícone a imagem de mapas de informações dentro da biblioteca. Eu usei isso como exemplo, mas você não precisa usar essa biblioteca. Você pode usar qualquer imagem que quiser, literalmente qualquer imagem que quiser, desde que tenha definido o ícone que deseja usar. Então, como exemplo, tenha ícones aqui, o marcador de pontos PNG, se eu quiser definir esse marcador para ser o marcador do Google Maps Tudo o que precisamos fazer é excluir isso e definir o título como Mark PNG. Talvez seja necessário editar a largura e a altura desse marcador se a imagem for muito grande. Mas, por enquanto, estou usando biblioteca JavaScript do Google como exemplo. Nesta seção, criei uma matriz chamada localizações, que conterá todas as localizações que eu quiser traçar no mapa. Agora, eu só quero traçar o Big Ben no mapa. Então, eu defini a posição dos mapas do Google e a longitude e latitudes para a localização do Big Ben Também defini o tipo do marcador como Info, que se referirá a essa base de ícones aqui Em seguida, criei os marcadores, que são basicamente os mesmos de antes No entanto, incluí a posição da matriz de localizações como sendo o Big Ben. E também a matriz de ícones será o ícone de informações, que nos fornecerá um marcador de informações Também adicionei uma animação interessante aqui para mostrar o marcador caindo nos mapas do Google para dar um efeito interessante e tornar o mapa um pouco mais Como você pode ver, o ícone do mapa agora tem a forma de um olho. Como eu disse antes, isso não precisa ser um logotipo informativo. Isso pode ser qualquer marcador que você quiser. O que é legal é porque eu adicionei a animação. Quando eu atualizo a página, você vê o marcador saltando, que dá um Nessa aula, aprendemos como personalizar o logotipo do marcador e também adicionar uma animação interessante para dar um bom efeito visual ao marcador quando ele cai no mapa Na próxima aula, veremos como adicionar vários marcadores no mapa para que possamos exibir vários locais ao mesmo tempo no mapa 8. Locações de mapas de GeoCoding locações (USEFUL!): Então, bem-vindo à nossa turma final sete. Nesta aula, veremos como pegar uma localização e convertê-la usando a API Geocode em longitude e latitude para que elas possam ser plotadas Isso nos permite traçar pontos no mapa, aplicativos nos quais não sabemos as coordenadas deles. Isso é muito útil quando você deseja traçar localização no mapa e não sabe as coordenadas. Em vez de tentar calcular a longitude e a latitude, você pode usar a API Geocode para converter a localização em coordenadas, que podem então ser plotadas No arquivo JS do Map St, usei amplamente os mesmos códigos apenas traçando um marcador singular no Eu defini um local aqui para o código postal para que não haja dois ND. Mas você pode definir esse local para qualquer coisa que quiser. A API Geocode resolverá melhor essa localização, converterá para que ela possa ser plotada no A API Geocode é outra API separada da API de mapas. Mas, conforme discutido na segunda aula, já habilitamos isso no console do Google, então não deve haver nenhum problema aqui. Então, depois de definir a variável de localização, precisamos definir a variável de geocodificação usando o Geocode do Google Maps Em seguida, chamamos uma função aqui, que define o endereço para o local, que chama essa função aqui, que calcula o endereço do mapa. Eu coloquei uma declaração if aqui para que, se a API Geocode não conseguir localizar o endereço de carregamento, ela não destruirá o site Em vez disso, ele apenas registrará o erro. Se for bem-sucedido, a latitude será calculada para a localização e armazenada na variável e da mesma forma para a longitude Essas variáveis serão então usadas como coordenadas de localização a serem usadas no centro do mapa. Em seguida, desenhei um marcador cuja posição é definida como a longitude e a latitude das coordenadas Isso pode então ser plotado no gráfico. Embora possamos estar usando apenas um exemplo simples aqui, isso tem potencial para ser usado para muitas funções, como obter uma entrada do usuário para um endereço que ele deseja gcate, convertê-lo e, em seguida, plotá-lo Usando uma técnica semelhante à nossa última aula, também podemos usar um loop aqui para poder desenhar vários marcadores no mapa O local não precisa ser um código postal. Pode ser um nome de rua, uma cidade ou um nome de rua e uma cidade e um código postal para fornecer um endereço específico. Essa é a mesma tecnologia usada quando você pesquisa destino no Google Maps e deixa cair um alfinete. Como você pode ver, quando eu atualizo a página, ela traça o código postal definido em um local e desenha um marcador no mapa para esse um local e desenha um marcador no mapa para Então, obrigado por assistir a aula sete. Nesta aula final, aprendemos como pegar qualquer local e traçar no gráfico sem saber as coordenadas de latitude e longitude Isso pode ser usado para qualquer local e pode ser expandido para ser obtido de um banco de dados, da entrada do usuário e até mesmo desenho de vários marcadores ao mesmo tempo 9. O projeto do curso!: Bem-vindo ao projeto da turma. Para isso, quero que você use o que aprendeu na aula de hoje para colocar o mapa em seu site e personalizá-lo adicionando vários marcadores exatamente como fizemos na aula de hoje Todo o código da aula de hoje foi colocado no GitHub. Então, se você ficar preso, dê uma olhada no código e fique à vontade para deixar qualquer pergunta abaixo. Então, ao final deste projeto de aula, você deve adicionar o mapa em seu site e, em seguida, adicionar vários marcadores para mostrar locais diferentes para todas as pessoas diferentes que visitam seu site Então experimente e, se você ficar preso, não se esqueça de usar um hub git ou fazer uma pergunta abaixo 10. Recap&Conclusion - agradece: Obrigado a todos por assistirem a esta aula. Espero que você tenha aprendido muito e que consiga usar essas ferramentas para beneficiar seu próprio site. Então, para concluir, hoje eu te ensinei como integrar o Google maps em seu site usando HTML, CSS e JavaScript. Mostrei como mostrar locais usando marcadores, como personalizar os mapas e como usar o Google Geocoder para mostrar a localização dos clientes no Então, por favor, dê um projeto para a turma e confira minha outra aula no canal em que mostrei como criar um site do zero, usando CSS e HTML. E obrigado por assistir.