sebholstein / angular-google-maps Goto Github PK

Firstly, many thanks for creating the "angular2-google-maps" lib.

Unless I'm missing something, there doesn't seem to be a way of setting the optional "CHANEL" parameter in LazyMapsAPILoaderConfig...is this something that could be added?

Channel is used to provide additional reporting detail, by grouping different channels separately, i.e. to make it possible to distinguish the usage under different deployment scenarios.

e.g.
bootstrap(AppComponent, [ANGULAR2_GOOGLE_MAPS_PROVIDERS, provide(LazyMapsAPILoaderConfig, { useFactory: () => { let config = new LazyMapsAPILoaderConfig(); config.chanel = "dev-application"; config.clientId = "gme-*******"; return config; } }) ]);

I really like angular2-google-maps (thx for providing).

Now I have the requirement to use google.maps.places.Autocomplete for address selection.

How can I achieve this? Of course the best way would be that angular2-google-maps provides the possibilty to use it. Otherwise which parts of angular2-google-maps can I use to load the required map parts (libraries) -> I guess LazyMapsAPILoader

After upgrading to Angular 2 Rc1 i get this error during the bootstrapping of my app:

"Uncaught Invalid provider - only instances of Provider and Type are allowed, got: [object Object]"

It is definetly from this module.

Please add the option to disable UI layer for maps (see)

It would be useful if users could specify all relevant query parameters on the sdk download link, so that it's possible to create URLs like e.g. https://maps.googleapis.com/maps/api/js?v=3.2.2&libraries=geometry,places.

I work with version 0.8.0 and found that in google-map-marker.ts it have a wrong spelling detect for longtitude value.

ngOnChanges(changes: {[key: string]: SimpleChange}) {
...
if (changes['latitude'] || changes['logitude']) {
this._markerManager.updateMarkerPosition(this);
}

It will block the map marker change when user change only the longtitude value.

Could you please fix it?

There is no Bower package. We're using Bower for all our web client dependencies, not NPM.
A Bower package would be appreciated :)

I was reviewing the code. Looks great. Noticed 2 things.

1. GoogleMapsAPIWrapper _el variable is unused
2. SebmGoogleMapMarker missing implements OnDestroy, OnChanges
3. Any reason you choose to use "rx": "4.0.7" vs. "@reactivex/rxjs": "^5.0.0-alpha.10" ?

Thank you

How to apply existing or custom map type id. I tried through setMapOptions() but with no success. Can you share an example?

I m getting following error

Uncaught (in promise) TypeError: object is not a constructor(…)

core.js:101 Uncaught TypeError: Cannot read property 'getOptional' of undefined

import {Component} from 'angular2/core';
import {ANGULAR2_GOOGLE_MAPS_DIRECTIVES, ANGULAR2_GOOGLE_MAPS_PROVIDERS} from 'angular2-google-maps/core';

@Component({
  selector: 'map',
  directives: [ANGULAR2_GOOGLE_MAPS_DIRECTIVES],
  providers: [ANGULAR2_GOOGLE_MAPS_PROVIDERS],
  template: require('./maps.html'),
  styles: [require('./maps.css')],
})
export class MapComponent {
  lat: number = 51.678418;
  lng: number = 7.809007;
}

I have added map provider to bootstrap the app.

This would be pretty useful, I'd be happy to implement it if the maintainers would consider adding this feature.

The current version 0.5.0 does not work with angular 2 beta.1.

it will be good to have a way to attach to any of the events on the google maps api... like the following

MouseUp/MouseDown -- to detect presses on map

idle - to detect zoom in/out

Thanks for a great repo. Can you say me how to use API key with angular2-google-maps.

Any way to add labels to markers like this?

Browser throws an error on console: "unexpected token <". Works fine with version 0.8.1 of angular2-google-maps.

It will be nice to be able to create custom markers....
https://developers.google.com/maps/tutorials/customizing/custom-markers

As suggested a solution could be as follows:
<sebm-google-map [latitude]="lat" [longitude]="lng" (centerChange)="centerChanged($event)" (boundsChange)="boundsChanged($event)"> </sebm-google-map>

This would allow the tracking of the current bounds and center of the map.

I am quite a noob with ng2, but after npm installing the package, adding the import was not enough - directive wasn't rendered at all.
So, I tried importing the directives ANGULAR2_GOOGLE_MAPS_DIRECTIVES and adding them in my components directives array. Got Uncaught SyntaxError: Unexpected token : error in the browser's console.
So, I tried importing the providers ANGULAR2_GOOGLE_MAPS_PROVIDERS and adding them in my component's providers array. Still same error in console.
What am I missing?
Thanks!

I have service for async data to load from json file. *ngFor does create sebm-google-map-marker for all data returened but sebm-google-map does not load newly added marker.
marker.json
{ "data" : [ { "lat": 51.673858, "lng": 7.815982, "label": "A", "draggable": true }, { "lat": 51.373858, "lng": 7.215982, "label": "B", "draggable": false }, { "lat": 51.723858, "lng": 7.895982, "label": "C", "draggable": true } ] }

service.ts

getmockStores() { return this._http.get(CONFIG.baseUrls.mockstoreSelector) .map((response: Response) => <marker[]>response.json().data) .catch(this._exceptionService.catchBadResponse) }

component.ts
` getMockMarkers(){

this.mockStores = this._storeService.getmockStores()
  .catch(e => {
    this._toastService.activate(`${e}`);
    return Observable.of();
  })

})
}`

.component.html
<sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [disableDefaultUI]="false"> <sebm-google-map-marker *ngFor="#m of mockStores" [latitude]="m.lat" [longitude]="m.lng" [label]="m.label" [markerDraggable]="m.draggable" (dragEnd)="markerDragEnd(m, $event)"> </sebm-google-map-marker> </sebm-google-map>

provide( LazyMapsAPILoaderConfig, { useFactory: () => { let config = new LazyMapsAPILoaderConfig(); config.apiKey = 'apikey'; return config; } })

LazyMapsAPILoaderConfig throws me an execption
angular2-polyfills.js:1243 Error: Cannot read property 'getOptional' of undefined(…)Zone.run @ angular2-polyfills.js:1243

I am using "angular2": "2.0.0-beta.11"
I have importedimport {provide} from 'angular2/core';

And also good work nice library

I have been already asking at chat.

Probably i am not the first one who is asking if there is a way to show location on map by passing address instead of coordinates?

Thank you for your answer.

In addition to #70, it should be possible to get notified when the postion (lat/lng) of the marker has changed.

The API should look like this:

<sebm-google-map-marker 
  [latitude]="lat" [longitude]="lng" [markerDraggable]="draggable"
  (dragEnd)="dragEnded($event)"> <!-- $event = {coords: LatLngLiteral} -->
</sebm-google-map-marker>

First of all, thanks for the awesome package.

Do you have plans to implement draggable markers soon?
I can help and contribute but not sure how much time it's gonna take.

I see that issue that when I use mouse wheel in/out the picker is not in correct position anymore. It's going to the sea

can you please fix this?

Thanks

Angular RC1 is compatible only with 5.0.0-beta6

Hello, I'm trying to work with the upgrade adapter and the package and I'm getting the following error:

 Invalid provider - only instances of Provider and Type are allowed, got: [object Object] 

Right after adding this line:

upgradeAdapter.addProvider(ANGULAR2_GOOGLE_MAPS_PROVIDERS);

Any ideas ?

Hi @SebastianM ,

I am using angular2-google-maps in ionic2/angular2 in which we need the map only in one page and it works fine too, but every consecutive visit to the same page gives me an error.

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

Please let me know if i am missing something.

Thanks

Reported by @uthark:

If I pass location 0, 0 then component breaks with the error. The issue looks like in SebmGoogleMapMarker.prototype.ngOnChanges - condition if (!this._markerAddedToManger && this.latitude && this.longitude) is evaluated to false, so MarkerManager.addMarker is not called, but the marker exists in model. So, on render phase there is an issue I posted above.

Plunker: http://plnkr.co/edit/62hA5e?p=preview

File: angular2-google-maps/src/directives/google-map-marker.ts
Line 44: inputs: ['latitude', 'longitude', 'title', 'label', 'draggable: markerDraggable', 'iconUrl'],

you have a string: 'draggable: markerDraggable'. maybe this should be just: 'draggable'?

Reported by @smartoma:

This code renders an empty map:

<sebm-google-map [latitude]="lat" [longitude]="lng">
</sebm-google-map>

I am trying to use fit to bounds and would love if this was just a flag on the sebm-google-map component.

Hi, any pointers on using https://github.com/googlemaps/js-marker-clusterer or any other marker clusterer with this? Thanks!

I was easily able to get the plugin working with my ionic2 app and found it much easier and cleaner than working on the lazy loading myself. I'm just having some issues figuring out how to get access to the Injectables provided.

After Importing directives and providers

import {
  ANGULAR2_GOOGLE_MAPS_PROVIDERS,
  ANGULAR2_GOOGLE_MAPS_DIRECTIVES
} from 'angular2-google-maps/core';

And passing them as arguments to Page

  providers: [[ANGULAR2_GOOGLE_MAPS_PROVIDERS]],
  directives: [[ANGULAR2_GOOGLE_MAPS_DIRECTIVES]],

I'm unable to figure out how to access the GoogleMapsAPIWrapper in order to setCenter(), for example. Can you provide any direction on how this is possible? I'm thinking I would need to instantiate the Injectable in my constructor and assign it to a member of this for use in other class methods, but I'm not sure how...

PS: I know this is more of an Angular2 question than an Angular2-Google-Maps question and appreciate any direction you can send me. Thanks!

Do you plan to upgrade angular2-google-maps with latest version of angular2?
(2.0.0-beta.11)

Thx

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

Was looking into this library as am interested in porting everything I have to ng2.

There's a few events that aren't yet covered and am wondering which ones you plan to target? Should we attach to all of the events on here? I'm sure they'd all eventually get requested:
https://developers.google.com/maps/documentation/javascript/3.exp/reference

I can PR some of these, but just want to know what you think about it first as you didn't do them yet so maybe have a reason for not including (performance?)

Thanks for this wonderful repo and Is there a way to get mapWrapper instance so that I can play with geocoding/reverseGeocoding in my own components.

angular2-google-maps should support Info Windows:
https://developers.google.com/maps/documentation/javascript/infowindows
https://developers.google.com/maps/documentation/javascript/3.exp/reference#InfoWindow

As a standalone component:

<sebm-google-map [latitude]="lat" [longitude]="lng">

 <sebm-google-map-info-window [latitude]="lat" [longitude]="lng" (closeClick)="windowClosed()"
    [disableAutoPan]="true" [maxWidth]="120"> 
    <h1>My Content</h1>
  </sebm-google-map-info-window>

</sebm-google-map>

And inside a marker:

<sebm-google-map [latitude]="lat" [longitude]="lng">

  <sebm-google-map-marker  [latitude]="lat" [longitude]="lng">
    <sebm-google-map-info-window> <!-- no need to set lat/lng here - gets lat/lng from the marker -->
      My Content<br />
      can be HTML
    </sebm-google-map-info-window>
  </sebm-google-map-marker>

</sebm-google-map>

Component methods:

<sebm-google-map [latitude]="lat" [longitude]="lng">


  <sebm-google-map-info-window  [latitude]="lat" [longitude]="lng" #window>
    My Content
  </sebm-google-map-info-window>

  <button (click)="window.open()">Open InfoWindow</button>
  <button (click)="window.close()">Close InfoWindow</button>
  <button (click)="window.toggle()">Toggle InfoWindow</button>

</sebm-google-map>

Build failure while I try to build with node.js version 5.2.0 , I got the following error :

d:\test\angular2-google-maps\node_modules\systemjs-builder\lib\builder.js:27
throw new Error('Unhandled promise rejection.\n' + reason && reason.stack || r
eason || '' + '\n');
^

Error: Error tracing angular2-google-maps/core at file:///d:/test/angular2-googl
e-maps/dist/core.js
Error: Unable to calculate canonical name to bundle d://\test\angular2-g
oogle-maps\node_modules\angular2\core.js
at getCanonicalNamePlain (d:\test\angular2-google-maps\node_modules\systemjs
-builder\lib\utils.js:191:13)
at getCanonicalName (d:\test\angular2-google-maps\node_modules\systemjs-buil
der\lib\utils.js:102:19)
at d:\test\angular2-google-maps\node_modules\systemjs-builder\lib\trace.js:3
73:34
at process._tickCallback (node.js:382:9)

at d:\test\angular2-google-maps\node_modules\systemjs-builder\lib\builder.js

:27:9
at Object.lib$rsvp$events$$default.trigger (d:\test\angular2-google-maps\nod
e_modules\rsvp\dist\rsvp.js:245:13)
at null._onTimeout (d:\test\angular2-google-maps\node_modules\rsvp\dist\rsvp
.js:779:47)
at Timer.listOnTimeout (timers.js:93:15)

Hi, when can we expect new release which includes changes on map wrapper?

js?v=3&callback=angular2googlemaps518:90 You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

I got above error when using this api.

There's no way to rezize the map, for example if I load map into hidden tab. In that case map will be not shown at all, it needs to be resized.

Add:

• Karma configuration
• Karma test shim
• Gulp tasks
• Basic tests

Provide a way to pass the Node element for easy customization.

Hello, I'm trying to use this library inside the Ionic2 sample app (tabs) with no success (testing in Chrome). There's obviously something I'm missing. One obvious thing missing is the bootstrap, but Ionic should bootstrap the root page on its own?
Either way, this could very well be a bug on the Ionic side, just want to make sure. Unfortunately I don't think it's possible to create codepens with Ionic2 at the moment, so here's a blob of code.

I npm'ed the library and added this import in app.js and tabs.js (the root page for the app):

import {
  ANGULAR2_GOOGLE_MAPS_PROVIDERS,
  ANGULAR2_GOOGLE_MAPS_DIRECTIVES
} from 'angular2-google-maps/core';

Created a new page:

import {
  ANGULAR2_GOOGLE_MAPS_PROVIDERS,
  ANGULAR2_GOOGLE_MAPS_DIRECTIVES
} from 'angular2-google-maps/core';

import {Page} from 'ionic/ionic';

@Page({
  templateUrl: 'build/pages/mappa/mappa.html',
  style: '.sebm-google-map-container {         height: 300px;       }',
  providers: [
    ANGULAR2_GOOGLE_MAPS_DIRECTIVES
  ]
})
export class Mappa {
  constructor {
  }

    lat: number = 44.3;
    lng: number = 33.2;
    zoom: number = 10;
}

and the template:

<ion-navbar *navbar>
  <ion-title>
    Mappa
  </ion-title>
</ion-navbar>

<ion-content class="Mappa" >
    <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom"></sebm-google-map>
</ion-content>

Thank you!

If I remove sebm-google-map-container class from index.html file and try to use in component's style then it is not working. It was working in previous version but not in 0.8.0

I tried replicate the issue on plunk, please have a look.
http://plnkr.co/edit/iPNCoiJ8tFMaDOKsvsHi?p=preview