Stack Overflow
Stack Overflow

Questions tagged [angular-google-maps]

Angular Google Maps is an Angular component library for integrating Google Maps, including their various APIs. As Angular1/AngularJS has sunsetted, this tag is now for Angular 2+

AGM is a component library for including google maps in your Angular application. All usage problems with this library can and should be tagged with this tag. If it's an obvious bug, or a feature request, it belongs in our github issues.

AGM provides several Components and Directives representing some of the most widely used Google Maps Objects. Here are some of them:

  • <agm-map> represents the actual map
  • <agm-marker> represents a marker on the map
  • <agm-polyline> represents a polyline

Full documentation is available on our website, angular-maps.com. See also github project page

531 questions
25
votes
7 answers

Is there a way to set the bounds and Zoom level in AGM Map?

I am using AGM maps for my angular 4 application, there I am facing issues, I will be having the multiple markers which are fetched from api as an array of Latitude and Longitude. I want to set the zoom level exactly covering all the markers on the…
Thilak Raj
  • 880
  • 3
  • 10
  • 25
22
votes
4 answers

Can't bind to 'latitude' since it isn't a known property of 'agm-map'

I'm trying to add AGM Angular Google Maps (https://github.com/SebastianM/angular-google-maps) to my Angular4 Project Guide followed: https://github.com/SebastianM/angular-google-maps/blob/master/docs/getting-started.jade The error I get when I visit…
David Hawkins
  • 1,049
  • 1
  • 10
  • 30
21
votes
11 answers

Namespace 'google.maps' has no exported member 'MouseEvent'

I wanted to integrate Google Maps with my Angular project. In the pilot version, I was just following this link https://angular-maps.com/guides/getting-started/. Currently, I am stuck in error: node_modules/@agm/core/lib/directives/map.d.ts:232:43 -…
JSG
  • 1,303
  • 2
  • 8
  • 13
20
votes
4 answers

Working example of angular-google-maps search function

Does anyone have an example of a working search box like the one the angular-google-maps-team is showing under 'search-box' on this site: https://angular-ui.github.io/angular-google-maps/#!/api If you write something it sure does find it in a…
danededane
  • 415
  • 1
  • 4
  • 14
17
votes
2 answers

How to get paths of agm polygon when it is edited and dragged?

I am trying to get the updated polygon paths when the polygon is edited and dragged. I tried to do it like the code below. In my Typescript: @ViewChild(AgmPolygon) polygon: any; this.polygon.getPaths().then((x: any[]) => { x.forEach(y => { …
paruvelly Vishwanath
  • 1,202
  • 3
  • 14
  • 30
16
votes
4 answers

Trouble getting Angular Google Map AGM to work with Angular 11

I installed agm/core using npm like this: npm install @agm/core The following warnings were displayed: npm WARN @agm/core@3.0.0-beta.0 requires a peer of @angular/common@^9.1.0 || ^10.0.0 but none is installed. You must install peer dependencies…
Glenster
  • 1,187
  • 2
  • 13
  • 31
14
votes
1 answer

angular-google-maps TypeError: $scope.map.control.refresh is not a function

I integrate angular-google-maps in my cordova mobile application. I want to refresh map using the following function. function refreshMap() { $scope.map.control.refresh({ latitude:…
Hongbin Wang
  • 1,186
  • 2
  • 14
  • 34
11
votes
3 answers

How to fix this 'Google Maps JavaScript API error: InvalidKeyMapError' error in angular 6?

I am using google map in my Angular 6 app. I have been using this Google map in another project too. but recently I start another project and install angular agm. then used the API key that i used previous project. but it did not work. Said 'that it…
lahiru sudesh
  • 121
  • 1
  • 1
  • 5
11
votes
2 answers

AGM Map printing shows gap in printout

Printing my Angular AGM Map from chrome I get this large grey gap in the map: As you can see, not only is the grey bar there (it turns white if I turn off "background graphics"), but it also shifts the map image below it down Below is the simple…
Jared
  • 2,999
  • 1
  • 28
  • 39
11
votes
2 answers

How to wait for Angular Google Maps to append getGMap to the control object

I've been trying to set up click event listeners on the google.maps.Map object that's created by the ui-gmap-google-map directive from the Angular Google Maps library. I need to do this dynamically, so it seems (by my brief testing at least) that…
Chadley08
  • 559
  • 1
  • 8
  • 26
10
votes
4 answers

ERROR in node_modules/@types/googlemaps/index.d.ts -- A tuple type element list cannot be empty

while trying to integrate the angular google maps - agm librarie in my angular project i got this error : somthing is worng with some configuration or maybe something i have missed i m working with material 6 and angular 6 in this project thanks for…
ZINE Mahmoud
  • 1,272
  • 1
  • 17
  • 32
10
votes
3 answers

Angular Google maps custom marker icon

I cannot create a custom marker. Even though I am passing an image path to the icon parameter I am still getting the default orange marker. Please tell me if you see anything wrong. Directive's template:
JKoder
  • 396
  • 1
  • 2
  • 10
9
votes
3 answers

how to initially zoom a map in angular google maps

I am using agm/core in displaying the coordinates of a map. I have the code below
user8653311
9
votes
2 answers

Error No provider for NgZone

I have an application that uses Angular Google Maps to show a location. At the beginning I was able to show the map, but since a while (probably I have modified something) I am getting the following error: ERROR Error: Uncaught (in promise): Error:…
Ivett
  • 111
  • 1
  • 3
8
votes
2 answers

agm markers not rendering from ngfor

I am fairly new to angular and have what I think is a basic problem. I create my map like
user3154108
  • 1,264
  • 13
  • 23
1
2 3
…
35 36