You can make a simple JS script that will load on the page without Angular. You can initialize GMaps as follows:
var mapData; container.gmap( { 'zoomControl': true, 'zoomControlOptions': { 'style': google.maps.ZoomControlStyle.SMALL, 'position': google.maps.ControlPosition[ options.mapZoomPosition ] }, 'panControl': false, 'streetViewControl': false, 'mapTypeControl': false, 'overviewMapControl': false, 'scrollwheel': false, 'draggable': options.draggable, 'mapTypeId': google.maps.MapTypeId[ options.mapType ], 'zoom': options.mapZoom, 'styles': styles[ options.mapStyle ] }) .bind('init', function () { mapData = { container: container, map: map, options: options, addMarker: addMarker, library: library, iw: { data: infoWindowData, window: infoWindow, content: infoWindowContent, open: infoWindowOpen, close: infoWindowClose } }; }
And you can fire an event when GMaps completes initialization:
google.maps.event.addListenerOnce(map, 'idle', function () { $(document).trigger('map.init', mapData); });
And then you can catch it in Angular:
var mapData; $(document).on('map.init', function (event,data) { mapData = data; });
And then you can use it usually, for example, by scaling the scale:
mapData.map.setZoom(50);