CODEWITHSUNDEEP
angulargoogle-mapsangular2-google-maps
user9389607
user9389607

Reputation:

How to switch between street map to satellite map in Angular 4

I am Working in an Angular 4 application ,Here I would like to add a map view for that I have developed the map with street view by default .

Now I want to add a option to the user that they can able to switch between street view to satellite view .

HTML

<div class="container">
  <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
    <agm-marker [latitude]="lat" [longitude]="lng">
        <agm-info-window>
            <strong>XYZ Company</strong>
          </agm-info-window>
    </agm-marker>
  </agm-map>
</div>

TypeScript

export class ContactusComponent implements OnInit {

  lat: number = 51.509865;
  lng: number = 77.423994;
  zoom: number = 15;

  constructor() { }

  ngOnInit() {
  }

}

enter image description here

Can anyone help me to get this ..

Upvotes: 1

Views: 4404

Answers (5)

Bhadresh Patel
Bhadresh Patel

Reputation: 2080

Adding button in agm map control for switch of different map type.

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [disableDefaultUI]="false"
                        style="width:100%;height:400px" >
                        <agm-map-type-control>
                            <button mat-flat-button >Satellite</button>
                            <button mat-flat-button >RoadMap</button>

                        </agm-map-type-control></agm-map>

Upvotes: 0

Reaper
Reaper

Reputation: 412

Finally I found the answer.

 <agm-map  [mapTypeId]="'true'"></agm-map>

have to write for different view option ,its show on map (satellite,terrsin and other)

Upvotes: 0

Reaper
Reaper

Reputation: 412

May be it will solve your problem. Add in HTML FILE:

<div>
  <button  class="btn btn-primary" (click) ="this.viewType= 'terrain'" >Terrain</button>
  <button  class="btn btn-danger" (click) ="this.viewType= 'satellite'" >Satellite</button>
  <agm-map [latitude]="lat" [longitude]="lng" [mapTypeId]="this.viewType" >
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
  </agm-map>
</div>

and add in COMPONENT.TS FILE:

 {
 viewType: any='hybrid';  //for default 'hybrid'

  lat: number = 28.6330;
  lng: number = 77.2194;
 }

add extra button as per your required view.

Upvotes: -1

Shivam Sagar
Shivam Sagar

Reputation: 247

If you want to use both view .you can simply add [mapTypeControl]='true' to agm-map tag.Ex- <agm-map [zoom]='11' [latitude]="lat" [longitude]="lng" [fullscreenControl]='true' [mapTypeControl]='true'>

Upvotes: 1

vs97
vs97

Reputation: 5859

You will need to use [mapTypeId]. For example:

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [mapTypeId]="'hybrid'"></agm-map>.

Options are:

'roadmap' | 'hybrid' | 'satellite' | 'terrain'

Defaults to 'roadmap'.

Upvotes: 4

Related Questions