Atualmente estou usando o componente Googlemap control for Asp.Net MVC para rendererizar mapas do GoogleMaps.
Estou usando este componente porque vou ter que traçar a rota de um veículo vindo da base de dados via model, aí vou usar a opção de DataBinding do componente.
O problema é que estou usando ele dentro de um div com bootstrap.
<div class="col-md-10">
<div class="content-box-header">
<div class="panel-title">Mapa</div>
</div>
<div class="content-box-large box-with-header">
<div id="map-canvas">
@(Html.GoogleMap()
.Name("map")
.Width(750)
.Height(350)
.Zoom(18)
.MapTypeId(MapType.Satellite)
.Center(c => c.Latitude(-23.4554d)
.Longitude(-46.6257d))
.Culture(CultureInfo.GetCultureInfo("pt-BR"))
.Markers(marker =>
{
marker.Add()
.Latitude(-23.4554d)
.Longitude(-46.6257d)
.Title("Hello World!")
.Icon("~/Content/img/6.png", new Size(20, 32), new Point(0, 0), new Point(0, 32))
.Draggable(true);
}))
</div>
</div>
O ruim é que o componente precisa que eu informe o valor da altura e largura do mapa a ser renderizado(Width,Height), aí o mapa deixa de ser responsivo.
Alguma forma de calcular o valor da largura/altura do div dinamicamente?
Ou algum outro componente free que possa utilizar?