0

In my form I have the tab type Togglable tabs front-end Bootstrap. With each click of the tab, I need to display the maps, which unfortunately are displayed in gray part. The code used:

@Using Ajax.BeginForm("Index", New AjaxOptions() With { _
                                                        .UpdateTargetId = "AnswerSN",
                                                        .HttpMethod = "POST"
                                                      })
@<Script>
    init("tab1");

    function ChangeDiv(whoDiv) {
        if (whoDiv.href.indexOf("#tab1") != -1) {
            $(".mezzouno").attr("id", "old-map")
            $(".flottauno").attr("id", "basic-map")
            clearTimeout(TimeR)
            init("tab1");
        } else if (whoDiv.href.indexOf('#mezzo1') != -1) {
            $(".flottauno").attr("id", "old-map")
            $(".mezzouno").attr("id", "basic-map")
            clearTimeout(TimeR)
            init("mezzo1");
        }
    }

    var TimeR;

    function Fleet() {
        var updateUrl = '@Url.Action("FleetVb", "Home")';

        $.ajax({
            url: updateUrl,
            success: function (result) {
                FleetJs(result);
            },
            cache: false
        });

        clearTimeout(TimeR)
        TimeR= window.setTimeout("Fleet()", 60000);
    }

    function Vehicle() {
        var updateUrl = '@Url.Action("PointVb", "Home")';

        $.ajax({
            url: updateUrl,
            success: function (result) {
                initialize(result);
            },
            cache: false
        });

        clearTimeout(TimeR)
        TimeR= window.setTimeout("Vehicle()", 60000);
    }

    function init(whoDiv) {
        var myOptions = {
            zoom: 8,
            center: new google.maps.LatLng(41.895122, 12.481627),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            panControl: true,
            panControlOptions: {
                position: google.maps.ControlPosition.RIGHT_TOP
            },
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
            },
            streetViewControl: false,
            scaleControl: true
        };

        map = new google.maps.Map(document.getElementById("basic-map"), myOptions);
        google.maps.event.trigger(map, 'resize');

        if (whoDiv== 'tab1') {
            window.setTimeout("ProvaFlotta()", 1000);
        } else if (whoDiv== 'mezzo1') {
            window.setTimeout("Prova()", 1000);
        }
    }
</script>

@<div id="AnswerSN" style="position:absolute; top:100px"></div>

End Using

Where do I handle the click of the tab and under it and check the id of the map? Unfortunately, I get this:

Map

You can bring up the full map and not gray?

3
  • It might be a css problem: stackoverflow.com/questions/9141249/… Jan 15, 2014 at 9:52
  • Part of code which initialize map is ok. It shows Italy and Rome area after zooming. Check your style settings for maps. Jan 15, 2014 at 9:58
  • ok, widening the browser window the map returns to normal, that is visible, clicking on the tab back into the visible part with the gray and enlarging the window back to 100% visible. you can make it always visible at the click?
    – Dave Pate
    Jan 15, 2014 at 13:40

2 Answers 2

0

enlarging the browser window, the map becomes visible, click on the tab I see the other map with the gray back and widening the window visible.

How do I make it always visible? There seems to be something that goes in conflict ....

Help

0

Then, the resize I plugged in the two functions "Fleet()" and "Vehicle()" using another variable of type Boolean, so that the resize is done only once. The calls to these two functions are performed by "init()" with a timer of 200 milliseconds so that the map may not be displayed in gray.

Thank you again.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.