Angular-google-maps: Access to full google.maps object

Created on 10 Mar 2016 · 8Comments · Source: SebastianM/angular-google-maps

Hi, loving your work so far, but am curious, will this library ever grant access to the full google.maps object, similar to angular1's implementation of google-maps? (see here: http://angular-ui.github.io/angular-google-maps/#!/api/GoogleMapApi)

Getting the google.maps object lets you create, for example...

A1 code to create new DirectionsRenderer and DirectionsService:

            uiGmapGoogleMapApi.then(function(maps) {
                vm.gmaps = maps;
                vm.map.directionsDisplay = new vm.gmaps.DirectionsRenderer();
                vm.map.directionsService = new vm.gmaps.DirectionsService();
            });

Or to create a new LatLng object:

var latlng = new vm.gmaps.LatLng(lat, lng);

Is this going to be possible with this library?

EDIT: I do see that the google object is available globally.. so we can do var latlng = new google.maps.LatLng(lat,lng); However, isn't it one goals of the project to prevent the google object from polluting the global namespace?

EDIT to EDIT: Also see now we can use LatLngLiteral interface, so that deals with one problem:

import {LatLngLiteral} from 'angular2-google-maps/core';

...

var latlng = <LatLngLiteral>{lat: this.latitude, lng: this.longitude};
this.map.setCenter(latlng);

stale discussion / question

Source

cviccaro

👍1

Most helpful comment

If I'm understanding everything here correctly, wouldn't the most angular way of handling this be to have a service that returns the global object? This would enable mocking for testing and avoid global dependencies.

cthrax on 23 Mar 2016

👍9

All 8 comments

Hi cviccaro,

Please refer below mentioned comment to get access of google.maps object.

https://github.com/SebastianM/angular2-google-maps/issues/139#issuecomment-187343516

parmod-arora on 10 Mar 2016

@parmod-arora,

Thanks. I've managed to get the map object, but I was referring to the whole SDK's API. The DirectionsRenderer and DirectionsService are not located on the map object itself, but on the google.maps namespace.

In rethinking this, however, I imagine direct access to the full google.maps namespace won't be available by design, but instead wrappers around each will be available later down the line.

cviccaro on 10 Mar 2016

@cviccaro,

Correct me if I am wrong, You want to access google.maps and want to play with DirectionsRenderer and DirectionsService services.

Below is the code.

declare var google: any;

@Directive({
  selector: 'my-comp',  // <home></home>
})
export class MyComp {
  constructor(private _mapsWrapper:GoogleMapsAPIWrapper){
    _mapsWrapper.getMap().then((m: mapTypes.GoogleMap) => {
      console.log(google.maps);
    });
  }
}

parmod-arora on 11 Mar 2016

@parmod-arora Exactly. As I wrote in my edit to the original post, I see that the global google object is indeed available, so my question has deviated a bit I guess. Will this project eventually remove the google object from the global namespace, providing a module to import to initialize a DirectionsRenderer or DirectionsService?

cviccaro on 11 Mar 2016

Will this project eventually remove the google object from the global namespace

No, this is not a goal for the project. It shoud provide an easy to use abstraction layer for angular2/google maps. We can think about how we use certain services of the google maps API like DirectionsRenderer or DirectionsService. I let this open to discuss how a good API for Angular 2 could look like

SebastianM on 22 Mar 2016

cthrax on 23 Mar 2016

👍9

Hi @cviccaro you mentioned you got the google.maps object working, could you show me how you did that? Was it via the GoogleMapsAPIWrapper?

RedFour on 1 Oct 2016

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.