Angular 2 and google map APIs. Manipulate a map object from a component

I am using Angular 2 and I need to work with Google Map. I need to initialize the map, create several arrays with the coordinates of the route, add a Custom HTML marker , add some event sheets, draw a polyline, etc. All of them can only do with native JS on the web page. In my work I need to use Angular2. How can I initialize a map object inside a component and manipulate it inside the component as with an object?

There is an angular2 -google-maps library, but it has limited functionality. For example, I cannot create a polyline with angular2 -google-maps , I cannot integrate some libraries, for example, Custom HTML marker , cSnapToRoute , etc.

+5
source share
1 answer

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

Source: https://habr.com/ru/post/1244724/


All Articles