diff --git a/src/google-maps/map-directions-renderer/README.md b/src/google-maps/map-directions-renderer/README.md
index 6438120f80d5..c5ff21edc950 100644
--- a/src/google-maps/map-directions-renderer/README.md
+++ b/src/google-maps/map-directions-renderer/README.md
@@ -21,28 +21,26 @@ Using the `MapDirectionsService` requires the Directions API to be enabled in Go
 
 ```typescript
 // google-maps-demo.component.ts
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {GoogleMap, MapDirectionsRenderer, MapDirectionsService} from '@angular/google-maps';
+import {map} from 'rxjs/operators';
 
 @Component({
   selector: 'google-map-demo',
   templateUrl: 'google-map-demo.html',
-    imports: [GoogleMap, MapDirectionsRenderer],
+  imports: [GoogleMap, MapDirectionsRenderer],
 })
 export class GoogleMapDemo {
   center: google.maps.LatLngLiteral = {lat: 24, lng: 12};
   zoom = 4;
 
-  readonly directionsResults$: Observable<google.maps.DirectionsResult|undefined>;
+  private mapDirectionsService = inject(MapDirectionsService);
 
-  constructor(mapDirectionsService: MapDirectionsService) {
-    const request: google.maps.DirectionsRequest = {
-      destination: {lat: 12, lng: 4},
-      origin: {lat: 14, lng: 8},
-      travelMode: google.maps.TravelMode.DRIVING
-    };
-    this.directionsResults$ = mapDirectionsService.route(request).pipe(map(response => response.result));
-  }
+  readonly directionsResults$ = this.mapDirectionsService.route({
+    destination: {lat: 12, lng: 4},
+    origin: {lat: 14, lng: 8},
+    travelMode: google.maps.TravelMode.DRIVING,
+  }).pipe(map(response => response.result));
 }
 ```
 
diff --git a/src/google-maps/map-geocoder/README.md b/src/google-maps/map-geocoder/README.md
index f6b8257fc9e4..8dc3a3ee628d 100644
--- a/src/google-maps/map-geocoder/README.md
+++ b/src/google-maps/map-geocoder/README.md
@@ -24,7 +24,7 @@ has billing enabled. See [here](https://developers.google.com/maps/documentation
 
 ```typescript
 // google-maps-demo.component.ts
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {MapGeocoder} from '@angular/google-maps';
 
 @Component({
@@ -32,8 +32,10 @@ import {MapGeocoder} from '@angular/google-maps';
   templateUrl: 'google-map-demo.html',
 })
 export class GoogleMapDemo {
-  constructor(geocoder: MapGeocoder) {
-    geocoder.geocode({
+  private geocoder = inject(MapGeocoder);
+
+  search() {
+    this.geocoder.geocode({
       address: '1600 Amphitheatre Parkway, Mountain View, CA'
     }).subscribe(({results}) => {
       console.log(results);