Created separate properties object

PankajPrakashh · Jan 22, 2021 · 8c65a1d · 8c65a1d
1 parent a413294
commit 8c65a1d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/src/app/components/hello-world/hello-world.component.html b/src/app/components/hello-world/hello-world.component.html
@@ -1 +1 @@
-<div id="hello-world-map"></div>
+<div #googleMap id="hello-world-map"></div>
diff --git a/src/app/components/hello-world/hello-world.component.ts b/src/app/components/hello-world/hello-world.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 
 @Component({
   selector: 'app-hello-world',
@@ -7,6 +7,9 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HelloWorldComponent implements OnInit {
 
+  @ViewChild('googleMap', { static: true })
+  googleMap!: ElementRef;
+
   map!: google.maps.Map;
 
   constructor() { }
@@ -17,13 +20,13 @@ export class HelloWorldComponent implements OnInit {
 
   private initMap(): void {
 
-    // HTML element where google maps will get rendered
-    const mapHTML = document.getElementById('hello-world-map') as HTMLElement;
-
-    this.map = new google.maps.Map(mapHTML, {
-      center: { lat: 17.412127, lng: 78.474921 },
+    const mapProperties: google.maps.MapOptions = {
+      // Center to Hyderabad, India
+      center: new google.maps.LatLng(17.412127, 78.474921),
       zoom: 15,
-    });
+    };
+
+    this.map = new google.maps.Map(this.googleMap?.nativeElement, mapProperties);
   }
 
 }