CODEWITHSUNDEEP
javascriptgoogle-mapsangular
Edward
Edward

Reputation: 689

Angular 2 and google maps API. Manipulate map`s object from component

I use Angular 2 and i need to work with Google Map. I need to initialize a map, create some arrays with route coordinates, add a Custom HTML Marker, add some event listerers, draw a polyline, etc. All of these a can make with just native JS on the web page. In my work i need to use Angular2. How can i init a map object inside the component and manipulate it within a component like with an object ?

There is a angular2-google-maps library, but it's have limited functionality. For example i can't create a polyline with angular2-google-maps, i can't integrate some of libraries, for example Custom HTML Marker, cSnapToRoute, etc.

Upvotes: 6

Views: 2153

Answers (1)

alexey
alexey

Reputation: 1411

You can make it simple JS script that you will load on page without Angular. You can init GMaps like this:

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 then trigger event when GMaps will finish 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 normally, setting zoom for example:

mapData.map.setZoom(50);

Upvotes: -2

Related Questions