CompanyProfile.cshtml

@model Bumbea.UInterface.Model.Company.CompanyProfileModel
@section MainContent{
    <div class="thumbnail basic-information">
        <div class="pull-left left-info">
            <div class="top-info">
                <img class="pull-left" src="@(String.IsNullOrEmpty(Model.PictureUrl) ? "http://placehold.it/50x50" : Url.Content(Model.PictureUrl))" alt=""/>
                <div class="business-details pull-left">
                    <h3>
                        @Model.Name</h3>
                    <div class="product-rating">
                        @Html.EditorFor(model => model.Rating, "StarRating", null)
                    </div>
                    <div class="reviews-resume pull-left">
                        <h4>
                            @Model.ProductItemCatalog.Count</h4>
                        <h5>
                            Productos</h5>
                    </div>
                    <div class="reviews-resume pull-left">
                        <h4>
                            @Model.TotalReviews</h4>
                        <h5>
                            Reviews</h5>
                    </div>
                </div>
            </div>
            <div class="social-details clearfix alert alert-info">
                <h4 class="pull-left">
                    Quedate en contacto</h4>
                <div class="pull-right social-sharing">
                    <ul>
                        <li><a class="zocial facebook icon"></a></li>
                        <li><a class="zocial twitter icon"></a></li>
                        <li><a class="zocial pinterest icon"></a></li>
                        <li><a class="zocial googleplus icon"></a></li>
                    </ul>
                </div>
            </div>
            <a href="#" class="btn btn-warning pull-right">Ir al sitio</a>
        </div>
        <div class="pull-right right-info">
            <div id="map_canvas">
            </div>
            <div class="b-location-info">
                <dl class="dl-horizontal">
                    <dt>Dirección:</dt>
                    <dd>
                        @Model.Address Montevideo, Uruguay</dd>
                    <dt>Tel.:</dt>
                    <dd>
                        @Model.PhoneNumber</dd>
                    <dt>Info.:</dt>
                    <dd>
                        @Model.Email</dd>
                    <dt>Atención:</dt>
                    <dd>
                        @Model.OpenToThePublic</dd>
                </dl>
            </div>
        </div>
    </div>
    <h2>
        Catálogo de la empresa</h2>

    @Html.DisplayFor(model => model.ProductItemCatalog)
}
@section BottomScripts{
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyChFXu2DPpaRjaMMY4uLqVkBWhdvLO9RRM&sensor=true"
        type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            initialize();
        });

        function initialize() {
            var myLatlng = new google.maps.LatLng('@Model.Latitude', '@Model.Longitude');
            var myOptions = {
                zoom: 15,
                center: myLatlng,
                mapTypeControlOptions: {
                    // Para que no aparezca ningun control que moleste
                    // mapTypeIds: [],
                    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'hybrid'],
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                },
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var image = new google.maps.MarkerImage(
          '@Url.Content("~/Content/static/img/marker.jpg")',
          new google.maps.Size(46, 42),
          new google.maps.Point(0, 0),
          new google.maps.Point(23, 42)
        );
            var shadow = new google.maps.MarkerImage(
          '@Url.Content("~/Content/static/img/marker.jpg")',
          new google.maps.Size(70, 42),
          new google.maps.Point(0, 0),
          new google.maps.Point(23, 42)
        );

            var shape = {
                coord: [42, 0, 43, 1, 43, 2, 44, 3, 45, 4, 45, 5, 44, 6, 44, 7, 44, 8, 44, 9, 44, 10, 44, 11, 44, 12, 43, 13, 43, 14, 45, 15, 43, 16, 43, 17, 42, 18, 42, 19, 42, 20, 41, 21, 41, 22, 41, 23, 40, 24, 40, 25, 40, 26, 41, 27, 40, 28, 42, 29, 42, 30, 42, 31, 42, 32, 42, 33, 40, 34, 39, 35, 39, 36, 38, 37, 38, 38, 36, 39, 35, 40, 32, 41, 8, 41, 3, 40, 2, 39, 1, 38, 1, 37, 0, 36, 0, 35, 0, 34, 0, 33, 0, 32, 0, 31, 1, 30, 1, 29, 1, 28, 2, 27, 0, 26, 0, 25, 0, 24, 0, 23, 1, 22, 1, 21, 1, 20, 1, 19, 1, 18, 1, 17, 1, 16, 2, 15, 2, 14, 2, 13, 2, 12, 2, 11, 3, 10, 3, 9, 3, 8, 3, 7, 3, 6, 4, 5, 4, 4, 4, 3, 5, 2, 6, 1, 7, 0, 42, 0],
                type: 'poly'
            };

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                shape: shape,
                icon: image,
                shadow: shadow
            });
        }
    </script>
}