CODEWITHSUNDEEP
angulargoogle-mapstypescriptgeolocationangular-google-maps
user8653311
user8653311

Reputation:

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

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

The view is this:

enter image description here

But I want to initially show the streets like this:

enter image description here

How to do that?

Upvotes: 10

Views: 25642

Answers (3)

Suraj Parise
Suraj Parise

Reputation: 330

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

Upvotes: 0

Aizen
Aizen

Reputation: 1825

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>

Upvotes: 21

Esco
Esco

Reputation: 397

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

Upvotes: 5

Related Questions