how to initially zoom a map in angular google maps

Question

I am using agm/core in displaying the coordinates of a map. I have the code below

<agm-map [latitude]="10.3207886" [longitude]="123.90250049999997">
    <agm-marker [latitude]="10.3207886 [longitude]="123.90250049999997"></agm-marker>
</agm-map>

The view is this:

But I want to initially show the streets like this:

How to do that?

score 21 · Answer 1 · answered Dec 12 '18 at 07:01

21

The update for agm-map does not support center directives anymore. use zoom and latitude and long instead.

<agm-map [zoom]="13"  [latitude]="127.1" [longitude]="141.1">
                <agm-marker [latitude]="127.1" [longitude]="141.1"></agm-marker>
</agm-map>

answered Dec 12 '18 at 07:01

Aizen

1,807
2
14
28

I have a requirement where I need to set the zoom level dynamically depending on the number of pins (markers) in the initial load. I.e. the initial zoom level should capture all the pins (it could be 5, 10, 15, etc...) Is it possible to do that? – devC Dec 14 '18 at 06:39
1

yes, you have to clip the highest lowest altitube and the highest longitude from the list of your markers. You don't have to average them anymore. All you have to do is put the lowest latitude to the latitue map (not the agm-marker but the agm-map). and the Highest longitude to the agm-map. It will automatically center and adjust itself Whatever zoom level you have. – Aizen Dec 15 '18 at 11:29

score 5 · Accepted Answer · answered Mar 22 '18 at 04:25

5

Set zoom and center attributes. For example.

<agm-map zoom="8" [center]="10.3207886, 123.90250049999997">
    <agm-marker [latitude]="10.3207886" [longitude]="123.90250049999997"></agm-marker>
</agm-map>

center is usually to specify which area you want to concentrate on, according to it change zoom level

answered Mar 22 '18 at 04:25

Esco

387
2
3
16

Thank you. Lol that was easy haha – Mar 22 '18 at 05:19
14

For me, it worked when adding bracket in zoom like this [zoom]="10", note also that I'm getting error when using [center]="LAT, LONG", so I stick with this [latitude]="lat" [longitude]="lng" – SMPLYJR May 24 '18 at 09:20
Same as @S.Domeng. Adding bracket on the zoom property solved it. – Diemauerdk Mar 01 '19 at 18:14
3

agm-map doesn't have [center] Input – ConstantinEx Oct 10 '19 at 05:33

score 0 · Answer 3 · answered Dec 15 '20 at 12:52

Add usePanning attr for center map position [usePanning]='true'

<agm-map [zoom]="13" [usePanning]="true" [latitude]="127.1" [longitude]="141.1">
    <agm-marker [latitude]="127.1" [longitude]="141.1"></agm-marker>
</agm-map>

Here is the reference link from agm https://angular-maps.com/api-docs/agm-core/components/agmmap#usePanning

how to initially zoom a map in angular google maps

3 Answers3