Adalat  Khan

Adalat Khan

  • 646
  • 1.5k
  • 870k

Display Google Map in PartialView

Mar 21 2019 6:56 AM
Following is the Code of Google Map:
 
<h4>Google Map</h4>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initialize"></script>
<script type="text/javascript">
var myAddress = new google.maps.LatLng(24.466807, 54.384297);
function initialize() {
var mapOptions = {
center: myAddress,
zoom: 15,
minZoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: true,
scaleControl: true,
streetViewControl: true,
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
var marker = new google.maps.Marker({
position: myAddress,
animation: google.maps.Animation.BOUNCE,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content: "Abu Dhabi International Quality Consultancy<br/>Head Office"
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', initialize); 
</script>
 
 
I put the above Code in a PartialView Page and its name is DisplayMap.cshtml. I want to display this partial view inside my index view page using the following code:
 
<div class="row">
<div class="col-md-12">
<div id="ContentsArea">
</div>
</div>
</div>
<input type="button" id="btnSearchMap" value="Search Map" onclick="DisplaySearchedMap();" /> 
 
<script type="text/javascript">
function DisplaySearchedMap() {
var selectedValue = $("#cmbSearchCriteria :selected").text();
$.ajax({
url: "/Maps/DisplayMap",
type: "GET",
success: function (response) {
$("#ContentsArea").html(response);
},
error: function (response) {
alert("Cannot Load Map " + response.responseText);
}
});
</script 
 
 Using the above code the google map div is displayed but the google map does not display. I checked the above PartialView separately its working perfectly. When i display the PartialView page that is DisplayMap.cshtml using its url then its working but it cannot display inside the Index page using the above code. Please help me what i missed in the above code. 

Answers (3)