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?

Hoop

Answer 1

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

Dissepiment

Thank you. Lol that was easy haha – Hoop

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" – Thursby

Same as @S.Domeng. Adding bracket on the zoom property solved it. – Brainsick

agm-map doesn't have [center] Input – Mandimandible

Answer 2

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>

Susanasusanetta

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? – Stratton

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. – Susanasusanetta

Answer 3

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

Capacious