TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Adalat Khan
651
1.5k
866.1k
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.
Reply
Answers (
3
)
AES 128 -bit Encryption-Decryption in C#
Not working my Sweet Alert