如何在bootstrap选项卡中显示地图？

code:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function initialize() {

        directionsDisplay = new google.maps.DirectionsRenderer();
        var chicago = new google.maps.LatLng(41.850033, -87.6500523);
        var mapOptions = {
            zoom: 7,
            center: chicago
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        directionsDisplay.setMap(map);
    }

    function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

html code:

<div id="menu2" class="tab-pane fade">
    <div class="col-md-12">
       <p>Hello...</p>
    </div>
</div>
<div id="menu2" class="tab-pane fade">
    <div class="col-md-12">
        <input type="text" placeholder="Source" name="start" id="start" value="noida">
        <input type="text" placeholder="Source" name="end" id="end" value="delhi">
        <input id="Button1" type="button" value="button" onclick="calcRoute()" />
        <div id="map-canvas"></div>
    </div>
</div>

In this code I want to display google map inside the tab which have an id="menu2" map are not showing. when I click on id (menu1) it show hello but when I click on id (menu2) text field are rendering but click on button it does not show map. How can I fix this problem ?

Thank You

I am using this code to display google maps on Bootstrap tabs

Html

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no_padding">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#overview">Overview</a></li>
                    <li><a data-toggle="tab" href="#host">The Host</a></li>
                    <li><a data-toggle="tab" href="#location">Location</a></li>
                    <li><a data-toggle="tab" href="#reviews">Reviews</a></li>
                </ul>
                <div class="tab-content">
                    <div id="overview" class="tab-pane fade in active">

                    </div>
                    <div id="host" class="tab-pane fade">

                    </div>
                    <div id="location" class="tab-pane fade">
                        <div id="map" style="width:100%;height:500px"></div>
                    </div>
                    <div id="reviews" class="tab-pane fade">

                    </div>
                </div>
            </div>

Jquery

jQuery(document).ready(function () {
    function myMap() {
        var mapCanvas = document.getElementById("map");
        var myCenter = new google.maps.LatLng(11.0238913, 76.9934423);
        var mapOptions = {
            center: myCenter,
            zoom: 14,
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID]
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true,
            mapTypeControl: false,
            scaleControl: true,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE,
                position: google.maps.ControlPosition.LEFT_TOP
            }
        };

        var map = new google.maps.Map(mapCanvas, mapOptions);
        map.setCenter(myCenter);

        var marker = new google.maps.Marker({
            map: map,
            position: myCenter,
            draggable: true
        });

        marker.setMap(map);

        google.maps.event.addListener(marker, 'dragend', function () {
            map.setCenter(this.getPosition()); // Set map center to marker position
        });

        jQuery('.nav-tabs a[href="#location"]').on('shown.bs.tab', function () {
            google.maps.event.trigger(map, 'resize');
            map.setCenter(myCenter);
        });

    }

    google.maps.event.addDomListener(window, 'load', myMap);

});