면도기의 Google지도

Question

Google지도를 다른 면도기에서 가져 오려면 어떻게해야하나요?

안녕하십니까, 내가 문제를 해결하기 위해 노력하고있어 ... Create.cshtml에서 Google지도 자바 스크립트, 문제는 Index.cshtml입니다.

색인 단추는 Create.cshtml 모달 부스트 랩을 호출합니다.

Index.cshtml을 Create.cshtml에서 가져 오는 방법.

모달은 정상적으로 작동하지만 Google지도는 작동하지 않습니다.

Create.cshtml

<div class="modal fade" id="myModal" role="dialog"> 
     <!-- 'has-error' class has been added on parent form-group div --> 
     <div class="modal-dialog modal-lg"> 

      <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Create</h4> 
       </div> 
       <div class="modal-body"> 


        <div class="form-group"> 
         @Html.LabelFor(m => m.GoogleMaps, new { @class = "col-xs-3 control-label" }) 
         <div class="col-xs-5"> 
          @Html.TextBoxFor(m => m.GoogleMaps, new { @id = "pac-input", @class = "controls", placeholder = "Search" }) 
          <div id="map" style="width:500px;height:380px;"></div> 
         </div> 
        </div>     


       </div> 
      </div> 
     </div> 
    </div> 

자바

function initAutocomplete() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: { lat: -33.8688, lng: 151.2195 }, 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    // Create the search box and link it to the UI element. 
    var input = document.getElementById('pac-input'); 
    var searchBox = new google.maps.places.SearchBox(input); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

    // Bias the SearchBox results towards current map's viewport. 
    map.addListener('bounds_changed', function() { 
     searchBox.setBounds(map.getBounds()); 
    }); 

    var markers = []; 
    // [START region_getplaces] 
    // Listen for the event fired when the user selects a prediction and retrieve 
    // more details for that place. 
    searchBox.addListener('places_changed', function() { 
     var places = searchBox.getPlaces(); 

     if (places.length == 0) { 
      return; 
     } 

     // Clear out the old markers. 
     markers.forEach(function (marker) { 
      marker.setMap(null); 
     }); 
     markers = []; 

     // For each place, get the icon, name and location. 
     var bounds = new google.maps.LatLngBounds(); 
     places.forEach(function (place) { 
      var icon = { 
       url: place.icon, 
       size: new google.maps.Size(71, 71), 
       origin: new google.maps.Point(0, 0), 
       anchor: new google.maps.Point(17, 34), 
       scaledSize: new google.maps.Size(25, 25) 
      }; 

      // Create a marker for each place. 
      markers.push(new google.maps.Marker({ 
       map: map, 
       icon: icon, 
       title: place.name, 
       position: place.geometry.location 
      })); 

      if (place.geometry.viewport) { 
       // Only geocodes have viewport. 
       bounds.union(place.geometry.viewport); 
      } else { 
       bounds.extend(place.geometry.location); 
      } 
     }); 
     map.fitBounds(bounds); 
    }); 
    // [END region_getplaces] 
} 

<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxx&libraries=places&callback=initAutocomplete" 
    async defer></script> 

Index.cshtml

 <div class="pull-right col-lg-1"> 
      <a class="btn btn-success" onclick="OpenCreatePopup()"> 
       <span class="glyphicon glyphicon-plus"></span> 
      </a> 
     </div> 

<div id="DivToAppendPartialView"></div> 


<script> 
    function OpenCreatePopup() { 
    $.ajaxSetup({ cache: false }); 
     $('#DivToAppendPartialView').load("/Account/Create", function() { 
      $('#myModal').modal({ 
       keyboard: true 
      }, 'show'); 
     }); 
     return false; 
}; 

</script> 

문제 SHO되지 모달 부트 스트랩에 Google지도를 설치하십시오.

도와주세요!

Answer 1

해결책을 찾았습니다!

.pac-container { 
    z-index: 100000; 
} 

모달 부대 작업의 Google지도!