MVC Component for Google Maps

Question

I’m currently using the component Googlemap control for Asp.Net MVC to render Googlemaps maps.

I am using this component because I will have to trace the route of a vehicle coming from the database via model, then I will use the component Databinding option.

The problem is I’m wearing it inside a bootstrap div.

<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>

The bad thing is that the component needs me to enter the value of the height and width of the map to be rendered (Width,Height), then the map is no longer responsive.

Some way to dynamically calculate the div width/height value?

Or some other free component you can use?