I'm using 2 tabs, first for showing list and another showing map. When the first time page is loaded 1 tab is shown by default and on click of second tab map is shown, but when i click list tab and again click map tab map loading partially.
Here is my JAVASCRIPT code:
$(document).on('click', "#load-map-view", function() { locateStores(); $("#store-list-view").hide(); $("#store-list-view").removeClass('disabled'); $("#store-map-view").show(); $("#store-map-view").addClass('disabled'); }); function locateStores() { var mapContent; var map = new google.maps.Map(document.getElementById("store-map-view"), { center: new google.maps.LatLng(47.6145, -122.3418), mapTypeId: google.maps.MapTypeId.ROADMAP, zoom: 13 }); var markers = []; $("#store-list-view .listed-shop").each(function() { markers.push({ lat: $(this).attr('data-lat'), lng: $(this).attr('data-lan'), name: $.trim($(this).find('div.shop-name').text()) }); }); for (index in markers) addMarker(markers[index]); function addMarker(data) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(data.lat, data.lng), map: map, title: data.name }); var infobox = new InfoBox({ content: document.getElementById("infobox"), disableAutoPan: false, maxWidth: 150, pixelOffset: new google.maps.Size(-140, -10), zIndex: null, boxStyle: { background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat", opacity: 0.80, width: "400px"//"280px" }, closeBoxMargin: "12px 4px 2px 2px", closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", infoBoxClearance: new google.maps.Size(1, 1) }); google.maps.event.trigger(map, 'resize'); map.setZoom(map.getZoom()); google.maps.event.addListener(marker, 'click', function() { $(".infoBox").fadeOut(300); infobox.open(map, this); map.panTo(new google.maps.LatLng(47.6145, -122.3418)); }); } var bounds = new google.maps.LatLngBounds(); for (index in markers) { var data = markers[index]; bounds.extend(new google.maps.LatLng(data.lat, data.lng)); } map.fitBounds(bounds); var pin = new google.maps.MVCObject(); function openInfoWindow(marker) { title.innerHTML = marker.getTitle(); pin.set("position", marker.getPosition()); infowindow.open(map, marker); } } I have tried several solutions like : adding this code
google.maps.event.trigger(map, "resize"); and many other solutions, but still the page still isn't loading.
can someone help me out in this?
