C# e Mvc: mapa do Google com marcadores

Você já precisou colocar um mapa em seu site ou aplicativo? E este mapa precisaria mostrar vários locais, como unidades comerciais de um empresa com filiais? Neste artigo eu mostro como exibir um mapa usando a API Google e adicionar os devidos marcadores em um site feito em C# e MVC.

Mas primeiro, você vai precisar de uma chave do Google API Maps, que pode ser adquirida no endereço:

Chave na mãe, vamos criar uma pasta chamada CSharpMvcGoogleMapWithMarkers e dentro dela incluir outra chamada src e então abrir no Visual Studio Code.

Se você ainda não usou o VS Code e/ou ainda usa apenas o Visual Studio convencional, eu fiz um artigo para quebrar  o gelo com este editor opensource da Microsoft.

Dentro da pasta src, crie outra pasta chamada CSharpMvcGoogleMapWithMarkers.Mvc, volte na pasta raiz e abra esta pasta no terminal e vá digitando os comandos a seguir:

Crie uma solução, para que seja possível abrir no Visual Studio convencional:

Abra a pasta do projeto MVC:

Crie um projeto C# do tipo MVC:

Volte a pasta raiz:

Adicione o projeto MVC na solução:

Execute o site e veja no navegador:

A saída do terminal será esta, onde o VS Code vai informar a URL local para testar, normalmente https://localhost:5001 ou http://localhost:5000.

Copie e cole no navegador o endereço e confira a página:

Crie um novo controller, chamado StoreController, que será uma tela com um mapa e ponto onde há lojas de uma empresa. Para isso, clique o botão direito sobre a pasta Controllers, clique em New file e defina o nome como StoreController.cs.

Clique o botão direito sobre a pasta Models, clique em New file e defina o nome como StoreViewModel.cs.

Para facilitar, adicione um novo item de menu chamado Know our stores que abre a action Index do controller Store, para isto edite o arquivo Views/Share/_Layout.cshtml.

 

Clique o botão direito sobre a pasta Views, clique em New folder e digite Store, em seguida clique o botão direito sobre Store e em New file e defina o nome como Index.cshtml.

Explicando o código Javascript do mapa

Declaramos uma variável chamada map e criamos uma função initMap (), serão informadas as coordenadas inciais e logo após definido os marcadores.

Agora vamos definir a posição e o zoom do mapa, instanciando um novo objeto google.maps.Map, que recebe os parâmetros  que informa qual a div que será renderizado o mapa, as coordenadas e o zoom.

Se você quiser entender melhor como funciona o Zoom e demais opções, clique no link abaixo para a documentação do google:

https://developers.google.com/maps/documentation/javascript/tutorial

Agora, com o mapa pronto, é adicionar os marcadores, para isso é só instanciar um objeto do tipo google.maps.Marker e usar a função setMap().

Segue a documentação do Google sobre marcadores:

https://developers.google.com/maps/documentation/javascript/markers

Ao carregar o mapa, todas as lojas serão exibidas como marcadores no mapa.

Pronto, agora temos uma mapa com marcadores de locais.

Este projeto pode ser conferido no meu repositório do GitHub:

  • https://github.com/tiagopariz/CSharpMvcGoogleMapWithMarkers

Visual Studio Code: como criar uma aplicação console em C#

O Visual Studio Code é o novo editor de código open-source da Microsoft, multiplataforma, que já funciona no Windows, Linux e Mac. Com foco no novo .NET Core, que também é um framework totalmente open-source. Porém, por mais simples que pareça, programar no VS Code é consideravelmente diferente do que programar no famigerado Visual Studio.

Requisitos

O projeto de console

Abra o Visual Studio Code, clique no menu View, e em seguida em Integrated Terminal (CTRL + ‘). No terminal, crie uma pasta usando o comando md chamada ConsoleApplicationVSCode (podem usar o explorer do Windows sem problemas).

No menu File, clique em Open folder, e selecione a pasta que acabamos de criar.

Na janela do terminal, posicione na pasta criada e digite o comando dotnet new console.

Abra o arquivo Program.cs.

Edite a classe Program.cs conforme o código a seguir:

Clique no menu Debug, e em seguida em Start Debugging (F5), e então teremos nossa aplicação console funcionando!

Este tutorial básico tem o objetivo de “quebrar o gelo” para começar a usar o VS Code, e também demonstrar que este editor é tão simples quando os seus antecessores, além do mais, em conjunto com as extensões corretas, pode virar uma poderosa ferramenta de trabalho!

Acesso o código fonte no meu GitHub:

https://github.com/tiagopariz/ConsoleApplicationVSCode