W2ui tabs toggle functionality not working

Question

Hey

i got issue in W2ui tabs, i have two tabs am tiring to implement two maps

tab1 map1

tab2 map2

when I clicked tab2 map2 have to display but map 1 displaying

am new to w2ui and angularjs so please help me to solve this issue

 

 

<script type="text/javascript">

$(function () {

debugger;

// -- Tabs

$('#tabs').w2tabs({

name: 'tabs',

active: 'load_us_map',

tabs: [

{ id: 'load_us_map', caption: 'U.S' },

{ id: 'load_ind_map', caption: 'India' }

],

onClick: function (event) {

switch (event.target) {

case 'load_us_map':

initialize0();

break;

case 'load_ind_map':

initialize1();

$('#load_ind_map');

}

}

});

});

function initialize1() {

var latlng = new google.maps.LatLng(8.107, 77.459);

var myOptions =

{

zoom: 16,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map_canvas1"), myOptions);

var marker = new google.maps.Marker({

position: latlng, title: "Ind"

});

marker.setMap(map);

var contentString = 'Ind';

var infowindow = new google.maps.InfoWindow({ content: contentString });

infowindow.open(map, marker);

initialize0();

}

window.onload = initialize1;

function initialize0() {

var latlng = new google.maps.LatLng(32.2, -96.902);

var myOptions =

{

zoom: 16,

center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map_canvas0"), myOptions);

var marker = new google.maps.Marker({ position: latlng, title: "u.s" });

marker.setMap(map);

var contentString = 'u.s';

var infowindow = new google.maps.InfoWindow({ content: contentString });

infowindow.open(map, marker);

}

window.onload = initialize0;

</script>

<div class="bw_map_canvas" id="map_canvas0" style=" width:100%; height:400px;"></div>

</div>

<div id="load_ind_map">

<script type="text/javascript">

</script>

<div class="bw_map_canvas" id="map_canvas1" style="width:100%; height:400px;">

</div>

</div>