asp.net-mvc-4google-maps-api-3asp.net-mvc-ajax

Google Maps Api With Asp.net MVC 4 PartialView Ajax Request


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);

Solution

  • 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);
    
            }