MVC Component for Google Maps

2

I'm currently using the Googlemap control for Asp.Net MVC component. to render maps from GoogleMaps.

I'm using this component because I'm going to have to trace the route of a vehicle coming from the database via model, then I'll use the component's DataBinding option.

The problem is that I'm using 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 tell the value of the height and width of the map to be rendered (Width, Height), so the map is no longer responsive.

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

Or some other free component you can use?

    
asked by anonymous 17.11.2016 / 22:35

0 answers