Google Maps - #2 Rotas Avançadas e Incorporação

15/01/2026

No tutorial de Google Mapas de hoje aprenderemos mais sobre como traçar rotas e como incorporar um mapa ao seu site ou blog.

Rotas e incorporaçao de mapas

Para usar rotas utilizaremos primeiramente o endereço inicial, clicaremos no botão rotas e inseriremos os demais destinos da rota.

Para fazer a incorporação do mapa a um site ou blog, vamos criar um arquivo index.html pelo bloco de notas e vamos colar o seguinte código:

<html>
	<head><title>Meu Mapa</title></head>
	<body>
		<iframe src="https://www.google.com/maps/embed?pb=!1m34!1m12!1m3!1d3795796.521350769!2d-48.32182453244944!3d-21.70922682191882!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m19!3e0!4m5!1s0xa690cacacf2c33%3A0x5b35795e3ad23997!2sBelo%20Horizonte%2C%20MG!3m2!1d-19.919052!2d-43.9386685!4m5!1s0x94b0a9b35dc60831%3A0x68b8558a69681462!2sFranca%2C%20SP!3m2!1d-20.5394298!2d-47.401097899999996!4m5!1s0x94ce448183a461d1%3A0x9ba94b08ff335bae!2zU8OjbyBQYXVsbywgU1A!3m2!1d-23.555771399999998!2d-46.6395571!5e0!3m2!1spt-BR!2sbr!4v1768480410626!5m2!1spt-BR!2sbr" width="1300" height="350" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
	</body>
</html>

Lembrando que no código acima você deve trocar o iframe pelo que foi gerado do seu mapa.

Então é isso, por hoje é só! Fiquem todos com Deus! Sucesso nos códigos e na vida!

Precisa de ajuda na criação de planilhas? webdesignemfoco@gmail.com

Ninguém vem ao Pai, senão por mim. João 14:6

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Google Maps - #1 Introdução

Neste tutorial aprenderemos a forma mais básica do uso do Google Maps para consultas de endereços e opções de visualização.

Google Maps - #3 Adicionar empresa no mapa

Neste vídeo aprenderemos como inserir a nossa empresa no Google Mapas.

Javascript

Ensinaremos durante as aulas a codificaÃ§Ã£o desta importante linguagem de programaÃ§Ã£o.