Карта Google Angularjs не отображается

Question

defaultLocation:function(){
                console.log('outside fuction map');
                vm.map = {center: {latitude: '28.454035292774627', longitude: '77.02379857578137' }, zoom: 12 };
                vm.options = {scrollwheel: false};
                vm.marker = {
                    id: 0,
                    coords: {
                        latitude: 28.454035292774627,
                        longitude: 77.02379857578137
                    },
                    options: { draggable: true },
                    events: {
                        dragend: function (marker, eventName, args) {
                        var lat = marker.getPosition().lat();
                        var lon = marker.getPosition().lng();
                        $log.log(lat);
                        $log.log(lon);
                        }
                    },
                    refresh: function () {
                        $scope.map.control.refresh({latitude: 28.454035292774627, longitude: 77.02379857578137}); 
                      }
                };
                console.log(vm.marker);
                
            }

#map_canvas {
    position: relative;
    height: 300px;
    width: 600px;
    margin-left: 10%;
}

<div id="map_canvas" style="border:1px red solid;">
                    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
                        <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
                        </ui-gmap-marker>
                    </ui-gmap-google-map>
                </div>

Карта не отображается с использованием этого кода.Работа состоит в том, чтобы загрузить карту и показать маркер в том же месте, прежде чем когда-нибудь все будет работать нормально, но теперь он не отображается.