I have a partial view. This partial view returns by Ajax.actionlink request. Partial View contain a google map . But map not rendering couse scripts must run when document is ready.
How to show google map in a partial view result ?
Partial View scripts :
var markers = [];
markercount = 0;
var zoom = 7;
var G = google.maps;
var map;
function initializeMap() {
var centerPoint = new G.LatLng(45.5, -100.5);
var myOptions = {
center: centerPoint,
zoom: zoom,
mapTypeId: G.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
myOptions);
addPolygon(map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
var input = (
document.getElementById('autocomplate'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
google.maps.event.addListener(map, 'click', addMarker);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setIcon(({
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(35, 35)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initializeMap);
I solved with this.
@Ajax.ActionLink(" ", "EditRestaurant", "Admin", New With {.RestID = Model(i).RestaurantID}, New AjaxOptions With {.HttpMethod = "POST",
.InsertionMode=InsertionMode.Replace,
.UpdateTargetId="edit",
.OnSuccess="map"}, New With {.Class = "glyphicon glyphicon-zoom-out"})
script
function map()
{
initializeMap();
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'load', initializeMap);
}