/Javascript/AngularJS/Zoom map around the marker angular

Zoom map around the marker angular

Agm zoom to marker

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

Source: stackoverflow.com

Zoom map around the marker angular

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { MyMarker } from './marker';
import { MarkersService } from './markers.service';
import { GoogleMapsAPIWrapper, AgmMap, LatLngBounds, LatLngBoundsLiteral} from '@agm/core';

declare var google: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {

  title = 'AGM project (so48865595)';
  lat = 41.399115;
  lng = 2.160962;
  markers: MyMarker[];

  @ViewChild('AgmMap') agmMap: AgmMap;

  constructor(private markersService: MarkersService) { }

  ngOnInit() {
    this.getMarkers();
  }

  ngAfterViewInit() {
    console.log(this.agmMap);
    this.agmMap.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);
    });
  }

  getMarkers(): void {
    this.markers = this.markersService.getMarkers();
  }

  mapIdle() {
    console.log('idle');
  }
}

Source: stackoverflow.com

Similar codes

0 vote197 views1 answer
How to set direction based on language in angular
Javascript AngularJS
-1 vote188 views1 answer
Angular 11 support versions nodejs
Javascript AngularJS
70 votes271 views6 answers
Create new project in angular
Javascript AngularJS
21 votes205 views6 answers
Angular new component
Javascript AngularJS
0 vote209 views1 answer
Angular input type text character limit
Javascript AngularJS
0 vote208 views1 answer
How to make color squares in angular
Javascript AngularJS
0 vote206 views1 answer
Put validation on the cell number in angular
Javascript AngularJS
0 vote198 views1 answer
Angular cli no test
Javascript AngularJS
0 vote190 views1 answer
@angular/[email protected] node_modules/@angular/common @angular/common@"11.2.1" from the root project
Javascript AngularJS
0 vote195 views1 answer
ERROR in ./src/app/pages/auth/auth.module.ngfactory.js Module not found: Error: Can't resolve '@angular/material/core/index'
Javascript AngularJS