[Solved] Display (Load) Google Maps inside Boostrap Tabs

suhradam...

SOLVED CLOSED ACTIVE ANSWERED
User: suhradam.ankit
Posted: on Aug 24, 2015 03:15 AM
Forum: Social Networking
Answer: 1
Views: 4257

i using simple google map. when first time click on tab "showmap" when perfect load map. like show in image 1:

screen shot

now "showmap" tab hide other tab show and then again open tab "showmap" then not perfect open map. like show in image 2:

screen shot

the code is:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>    
    <script type="text/javascript">
               

        function show() 
        {
            var map;
            
            var latlng = new google.maps.LatLng(21.7679, 78.8718);
            var myOptions =
            {
                zoom: 4,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("dvMap"), myOptions);
        }
    </script>

<ul class="nav nav-pills">
                                <li class="active"><a href="#tab_a" data-toggle="pill" >Manually</a></li>
                                <li><a href="#tab_b" data-toggle="pill" onclick="return show();">Using Map</a></li>  
                            </ul>
<div class="tab-pane active" id="tab_a">
<asp:TextBox ID="txtdate" runat="server" class="date-picker form-control" ></asp:TextBox> 
</div>

<div class="tab-pane" id="tab_b">
 <div id="dvMap" style="height: 500px; width: 100%"></div>
</div>

please help me. thanks.

Download FREE API for Word, Excel and PDF in ASP.Net

Shashika...

0 3

Reply
ANSWER
User: Shashikant
Replied: on Aug 24, 2015 08:49 AM
Modified: on Aug 24, 2015 08:54 AM
Report

Here I have created sample that will help you out.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            setTimeout(function () {
                $('[id*=TextBox1]').focus();
            }, 100);
            var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "personal";
            $('#Tabs a[href="#' + tabName + '"]').tab('show');
            $("#Tabs a").click(function () {
                $("[id*=TabName]").val($(this).attr("href").replace("#", ""));
            });
        });
        function getMap() {
            setTimeout(function () {
                var map;
                var latlng = new google.maps.LatLng(21.7679, 78.8718);
                var myOptions =
                {
                    zoom: 4,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("dvMap"), myOptions);
            }, 50);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="panel panel-default" style="width: 500px; padding: 10px; margin: 10px">
        <div id="Tabs" role="tabpanel">
            <ul class="nav nav-tabs" role="tablist">
                <li class="active"><a href="#tab_a" data-toggle="pill">Manually</a></li>
                <li><a href="#tab_b" data-toggle="pill" onclick="getMap()">Using Map</a></li>
            </ul>
            <div class="tab-content" style="padding-top: 20px">
                <div class="tab-pane active" id="tab_a">
                    <asp:TextBox ID="TextBox1" runat="server" class="date-picker form-control"></asp:TextBox>
                </div>
                <div class="tab-pane" id="tab_b">
                    <div id="dvMap" style="height: 500px; width: 100%">
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

[Solved] Display (Load) Google Maps inside Boostrap Tabs

Company

Explore

Follow us

Contact Us