CODEWITHSUNDEEP
google-mapsangularangular-google-maps
amansoni211
amansoni211

Reputation: 929

Shift the center of google map to right Angular 2

I am using angular2-google-map

I want to shift the center to map to left.

what it is right now What it is righ now

what I want what I want

the html

<sebm-google-map [latitude]="center.lat" [longitude]="center.long">
    <sebm-google-map-marker *ngFor="let h of mapData?.list" [latitude]="h.lat" [longitude]="h.lang">
        <sebm-google-map-info-window [maxWidth]="300">
            <strong>{{h.info}}</strong>
        </sebm-google-map-info-window>
    </sebm-google-map-marker>
</sebm-google-map>

Component.ts file

@Component({
    selector: 'google-map',
    templateUrl: './google-map.component.html',
    providers: [MapDataService]
})

export class googleMapComponent implements OnInit, OnChanges {
    center:any;
    @Input() mapData: Array<Object>;
    public constructor(private mapService: MapDataService) {
        this.center = {};
        this.center['lat'] = 28.457523;
        this.center['long'] = 77.026344;
    }
}

Thanks

Note: Image are taken from This question which has the same issues(but in simple google map)

Upvotes: 0

Views: 701

Answers (1)

artrillionaire
artrillionaire

Reputation: 31

Short Answer:

ngOnInit() {
  this.browserWidth = window.innerWidth;
  this.lngDiff = this.browserWidth * .000335;
}

And update: this.center['long'] = 77.026344; to this.center['long'] = 77.026344+this.lngDiff;

Long Answer:

I had to do something similar where I had to offset the map to the right (but keep it centered in the right half of the browser). In order to do this I manually centered the map in the right half of the screen where I wanted it based on 3 different browser widths 1920px, 1280px, and 790px.

The difference of the longitude on the map was different for all three points. For 1920px the longitude of the map needed to be off-center by .65, for 1280px the difference was .43 and for 790px the difference was .26.

I then did a little bit of math to figure out what all three points had in common (I had to solve for x).

1920 * x = .65, 1280 * x = .43, and 790 * x = .26.

Because these points weren't exactly the midpoint I was looking for, I averaged the result of all of those points. What I got was .000335 which is the number that you're multiplying the browser width by.

You can now add this.lngDiff to your longitude to offset the map to the left or subtract to offset the map to the right.

The result is this

Upvotes: 2

Related Questions