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:
1 |
dotnet new sln |
Abra a pasta do projeto MVC:
1 |
cd .\src\CSharpMvcGoogleMapWithMarkers.Mvc\ |
Crie um projeto C# do tipo MVC:
1 |
dotnet new mvc |
Volte a pasta raiz:
1 |
cd ..\..\ |
Adicione o projeto MVC na solução:
1 |
dotnet sln add .\src\CSharpMvcGoogleMapWithMarkers.Mvc\ |
Execute o site e veja no navegador:
1 |
dotnet run --project .\src\CSharpMvcGoogleMapWithMarkers.Mvc\CSharpMvcGoogleMapWithMarkers.Mvc.csproj |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
using Microsoft.AspNetCore.Mvc; namespace CSharpMvcGoogleMapWithMarkers.Mvc.Controllers { public class StoreController : Controller { public IActionResult Index() { return View(); } public IActionResult Detail() { return View(); } } } |
Clique o botão direito sobre a pasta Models, clique em New file e defina o nome como StoreViewModel.cs.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
using System; namespace CSharpMvcGoogleMapWithMarkers.Mvc.Models { public class StoreViewModel { public Guid Id { get; set; } public String Name { get; set; } public String Address { get; set; } public String Phone { get; set; } public String Latitude { get; set; } public String Longitude { get; set; } } } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 |
(...) <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li> <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li> <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li> <li><a asp-area="" asp-controller="Store" asp-action="Index">Know our stores</a></li> </ul> </div> (...) |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
@{ ViewData["Title"] = "Map"; } <h2>@ViewData["StoreName"]</h2> <h3>@ViewData["Message"]</h3> <style> #map { height: 600px; } </style> <h2>Stores</h2> <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -30.060821, lng: -51.181687}, zoom: 14 }); var marker = new google.maps.Marker({ position: new google.maps.LatLng(-30.059737, -51.164658), title:"Store 1" }); marker.setMap(map); marker = new google.maps.Marker({ position: new google.maps.LatLng(-30.064746, -51.157816), title:"Store 2" }); marker.setMap(map); marker = new google.maps.Marker({ position: new google.maps.LatLng(-30.066648, -51.155412), title:"Store 3" }); marker.setMap(map); marker = new google.maps.Marker({ position: new google.maps.LatLng(-30.051898, -51.194615), title:"Store 4" }); marker.setMap(map); marker = new google.maps.Marker({ position: new google.maps.LatLng(-30.052617, -51.181038), title:"Store 5" }); marker.setMap(map); marker = new google.maps.Marker({ position: new google.maps.LatLng(-30.071457, -51.191396), title:"Store 6" }); marker.setMap(map); marker = new google.maps.Marker({ position: new google.maps.LatLng(-30.059410, -51.207637), title:"Store 7" }); marker.setMap(map); }; </script> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> |
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.
1 2 3 4 5 |
var map; function initMap() { }; |
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.
1 2 3 4 5 6 7 |
var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -30.060821, lng: -51.181687}, zoom: 14 }); }; |
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().
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -30.060821, lng: -51.181687}, zoom: 14 }); var marker = new google.maps.Marker({ position: new google.maps.LatLng(-30.059737, -51.164658), title:"Store 1" }); marker.setMap(map); marker = new google.maps.Marker({ position: new google.maps.LatLng(-30.064746, -51.157816), title:"Store 2" }); marker.setMap(map); marker = new google.maps.Marker({ position: new google.maps.LatLng(-30.066648, -51.155412), title:"Store 3" }); marker.setMap(map); marker = new google.maps.Marker({ position: new google.maps.LatLng(-30.051898, -51.194615), title:"Store 4" }); marker.setMap(map); marker = new google.maps.Marker({ position: new google.maps.LatLng(-30.052617, -51.181038), title:"Store 5" }); marker.setMap(map); marker = new google.maps.Marker({ position: new google.maps.LatLng(-30.071457, -51.191396), title:"Store 6" }); marker.setMap(map); marker = new google.maps.Marker({ position: new google.maps.LatLng(-30.059410, -51.207637), title:"Store 7" }); marker.setMap(map); }; |
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