ng2-ui / map Goto Github PK

View Code? Open in Web Editor NEW

260.0 260.0 98.0 10.22 MB

Angular Google Maps Directives

Home Page: https://ng2-ui.github.io/map

TypeScript 95.87% HTML 1.94% JavaScript 2.02% CSS 0.18%

angular google-maps ng-map

map's People

Contributors

Stargazers

Watchers

Forkers

antoniocasino gitter-badger hamac aitboudad edneyego tcigrand ndcunningham sbnet-ch pimschaaf riltsken avinash-gupta-b matvey-kazakov pk-codebox-evo jeffersonbraga kafkaforks ro- caerulea-rosa uzumakinaruto123 marrypen harendranathvegi9 omugno day01 marryyuer achint08 iamtheiam demus anphamhoai133 movebe jeffleeismyhero ravivit9 ramrealpage dexterns88 ubbop42 vbabiy saximoer3 shubham-k7 infoskillstechnology skbhati199 cosmin-dumitrache sweetcat2 bamoha 4barz masanggil1986 iomarsantos tierninho nocopy ghgithub floofydoug ball6847 rk-forfuns nicholasalx joseverdugo justmelnyc sudarshanch liazidiamine avenuapp mdl aron4u ianmadlenya biggillystyle alblanc bhanuhiteshi miladhamzelou krishnasdb ddatwani wahabshah23 santam85 ray-kay cristian15 w3ss solertis jeffkuletz31 drano techieinme kumaran-is g-schmitz grzegorz-skowronski qkevinto remypanne sidney1980 cuiwenting anujm4467 filipecostas lilbomeep cohelion viooh jamainrex pcgdev das-peregrine jarbitlira haytastan samkenxstream digimatweb nithyasrisoundarajan mostafahk

map's Issues

Polyline directive / GroundOverlay Directive

new directive development

panel is not working

Unable to append directionsResult to the panel.

https://rawgit.com/ng2-ui/ng2-map/master/app/index.html#/directions-renderer

<ng2-map [hidden]="!checked" zoom="13" [center]="origin">
<marker *ngFor="let pos of positions" [position]="pos">
<directions-renderer
[suppressMarkers]="true"
[draggable]="true"
(directions_changed)="directionsChanged()"
[directions-request]="direction"
[panel]="directions-panel">
</directions-renderer>
</ng2-map>
<button (click)="positions = showRandomMarkers()">Show Random Markers
<button (click)="positions = showDirection()">ShowDirections Markers
<br/>
<div [hidden]="!checked" id="directions-panel" style="width: 28%; float:left; height: 450px; overflow: auto; padding: 0px 5px"></div>

If possible please provide any plunker example with panel using direction renderer.

How to include this module into Webpack

More question than the issue, but I'd appreciate if you an post some code how to make this work with webpack when you grab a second.
I'm trying to make it work with universal-starter here: https://github.com/angular/universal-starter/blob/master/webpack.config.js

My Component:

import { Component, OnInit } from '@angular/core';
import { NG2_MAP_DIRECTIVES, Ng2MapComponent } from "ng2-map";  // <--- this

@Component({
  selector: 'map',
  templateUrl: 'map.template.html',
  directives: [ NG2_MAP_DIRECTIVES ]
})
export class Map {
  constructor(){
    Ng2MapComponent.apiUrl = "https://maps.google.com/maps/api/js?key=YOUR_KEY";
  }
}

Console output:

ERROR in ./~/ng2-map/dist/components/ng2-map.component.ts
(157,31): error TS2304: Cannot find name 'google'.
ERROR in ./src/app/partials/map/map.component.ts
(21,21): error TS2339: Property 'apiUrl' does not exist on type 'typeof Ng2MapComponent'.

Thanks

Using NG2 library show all console logs in the console.

Using NG2 library show all console logs in console.
How I can disable this console.log for production mode?

Thanks in advance!

Circle, polygon directives break SVG template rendering

If you happen to use SVG into one of your other components it won't work.

Suggestion: ng2-map directives should be renamed to not collide with the SVG reserved elements.

Upgrade webpack from 1.* to 2.*

Webpack version 2 has very significant changes, and configuration is not backward compatible
https://blog.madewithenvy.com/getting-started-with-webpack-2-ed2b86c68783#.3tv0tylgk

We need to upgrade to webpack 2.* and rebuild our webpack.config.js

Add tests

support AOT compiler

<custom-marker> still not work in NG2.

still not work in NG2.
There are some alternative now that work similar?

Thanks in advance

Custom API URL Through Ng2Map Service

Google Changed its policy.
We need to support API_KEY in url as well as any other options.

http://googlegeodevelopers.blogspot.ca/2016/06/building-for-scale-updates-to-google.html

We no longer support keyless access (any request that doesn't include an API key). Future product updates are only available for requests made with an API key. API keys allow us to contact developers when required and help us identify misbehaving implementations.

Create layers directives

HeatMapLayer
KmlLayer
TrafficLayer
TransitLayer
BicyclingLayer

How render InfoWindow for each markers?

main.html

<ng2-map [options]="mapOptions" class="map" [ngClass]="{mapOffsetLeft: isMap}">
                <marker *ngFor='let cardMapObj of (cardsMap | cards:filter:{category:selectedCategory,searchValue:searchValue,favorite:isFavorite,mapZoom:mapOptions.zoom}); let cardMapIndex = index' position="{{cardMapObj.latitude}}, {{cardMapObj.longitude}}" [icon]="cardMapObj.iconUrl"
                    [clickable]="true" (click)="openWindow($event, cardMapObj)">
                </marker>
                <info-window *ngFor='let cardMapObj of (cardsMap | cards:filter:{category:selectedCategory,searchValue:searchValue,favorite:isFavorite,mapZoom:mapOptions.zoom}); let cardMapIndex = index' id="{{cardMapObj.infoWindowId}}" [disableAutoPan]="true" position="{{cardMapObj.latitude}}, {{cardMapObj.longitude}}">
                    <card-map *ngIf="cardMapObj.mapIsOpen" [cardMap]="cardMapObj"></card-map>
                </info-window>
                <marker *ngIf="userPosition.latitude && userPosition.longitude" position="{{userPosition.latitude}}, {{userPosition.longitude}}" [icon]="'./assets/icon/currentPosition.png'" [clickable]="false"></marker>
</ng2-map>

main.ts

openWindow(marker, card: IDotOverview) {
        marker.ng2MapComponent.openInfoWindow(card.infoWindowId, marker, {
            lat: marker.getPosition().lat(), lng: marker.getPosition().lng(),
        });
   }

I need open and close InfoWindow for each marker, but I have error when I click on marker:

Uncaught ViewWrappedError_nativeError: Error: Error in ./MainComponent class MainComponent - inline template:77:39 caused by: Cannot read property 'open' of undefined
    at ViewWrappedError.BaseError [as constructor] (http://localhost:3000/vendor.55bdba72feab739fdb5a.bundle.js:32042:34)
    at ViewWrappedError.WrappedError [as constructor] (http://localhost:3000/vendor.55bdba72feab739fdb5a.bundle.js:32071:16)
    at new ViewWrappedError (http://localhost:3000/vendor.55bdba72feab739fdb5a.bundle.js:33391:16)
    at _View_MainComponent14.DebugAppView._rethrowWithContext (http://localhost:3000/vendor.55bdba72feab739fdb5a.bundle.js:34277:23)
    at http://localhost:3000/vendor.55bdba72feab739fdb5a.bundle.js:34290:23
    at SafeSubscriber.schedulerFn [as _next] (http://localhost:3000/vendor.55bdba72feab739fdb5a.bundle.js:31616:54)
    at SafeSubscriber.__tryOrUnsub (http://localhost:3000/vendor.55bdba72feab739fdb5a.bundle.js:57657:16)
    at SafeSubscriber.next (http://localhost:3000/vendor.55bdba72feab739fdb5a.bundle.js:57606:22)
    at Subscriber._next (http://localhost:3000/vendor.55bdba72feab739fdb5a.bundle.js:57559:26)
    at Subscriber.next (http://localhost:3000/vendor.55bdba72feab739fdb5a.bundle.js:57523:18)
    at EventEmitter.Subject.next (http://localhost:3000/vendor.55bdba72feab739fdb5a.bundle.js:57275:25)
    at EventEmitter.emit (http://localhost:3000/vendor.55bdba72feab739fdb5a.bundle.js:31595:76)
    at _.ye.<anonymous> (http://localhost:3000/main.d4e2412af518d8f208dd.bundle.js:16764:39)
    at Object._.z.trigger (https://maps.google.com/maps/api/js?key=AIzaSyCbL41DcvcfuSIwH2R9PmGnw30i48RZvDU&callback=initNg2Map:98:121)
    at VT.handleEvent (https://maps.google.com/maps-api-v3/api/js/27/5/marker.js:49:458)
    at _.tf.Jd (https://maps.google.com/maps-api-v3/api/js/27/5/common.js:189:417)
    at _.Nv._.k.re (https://maps.google.com/maps-api-v3/api/js/27/5/common.js:239:205)
    at _.Nv._.k.Xi (https://maps.google.com/maps-api-v3/api/js/27/5/common.js:238:246)
    at Object._.z.trigger (https://maps.google.com/maps/api/js?key=AIzaSyCbL41DcvcfuSIwH2R9PmGnw30i48RZvDU&callback=initNg2Map:98:121)
    at Pt.<anonymous> (https://maps.google.com/maps-api-v3/api/js/27/5/common.js:138:342)
    at Object._.z.trigger (https://maps.google.com/maps/api/js?key=AIzaSyCbL41DcvcfuSIwH2R9PmGnw30i48RZvDU&callback=initNg2Map:98:121)
    at Pt._.k.kj (https://maps.google.com/maps-api-v3/api/js/27/5/common.js:211:446)
    at HTMLDivElement.<anonymous> (https://maps.google.com/maps/api/js?key=AIzaSyCbL41DcvcfuSIwH2R9PmGnw30i48RZvDU&callback=initNg2Map:38:388)
    at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.999d504e4ad7b5f4a856.bundle.js:15370:38)
    at Zone.runTask (http://localhost:3000/polyfills.999d504e4ad7b5f4a856.bundle.js:15270:48)
    at HTMLDivElement.ZoneTask.invoke (http://localhost:3000/polyfills.999d504e4ad7b5f4a856.bundle.js:15438:34)context: DebugContext_nodeIndex: 0_staticNodeInfo: (...)_tplCol: 39_tplRow: 77_view: _View_MainComponent14component: (...)componentRenderElement: (...)context: (...)injector: (...)providerTokens: (...)references: (...)renderNode: (...)source: (...)__proto__: Objectmessage: (...)name: (...)originalError: TypeError: Cannot read property 'open' of undefined
    at Ng2MapComponent.openInfoWindow (http://localhost:3000/main.d4e2412af518d8f208dd.bundle.js:15706:29)
    at MainComponent.openWindow (http://localhost:3000/main.d4e2412af518d8f208dd.bundle.js:34142:32)
    at _View_MainComponent14._handle_click_0_0 (MainComponent.ngfactory.js:1916:35)
    at http://localhost:3000/vendor.55bdba72feab739fdb5a.bundle.js:34287:24
    at SafeSubscriber.schedulerFn [as _next] (http://localhost:3000/vendor.55bdba72feab739fdb5a.bundle.js:31616:54)
    at SafeSubscriber.__tryOrUnsub (http://localhost:3000/vendor.55bdba72feab739fdb5a.bundle.js:57657:16)
    at SafeSubscriber.next (http://localhost:3000/vendor.55bdba72feab739fdb5a.bundle.js:57606:22)
    at Subscriber._next (http://localhost:3000/vendor.55bdba72feab739fdb5a.bundle.js:57559:26)
    at Subscriber.next (http://localhost:3000/vendor.55bdba72feab739fdb5a.bundle.js:57523:18)
    at EventEmitter.Subject.next (http://localhost:3000/vendor.55bdba72feab739fdb5a.bundle.js:57275:25)
    at EventEmitter.emit (http://localhost:3000/vendor.55bdba72feab739fdb5a.bundle.js:31595:76)
    at _.ye.<anonymous> (http://localhost:3000/main.d4e2412af518d8f208dd.bundle.js:16764:39)
    at Object._.z.trigger (https://maps.google.com/maps/api/js?key=AIzaSyCbL41DcvcfuSIwH2R9PmGnw30i48RZvDU&callback=initNg2Map:98:121)
    at VT.handleEvent (https://maps.google.com/maps-api-v3/api/js/27/5/marker.js:49:458)
    at _.tf.Jd (https://maps.google.com/maps-api-v3/api/js/27/5/common.js:189:417)
    at _.Nv._.k.re (https://maps.google.com/maps-api-v3/api/js/27/5/common.js:239:205)
    at _.Nv._.k.Xi (https://maps.google.com/maps-api-v3/api/js/27/5/common.js:238:246)
    at Object._.z.trigger (https://maps.google.com/maps/api/js?key=AIzaSyCbL41DcvcfuSIwH2R9PmGnw30i48RZvDU&callback=initNg2Map:98:121)
    at Pt.<anonymous> (https://maps.google.com/maps-api-v3/api/js/27/5/common.js:138:342)
    at Object._.z.trigger (https://maps.google.com/maps/api/js?key=AIzaSyCbL41DcvcfuSIwH2R9PmGnw30i48RZvDU&callback=initNg2Map:98:121)
    at Pt._.k.kj (https://maps.google.com/maps-api-v3/api/js/27/5/common.js:211:446)
    at HTMLDivElement.<anonymous> (https://maps.google.com/maps/api/js?key=AIzaSyCbL41DcvcfuSIwH2R9PmGnw30i48RZvDU&callback=initNg2Map:38:388)
    at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.999d504e4ad7b5f4a856.bundle.js:15370:38)
    at Zone.runTask (http://localhost:3000/polyfills.999d504e4ad7b5f4a856.bundle.js:15270:48)
    at HTMLDivElement.ZoneTask.invoke (http://localhost:3000/polyfills.999d504e4ad7b5f4a856.bundle.js:15438:34)stack: (...)__proto__: WrappedError
Zone.runTask @ zone.js:269
ZoneTask.invoke @ zone.js:433

and I have errors when loading map:

An InfoWindow must have an id. e.g. id="detail"

map events not firing

The events from map are not fired.
I guess because the L21 of services/ng2-map.ts has a bug. The eventName contains the prefix 'map_' but the events of gm are not named with this prefix.
When I change the name of e.g. 'map_click' to 'click' in debugger it works.

Multiple maps in a single page shows the last map only

Marker issue

Hi ,
Please help me to load marker values from API, i tried to load from local which working fine but when i try with server data which is not working , Provide me the sample code for get marker values form API

scrollwheel="false" not working

Cannot read property 'getPlace' of undefined due to failure to initialize

I'm getting errors with the autocomplete and directions renderer directives. It seems as though the component's initialize event is not firing. I've included an autocomplete example below. Typing in the field produces the autocomplete dropdown as expected but when an address is selected (placeChanged function), an error appears in the console stating that autocomplete is not defined. As for the directions component, everything works but I am unable to return the directionsResult, which is also passed with an EventEmitter.

EXAMPLE:

import { OnInit, Component, EventEmitter, ChangeDetectorRef } from '@angular/core';
@Component({
  selector: 'my-form',
  template: '<form *ngIf="active">
  <input places-auto-complete (initialized$)="initialized($event)" (place_changed)="placeChanged(place)" [types]="['geocode']" />
</form>'
})
export class MyFormComponent {
  active: boolean = false;
  autocomplete: google.maps.places.Autocomplete;
  address: any = {};
  constructor(private ref: ChangeDetectorRef) { }
  initialized(autocomplete: any) {
    this.autocomplete = autocomplete;
  }
  placeChanged() {
    let place = this.autocomplete.getPlace();
    for (var i = 0 ; i < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      this.address[addresType] = place.address_components[i].long_name;
    }
    this.ref.detectChanges();
  }
}

Cannot load ng2-map

Hi guys,

I'm installed ng2-map and config in systemjs.config.js file, but cannot run app. I get a issue: XHR error (404 Not Found) loading http://localhost:3000/node_modules/ng2-map/dist.js. Please help me to config.

Thank you so much!

mapIdle events not working

There is a missing comma at the end of line on https://github.com/ng2-ui/ng2-map/blob/master/src/components/ng2-map.component.ts#L28 which prevents mapIdle and mapMaptypeid_changed from working.

DrawingManager Access

I have integrated your code into my app and it is working quite well. I certainly appreciate your time and instructions.

I am new to ng2 and TypeScript and my use case requires that I utilize the DrawingManager.

I have most of the DrawingMgr features I am looking for working in a simple html page and js but wanted to bring it into my ng2 app. Do you any code examples or snippets on how to 'instantiate' a DrawingManager and use it to subscribe the manager's events within your module?

e.g. ->

drawingManager = new google.maps.drawing.DrawingManager({
          drawingMode: null,
          drawingControl: false, 
          drawingControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_CENTER,
            drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
          },
          markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
    	});
    	drawingManager.setMap(map);

and

google.maps.event.addListener(drawingManager, 'polygoncomplete', function(poly) {
		 	drawingManager.setDrawingMode(null);
  			poly.setEditable(true);
  			poly.setDraggable(true);
  			poly.addListener("dragend", polygonDragged);
  			google.maps.event.addListener(poly.getPath(), "insert_at", polygonPathChanged);
  			google.maps.event.addListener(poly.getPath(), "remove_at", polygonPathChanged);
  			google.maps.event.addListener(poly.getPath(), "set_at", polygonPathChanged);
  			describePolygon(poly);
		});

Thanks, in advance, for your time.

John
ps - sorry if the issues page was not the correct place to ask this question - please advise

Use webpack for demo app

Cannot use Google charts with ng2-map

there are several checks for google, not google.maps (I've found 3)
https://github.com/ng2-ui/ng2-map/blob/master/src/components/ng2-map.component.ts#L76
https://github.com/ng2-ui/ng2-map/blob/master/src/components/ng2-map.component.ts#L101
https://github.com/ng2-ui/ng2-map/blob/master/src/directives/places-auto-complete.ts#L25

Because of that if I load google charts api
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
ng2-map is not properly initialized and throws exceptions. When I've fixed those, it worked for me.

Error when using Places and Maps

I have a component where i use a map and a input-field for places.

<ng2-map [center]="addressForMap">

If the places-input is before the map, the places-field is loaded, but not the map.
If the map is before the places-input, the map is loaded.

But in both cases I can not use both compinents

Use yarn

https://yarnpkg.com/

Is it possible to adapt this into an isomorphic module?

I'm running Angular2 with Angular Universal. I'm running into issues because window is not defined. I haven't looked at the code yet but is it possible adapt the code to remove such dependencies? And is it something you'd want to work toward in the future?

Webpack Debugging Issue With Typescript Source Code

It is very hard to debug with webpack, and I do not see any sourcemap from ts to js. All I see is '.js' files with webpack, which is not useful when we develop.

However, it's ok with systemjs. I had to put back systemjs.config.js and debug.html for proper debugging.

What am I missing webpack with typescript sourcemap?

Production ready?

Hello!

Loved this module with Angular 1.x! Thanks so much for converting this for Angular 2. Is this module production ready or still beta? I didn't see any notes in the read me so I was just curious.

thanks!

Usage for marker icon options

I was able to change marker icon as below :-

<marker icon="assets/img/custommarker.png" [position]="currentLocation">

But , how can I scale it to required size ? I mean , how to use icon options like size,scaledSize ?

Not yet possible ?

Thanks !

marker does not initialize when running with AoT

Hi, I have been looking at this issue I have been experiencing for some time now, thinking it may have been a problem with my code, which is still very possible, but I thought I might reach out here for possible help/extra knowledge on the idea.

Everything works fine when running a normal development server inside a project created by the ng-cli. However it appears when running the server using AoT compilation, Marker elements do not get initialized correctly within components and therefore are not rendered properly on the app ui. The first screenshot below was taken when running my project with ng serve, it is possible to see in the console that a statement is logged by the base-map-directive.js when the Marker is initialized, and then I log the Marker object from within my map-modal component after subscribing to its initialized$ observable.

However, when running the app using ng serve --aot, it is possible to see from the next screenshot that the initialization statement is never logged to the console by base-map-directive.js, and the statement logged from my component's subscription to the initialized$ observable is not logged as well:

I am not too sure why this could be happening, I thought that I understood the documentation and created the map and marker correctly, but I could have done something wrong.

The html template code for the map and marker:

<ng2-map zoom="15" [center]="location.location">
   <marker [position]="location.location" animation="DROP"></marker>
</ng2-map>

map-modal.component.ts:

@Input() location: {name: string, location: google.maps.LatLngLiteral};
@ViewChild(Ng2MapComponent) ng2Map: Ng2MapComponent;
@ViewChild(Marker) ng2Marker: Marker;
map: google.maps.Map;

....

  ngOnInit() {
    this.ng2Map.mapReady$.subscribe(map => {
      this.map = map;
      this.center = this.map.getCenter();
      google.maps.event.trigger(map, 'resize');
      this.map.setCenter(this.center);
      this.directionsService = new google.maps.DirectionsService();
      this.directionsDisplay = new google.maps.DirectionsRenderer({map});
      this.directionsDisplay.setPanel(this.document.getElementById('steps-panel'));
      this.initialized = true;
    });
    this.ng2Marker.initialized$.subscribe(marker => {
      console.log(marker);
    });
  };

any help or info would be greatly appreciated, i would really love to get this working with AoT, and the Marker on the map is definitely important to the user experience

Create BaseMapDirective

The following code is repeating for every object. It's better to make one BaseMapObject and inherit from there. We all know that inheritance is evil. Unless we found a better option, we use it for now.

export class XXXXX implements OnInit, OnChanges, OnDestroy {
  private xxxxx: google.maps.XXXXX;
  private options: google.maps.XXXXXOptions = <google.maps.XXXXXOptions>{};

  private inputChanges$ = new Subject();

  constructor(
    public ng2Map: Ng2Map,
    private optionBuilder: OptionBuilder
  ) {
    OUTPUTS.forEach(output => this[output] = new EventEmitter());
  }

  ngOnInit() {
    if (this.ng2Map.map) { // map is ready already
      this.initialize(this.ng2Map.map);
    } else {
      this.ng2Map.mapReady$.subscribe(map => this.initialize(map));
    }
  }

  ngOnChanges(changes: {[key: string]: SimpleChange}) {
    this.inputChanges$.next(changes);
  }

  // called when map is ready
  initialize(map: google.maps.Map): void {
    this.options = this.optionBuilder.googlizeAllInputs(INPUTS, this);
    console.log('Polygon initialization options', this.options.paths);

    //noinspection TypeScriptUnresolvedFunction
    this.xxxxx = new google.maps.Polygon(Object.assign({}, this.options, {map: map}));
    this.xxxxx['mapObjectName'] = this.constructor['name'];

    // set google events listeners and emits to this outputs listeners
    this.ng2Map.setObjectEvents(OUTPUTS, this, 'xxxxxx');

    // update pologon when input changes
    this.inputChanges$.subscribe((changes: SimpleChange) => {
      console.log('xxxxx options are changed', changes);
      this.ng2Map.updateGoogleObject(this.xxxxxx, changes);
    });
  }

  ngOnDestroy() {
    if (this.xxxxx) {
      OUTPUTS.forEach(output => google.maps.event.clearListeners(this.xxxxx, output));
      delete this.xxxxx.setMap(null);
      delete this.xxxxx;
    }
  }
}

Also make this to take two parameters instead of three using this.xxxxx['mapObjectName']

Befpre: this.ng2Map.setObjectEvents(OUTPUTS, this, 'xxxxxx');
After: this.ng2Map.setObjectEvents(OUTPUTS, this.xxxxxx);

Cannot read property 'initialized$' of undefined

Hello, I want to access my Polygon's properties to make a .getPaths(); on it and did it like this :

HTML :

<ng2-map [options]="allOptions" class="horizontal-map">
                        <polygon [editable]="editGeoLocation"
                        [paths]="paths"></polygon></ng2-map>

JavaScript :

     @ViewChild(Polygon) polygon: Polygon
     public polygonObject: google.maps.Polygon
     ngOnInit() {
         this.polygon.initialized$.subscribe(poly => {
             this.polygonObject = poly
             console.log(this.polygonObject)
         })
     }

But I get a Cannot read property 'initialized$' of undefined error.

To make sure, I also tried doing the example How to get instance of a map in the readme file, it says the same but indeed with mapReady$.

Has anyone an idea?

Allow `[options]` for all attributes

if [options] is given, all other inputs are ignored or error out.
if [options] is changed, run setOptions to apply changes.
The following object should apply these changes
- ng2-map
- circle
- polygon
- marker
- info-window

initialized$ as an output

Hi, great work overall - thank you :)

I wanted to ask if you would consider annotating the initialized$ (and maybe also other emitters?) as outputs, so that they can be subscribed to within a template.

This would enable the use of ngIf on components and make it also possible to avoid the ViewChild within one's component.

Thank you! :)

how to access polygon point value(latitude and longitude )

I use ng2-map polygon example.I want to draw shape file using this example I want to access every polygon point values(latitude and longitude) like a ng2-map info-window example.How can I do that?

Thanks.

Custom markers do not stay in position when zooming in and out

Custom markers won't stay on their corresponding location when zooming in and out i can see the setposition function is called when the map is zoomed in and out but for some reasons the markers all end in wrong locations.

EDIT: Just noticed that this happens when using the string format for position eg: '80.25, -65.23'. Using the array format eg: [80.25, -65.23] doest not trigger any strange behaviour when zooming in and out.

Add Polygon Directive

. Complete this example https://developers.google.com/maps/documentation/javascript/examples/polygon-hole

. Polygon class
https://developers.google.com/maps/documentation/javascript/reference#Polygon
. Polygon options
https://developers.google.com/maps/documentation/javascript/reference#PolygonOptions
. Polygon events
. Complete this example https://developers.google.com/maps/documentation/javascript/examples/polygon-hole

Events
'click', 'dblclick', 'drag', 'dragend', 'dragstart', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', rightclick'

Options
'clickable', 'draggable', 'editable', 'fillColor', 'fillOpacity', 'geodesic', 'map', 'paths', 'strokeColor', 'strokeOpacity', 'strokePosition', 'strokeWeight', 'visible', 'zIndex'

Default apiUrl For Packaging for ng2-ui

@aitboudad

Shouldn't we have a default apiUrl. e.g. https://maps.google.com/maps/api/js?
So that, some websites, they don't have to do anything because they don't need an api key.

Related code:

import { Ng2MapModule } from 'ng2-map'; // <-- This can be ommitted
...
NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    APP_ROUTER_PROVIDERS,
    Ng2MapModule.forRoot({  // <-- This can be ommitted
      apiUrl: 'https://maps.google.com/maps/api/js?key=AIzaSyCbMGRUwcqKjlYX4h4-P6t-xcDryRYLmCM' // <-- This can be ommitted
    }),
    Ng2UtilsModule ],
  declarations: [AppComponent, APP_ROUTER_COMPONENTS],
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy },
  ],
  bootstrap: [ AppComponent ],
})

Advantage for having a default apiUrl is that when you have an old url and you only need a simple map, the configuration gets a lot easier.

Cannot find type definition file for 'googlemaps'

I have just followed the installation guide to include ng2-map to my angular2 typescript project. However, I am running into an issue :

modules\main\webjars\ng2-map\dist\components\info-window.d.ts:0: TS2688 Cannot find type definition file for 'googlemaps'.
/// <reference types="googlemaps" />

this error appears for all the files containing
/// <reference types="googlemaps" />

as first line. Anything I should do to get rid of this error ?

Property 'backgroundColor' does not exist on type 'Ng2MapComponent'

serve is working, but build is giving error
I am using ionic .rc4

cannot npm install under windows 7

Hi,

first I had to install 'win-node-env' cos NODE_ENV was not recognized as a standard command
but yet I get this error doing 'npm start'


D:\WORK\ANGULAR\ng2-map-master>npm start

> [email protected] start D:\WORK\ANGULAR\ng2-map-master
> NODE_ENV=dev node node_modules/.bin/webpack-dashboard --title ng2-map -- node_modules/.bin/webpack-dev-server --quiet --port 9001 --content-base app --config app/webpack.config --open

D:\WORK\ANGULAR\ng2-map-master\node_modules\.bin\webpack-dashboard:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^
SyntaxError: missing ) after argument list
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

also sed is a linux command so I guess your project cannot be started under windows

Can't build package

Trying to fix issue #9, I could not get the project to build.

I tried:

npm install
npm run build

But I get the following errors:

ERROR in ./src/components/info-window.ts
(34,22): error TS2503: Cannot find namespace 'google'.
ERROR in ./src/components/info-window.ts
(35,19): error TS2503: Cannot find namespace 'google'.
ERROR in ./src/components/info-window.ts
(50,45): error TS2503: Cannot find namespace 'google'.
...
...

"npm run build:ts" works but "npm run build:umd" gives the previous errors

I am totally new to npm/webpack. Am I missing something?

Thanks

SyntaxError: missing ) after argument list

When I am trying to run using npm start in win10 it gives me this

\ng2-map\node_modules\.bin\webpack-dashboard:2 
 basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
      ^^^^^^^
SyntaxError: missing ) after argument list
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:528:28)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.runMain (module.js:590:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

Is there anything that i am missing?

Lots of console.log calls

I think the number of console.log calls should be cut down.

If there are console.log calls that should stay, I was thinking of a couple options and wanted to get your feedback on what you all thought was best for this project.

Check if angular is running in dev mode before logging to the console.
It looks like this function could be used to do that.
Create a dev mode specific to this project and default it to false to hide them for the majority of users.

Thanks a lot!

Keep it up Allen
Awesome stuff 👍
Thanks!!!

How to get latitude and longitude on mouse click event

How to access latitude and longitude on mouse click event.I tried Simple InfoWindow example it's working but in that example there is no way defined how to access latitude and longitude without marker.

Configure Google API key through Ng2MapeModule

@NgModule({
  imports: [
    Ng2MapModule.forRoot({ apiUrl: '...' })
  ],
})
export class AppModule { }

For example , the following location will fail and map won't load. having property like [fallback]="someObviousLocation" will help.

<ng2-map style="border:1px solid black;width:50%;height:20vh" zoom="13" center="41 WEST PUTNAM AVE. THIRD FLOOR GREENWICH, CT 06830 U.S.A" scrollwheel="false">
    <marker position="41 WEST PUTNAM AVE. THIRD FLOOR GREENWICH, CT 06830 U.S.A" (click)="onMarkerClick($event)"></marker>
  </ng2-map>

Thanks !

ng2-ui / map Goto Github PK

map's People

Contributors

Stargazers

Watchers

Forkers

map's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs