Рядом с картой не работают закладки бутстрапа?

Question

код:

<script type="text/javascript"> 
     $(function(){ 
      $('.chkbox').click 
      (
       function(){ 

       if($(this).is(':checked')) 
       { 

       } 
       else{ 
       $('#'+$(this).attr('id')).attr('checked',true); 
      } 
       search_types(map.getCenter()); 
      }); 

     }); 

     var map; 
     var infowindow; 
     var markersArray = []; 
     var pyrmont = new google.maps.LatLng(20.268455824834792, 85.84099235520011); 
     var marker; 
     var geocoder = new google.maps.Geocoder(); 
     var infowindow = new google.maps.InfoWindow(); 
     // var waypoints = [];     
     function initialize() { 
      map = new google.maps.Map(document.getElementById('map'), { 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       center: pyrmont, 
       zoom: 14 
      }); 
      infowindow = new google.maps.InfoWindow(); 
      //document.getElementById('directionsPanel').innerHTML=''; 
      search_types(); 
      } 

     function createMarker(place,icon) { 
      var placeLoc = place.geometry.location; 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: place.geometry.location, 
       icon: icon, 
       visible:true 

      }); 

      markersArray.push(marker); 
      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.setContent("<b>Name:</b>"+place.name+"<br><b>Address:</b>"+place.vicinity+"<br><b>Reference:</b>"+place.reference+"<br><b>Rating:</b>"+place.rating+"<br><b>Id:</b>"+place.id); 
       infowindow.open(map, this); 
      }); 

     } 
     var source=""; 
     var dest=''; 

     function search_types(latLng){ 
      clearOverlays(); 

      if(!latLng){ 
       var latLng = pyrmont; 
      } 
      var type = $('.chkbox:checked').val(); 
      var icon = "images/"+type+".png"; 


      var request = { 
       location: latLng, 
       radius: 2000, 
       types: [type] //e.g. school, restaurant,bank,bar,city_hall,gym,night_club,park,zoo 
      }; 

      var service = new google.maps.places.PlacesService(map); 
      service.search(request, function(results, status) { 
       map.setZoom(14); 
       if (status == google.maps.places.PlacesServiceStatus.OK) { 
        for (var i = 0; i < results.length; i++) { 
         results[i].html_attributions=''; 
         createMarker(results[i],icon); 
        } 
       } 
      }); 

     } 


     // Deletes all markers in the array by removing references to them 
     function clearOverlays() { 
      if (markersArray) { 
       for (i in markersArray) { 
        markersArray[i].setVisible(false) 
       } 
       //markersArray.length = 0; 
      } 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 

     function clearMarkers(){ 
      $('#show_btn').show(); 
      $('#hide_btn').hide(); 
      clearOverlays() 
     } 
     function showMarkers(){ 
      $('#show_btn').hide(); 
      $('#hide_btn').show(); 
      if (markersArray) { 
       for (i in markersArray) { 
        markersArray[i].setVisible(true) 
       } 

      } 
     } 

     function showMap(){ 

      var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png'; 
      var markerImage = new google.maps.MarkerImage(imageUrl,new google.maps.Size(24, 32)); 
      var input_addr=$('#address').val(); 
      geocoder.geocode({address: input_addr}, function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        var latitude = results[0].geometry.location.lat(); 
        var longitude = results[0].geometry.location.lng(); 
        var latlng = new google.maps.LatLng(latitude, longitude); 
        if (results[0]) { 
         map.setZoom(14); 
         map.setCenter(latlng); 
         marker = new google.maps.Marker({ 
          position: latlng, 
          map: map, 
          icon: markerImage, 
          draggable: true 

         }); 
         $('#btn').hide(); 
         $('#latitude,#longitude').show(); 
         $('#address').val(results[0].formatted_address); 
         $('#latitude').val(marker.getPosition().lat()); 
         $('#longitude').val(marker.getPosition().lng()); 
         infowindow.setContent(results[0].formatted_address); 
         infowindow.open(map, marker); 
         search_types(marker.getPosition()); 
         google.maps.event.addListener(marker, 'click', function() { 
          infowindow.open(map,marker); 

         }); 


         google.maps.event.addListener(marker, 'dragend', function() { 

          geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) { 
           if (status == google.maps.GeocoderStatus.OK) { 
            if (results[0]) { 
             $('#btn').hide(); 
             $('#latitude,#longitude').show(); 
             $('#address').val(results[0].formatted_address); 
             $('#latitude').val(marker.getPosition().lat()); 
             $('#longitude').val(marker.getPosition().lng()); 
            } 

            infowindow.setContent(results[0].formatted_address); 
            var centralLatLng = marker.getPosition(); 
            search_types(centralLatLng); 
            infowindow.open(map, marker); 
           } 
          }); 
         }); 


        } else { 
         alert("No results found"); 
        } 
       } else { 
        alert("Geocoder failed due to: " + status); 
       } 
      }); 

     } 

    </script> 

HTML код:

<ul class="nav nav-tabs"> 
    <li class="active"> 
     <a data-toggle="tab" href="#home"><b>Overview</b></a> 
    </li> 
    <li> 
     <a data-toggle="tab" href="#menu1"><b>Facilities</b></a> 
    </li> 
</ul> 


<div class="tab-content"> 
<div id="home" class="tab-pane fade in active"> 
    <p>Welcome</p> 
</div> 
<div id="menu1" class="tab-pane fade"> 
    //Google map 
    <div id="map"></div> 
    <input type="text" id="latitude" style="display:none;" placeholder="Latitude"/> 
    <input type="text" id="longitude" style="display:none;" placeholder="Longitude"/> 
    <input type="button" id="show_btn" value="show markers" onClick="showMarkers();" style="display:none;" /> 
    <div id="test"></div> 
</div> 

В этом коде, когда я нажимаю на менюДомашний текст откроется, но когда я нажимаю на содержание вкладки menu1 показываются, но Google Map не отображаются. Я хочу открыть карту google на вкладке menu1. Итак, как я могу это сделать, пожалуйста, помогите устранить эту проблему?

Спасибо

Answer 1

Я пытался кода Но я думаю, что есть что-то missing.So, я создал способ загрузки простой карты внутри этих вкладок. Проблема, почему карты не загружаются внутри вкладки, состоит в том, что карта становится скрытым элементом, поэтому, чтобы сделать видимым, мы должны повторно инициализировать карты при нажатии табуляций. Я написал код ниже, надеюсь, что этот ответ решает вашу проблему.

function initMap() { 
 
     var uluru = {lat: -25.363, lng: 131.044}; 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 4, 
 
      center: uluru 
 
     }); 
 
     var marker = new google.maps.Marker({ 
 
      position: uluru, 
 
      map: map 
 
     }); 
 
     } 
 

 
//Bind click handlers - Here's the important part 
 
$('.nav a').on('click', function() { 
 
    setTimeout(function(){ 
 
     google.maps.event.trigger(map, 'resize'); 
 
    }, 50); 
 
});

#map{ height:400px}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyClopfCRw-1QHy3ccVqoE5alwIdq44XwCc&callback=initMap"> 
 
    </script> 
 

 
<ul class="nav nav-tabs"> 
 
    <li class="active"> 
 
     <a data-toggle="tab" href="#home"><b>Overview</b></a> 
 
    </li> 
 
    <li> 
 
     <a data-toggle="tab" href="#menu1"><b>Facilities</b></a> 
 
    </li> 
 
</ul> 
 

 

 
<div class="tab-content"> 
 
<div id="home" class="tab-pane fade in active"> 
 
    <p>Welcome</p> 
 
</div> 
 
<div id="menu1" class="tab-pane fade"> 
 
    //Google map 
 

 
    <div id="map"></div> 
 
    <input type="text" id="latitude" style="display:none;" placeholder="Latitude"/> 
 
    <input type="text" id="longitude" style="display:none;" placeholder="Longitude"/> 
 
    <input type="button" id="show_btn" value="show markers" onClick="showMarkers();" style="display:none;" /> 
 
    <div id="test"></div> 
 
</div>