Google Maps von Razor

Question

Wie kann ich Google Maps von einem anderen Razor bekommen?

Hallo an alle, Ich versuche, das Problem ... Google Maps Javascript in Create.cshtml zu lösen, ist das Problem in Index.cshtml.

Index Taste ruft Create.cshtml eine Modal Boostrap.

Wie erhalten Index.cshtml von einem Create.cshtml.

Modal funktioniert korrekt, aber Google Maps funktioniert nicht.

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> 

Javascript

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> 

Problem ist nicht sho Flügel Google Maps im modalen Bootstrap.

Hilf mir!

Answer 1

Ich habe eine Lösung gefunden!

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

Google Maps in Modal-Boostrap Arbeit!