6

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.

Community
  • 1
  • 1
Edward
  • 589
  • 1
  • 9
  • 18

1 Answers1

-2

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);
alexey
  • 1,381
  • 9
  • 19
  • 1
    I use Angular ver. 2 and i use components. Can you show me a piece of code how can i use a GMap object inside the component ? – Edward Mar 09 '16 at 10:16
  • You can't use it in angular without hacks. Best approach i seen is this: You need to create pure JS script and load it to page like in Google's examples. After Map will be initialized you need to fire event from this JS script and pass **mapObject** and handle it in angular using JQuery. And then use this mapObject in angular, doesnt matter 1 or 2. – alexey Mar 09 '16 at 10:21