CODEWITHSUNDEEP
angularmapsangular-google-maps
neha anand
neha anand

Reputation: 19

How can I automatically zoom in to my map at a specific position in agm. Please notice all the markers are very close to each other

Screenshot of the markers:

screenshot of the markers

This is the output I need:

this is the output i need

This is my sample code of mapcomponent.html

<div id="wide">
  <div *ngIf="isDataLoaded">
    <agm-map [latitude]="lat" [longitude]="lng" #gm  (mapClick)="closeInfoWindow(infoWindow,gm)" (mapReady)="abc($event)">
      <agm-marker  [latitude]="lat" [longitude]="lng" [iconUrl]="iconUrl"></agm-marker>
        <agm-marker 
        *ngFor="let m of markers ; let i = index"
        [latitude]="m.lat"
        [longitude]="m.lng"
        (markerClick)="getDirection(m.lat,m.lng)"
        (mouseOver)="onMouseOver(infoWindow,gm)">
        <agm-info-window [disableAutoPan]="false" #infoWindow>
            <div>
                {{m.name}}
                {{m.rating}}
            </div>
        </agm-info-window>
          <!-- <agm-snazzy-info-window [maxWidth]="200" [closeWhenOthersOpen]="true"    [backgroundColor]="'#ADD8E6'"  [border]="true" [borderRadius]="'10px'"  [fontSize]="'100px'" [fontColor]="'#FF0000'" [padding]="'20px'">  
            <ng-template>

                <mat-card>{{m.name}}
                  {{m.rating}}</mat-card>

            </ng-template>
          </agm-snazzy-info-window>  -->          
          <agm-direction [origin]=origin [destination]=destination [renderOptions]="renderOptions" >
        </agm-direction> 
    </agm-marker>
    </agm-map>
  </div> 
</div>


mapcomponent.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { GoogleMapsAPIWrapper, AgmMap, LatLngBounds, LatLngBoundsLiteral} from '@agm/core';

declare var google: any;
@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit{
  title: string = 'My first AGM project';
  Getresponse:any;
  lat: number ;
  lng: number ;
  isDataLoaded:boolean = false;
  iconUrl: string = "assets/images/icons8-user-location-48.png";
  public origin: any; 
  public destination: any;
 city:string;
 @ViewChild('gm') gm: AgmMap;

 ngAfterViewInit() {
  console.log(this.gm);
  this.gm.mapReady.subscribe(map => {
    const bounds: LatLngBounds = new google.maps.LatLngBounds();
    for (const mm of this.markers) {
      bounds.extend(new google.maps.LatLng(mm.lat, mm.lng));
    }
    map.fitBounds(bounds);
  });
}

  onMouseOver(infoWindow, gm) {

    if (gm.lastOpen != null) {
        gm.lastOpen.close();
    }

    gm.lastOpen = infoWindow;

    infoWindow.open();
}

  public renderOptions = {
    suppressMarkers: true,
}
constructor(private route: ActivatedRoute, private router: Router , private http: HttpClient) { 
  console.log(this.router.url,"Current URL");
  //console.log(this.city= this.route.snapshot.queryParamMap.get('location'));
}
markers: Array<marker>=[];
response: any;
  ngOnInit() {

    this.isDataLoaded=true;
    this.city= this.route.snapshot.queryParamMap.get('location');
    this.http.get('http://localhost:64539//api/Data/position/'+this.city).subscribe((response)=>{
      this.Getresponse = response;
      this.lat =  this.Getresponse.latitudePosition;
      this.lng=this.Getresponse.longitudePosition;

    })

 this.http.get('http://localhost:64539//api/Data/insideAirport/puneairport/12/13/store').
  subscribe((response)=>
  {
  this.response = response;
  for(let data in response){
    this.markers.push({
      lat: Number(response[data].latitude),
      lng: Number(response[data].longitude),
      name:response[data].name,
      rating:response[data].rating,

    })
  }
})
}
}
class marker {
  lat: number;`enter code here`
  lng: number;  
name:string;
rating:string

}

So here I'm using agm maps. I am not able to write code for zooming to a users specific location. I have tried mapReadyevent but I am still unable to figure out.

I have tried doing it using fit bounds of google maps as well. Still not able to figure out the solution.

Well my markers are of the same location. Like i will be getting markers of all the shops inside a particular airport , so those markers are very close to each other ,,,, its not that my markers are in different countries and i want them to be rendered on my map. My markers will be on same location with very less difference in latitude and longitude

Upvotes: 1

Views: 5366

Answers (1)

Ghulam
Ghulam

Reputation: 11

you can use AgmMap mapReady event

<agm-map[latitude]="lat" [longitude]="lng" #gm mapClick)="closeInfoWindow(infoWindow,gm)" (mapReady)="mapReady($event)">

and in your Ts File put the lat and lng of that specific position.

mapReady(map) {
  const bonds: LatLngBounds = new google.maps.LatLngBounds();
  bonds.extend(new google.maps.LatLng(this.showShop.lat, this.showShop.lng));
  map.fitBounds(bonds);
}

Upvotes: 1

Related Questions