In der Nähe von Karte funktionieren nicht in Bootstrap-Registerkarten?

Question

Code:

<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-Code:

<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> 

In diesem Code, wenn ich Sie auf den Text zu Hause Registerkarte öffnen, aber wenn ich auf menu1 Registerkarte Inhalt klicken zeigen aber google map werden nicht angezeigt. Ich möchte Google Map auf der Registerkarte menu1 öffnen. Also, wie kann ich das tun bitte helfen, dieses Problem zu beseitigen?

Danke

Answer 1

ich Ihren Code versuchte, aber ich denke, es ist etwas missing.So, ich einen Weg geschaffen haben eine einfache Karte innerhalb dieser Tabs zu laden. Das Problem, warum Karten nicht innerhalb einer Registerkarte geladen werden, liegt daran, dass die Karte ein verstecktes Element wird. Um dies sichtbar zu machen, müssen wir die Karten neu initialisieren, wenn auf Registerkarten geklickt wird. Ich habe den Code unten geschrieben, hoffe diese Antwort Ihr Problem zu lösen.

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>