In my partial view, I have written JavaScript code that retrieves the Geo-location of a client.
<h1>Map</h1>
<style type="text/css">
#map-canvas {
height: 500px;
}
</style>
<script type="text/javascript"
src="http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:'sensor=false'}]}"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(37.4219985, -122.0839544);
var mapOptions = {
zoom: 12,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Provider'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
When loading this partial view through an Ajax call from another view using an action-link click, the text appears but the map does not load. However, when I directly load the view, the map is visible. Any suggestions on how to fix this issue?