// src > app > app.component.html <div class="googlemap"><!-- app.component.html --><agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom"><agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker></agm-map> </div>
// src > app > app.component.css agm-map { height: 500px; } .googlemap{ margin-top: 5%; }
import { Component, OnInit } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent implements OnInit { title: string = 'Google Map Project'; latitude: number; longitude: number; zoom:number; ngOnInit() { this.setCurrentLocation(); } // Get Current Location Coordinates private setCurrentLocation() { if ('geolocation' in navigator) { navigator.geolocation.getCurrentPosition((position) => { this.latitude = position.coords.latitude; this.longitude = position.coords.longitude; this.zoom = 15; }); } } }
// src > app > app.component.html <div class="googlemap"> <!-- app.component.html --> <agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom"> <agm-marker *ngFor="let marker of restaurant_list; let i = index" [latitude]="marker.latitude" [longitude]="marker.longitude" [label]="marker.name"> </agm-marker> </agm-map> </div>
// src > app > app.component.ts import { Component, OnInit } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent implements OnInit { title: string = 'Google Map Project'; latitude: number; longitude: number; zoom:number; restaurant_list = [ { id : 1, name : 'Maharaja Hotel', latitude : 20.016112, longitude :73.737208 }, { id : 2, name : 'Peshwa Hotel', latitude : 20.013092, longitude :73.748969 }, { id : 3, name : 'Aroma Hotel', latitude : 20.014112, longitude : 73.713951 }, ] ngOnInit() { this.setCurrentLocation(); } // Get Current Location Coordinates private setCurrentLocation() { if ('geolocation' in navigator) { navigator.geolocation.getCurrentPosition((position) => { this.latitude = position.coords.latitude; this.longitude = position.coords.longitude; this.zoom = 15; }); } } }