来自Razor的Google地图

如何从其他Razor获取Google地图？来自Razor的Google地图

大家好，我试图解决这个问题... Google Maps Javascript在Create.cshtml中，问题出在Index.cshtml。

索引按钮调用Create.cshtml模态Boostrap。

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>

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

问题不笑使用modal Bootstrap实现Google地图。

帮帮我！

来源

2016-07-27 Matheus Miranda

我找到了解决方案！

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

Google Maps in modal boostrap work！

来源

2016-07-28 04:26:13

来自Razor的Google地图

回答

相关问题