طريقة تثبيت وتشغيل @angular/google-maps@16.0.3 عبر Angular
إليك دليل شامل لتثبيت وتشغيل `@angular/google-maps@16.0.3`:
## 1. التثبيت
```bash
# تثبيت مكتبة Angular Google Maps
npm install @angular/google-maps@16.0.3
# أو باستخدام yarn
yarn add @angular/google-maps@16.0.3
```
## 2. الحصول على Google Maps API Key
1. اذهب إلى [Google Cloud Console](https://console.cloud.google.com/)
2. قم بإنشاء مشروع جديد أو اختر مشروع موجود
3. فعّل **Maps JavaScript API**
4. احصل على **API Key**
## 3. إضافة Google Maps Script
في ملف `index.html`:
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- إضافة Google Maps API -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
```
## 4. استيراد Module
في `app.module.ts`:
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GoogleMapsModule } from '@angular/google-maps';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
GoogleMapsModule // إضافة GoogleMapsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
## 5. استخدام الخريطة في Component
في `app.component.ts`:
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'google-maps-app';
// إعدادات الخريطة
center: google.maps.LatLngLiteral = { lat: 24.7136, lng: 46.6753 }; // الرياض
zoom = 10;
// خيارات الخريطة
options: google.maps.MapOptions = {
mapTypeId: 'roadmap',
zoomControl: true,
scrollwheel: true,
disableDoubleClickZoom: false,
maxZoom: 20,
minZoom: 5,
};
// علامات على الخريطة
markers: google.maps.LatLngLiteral[] = [
{ lat: 24.7136, lng: 46.6753 },
{ lat: 24.7500, lng: 46.7000 },
];
// دالة عند النقر على الخريطة
onMapClick(event: google.maps.MapMouseEvent) {
if (event.latLng) {
this.markers.push(event.latLng.toJSON());
}
}
// دالة عند النقر على العلامة
onMarkerClick(marker: google.maps.LatLngLiteral) {
console.log('تم النقر على العلامة:', marker);
}
}
```
## 6. Template HTML
في `app.component.html`:
```html
<div class="map-container">
<h1>خريطة Google Maps</h1>
<!-- الخريطة -->
<google-map
[height]="'400px'"
[width]="'100%'"
[center]="center"
[zoom]="zoom"
[options]="options"
(mapClick)="onMapClick($event)">
<!-- العلامات -->
<map-marker
*ngFor="let marker of markers"
[position]="marker"
[options]="{
draggable: true,
animation: google.maps.Animation.DROP
}"
(mapClick)="onMarkerClick(marker)">
</map-marker>
</google-map>
</div>
```
## 7. التنسيق CSS
في `app.component.css`:
```css
.map-container {
padding: 20px;
}
google-map {
border: 2px solid #ccc;
border-radius: 8px;
}
```
## 8. مثال متقدم مع InfoWindow
```typescript
// في Component
export class AppComponent {
infoWindow = new google.maps.InfoWindow();
openInfoWindow(marker: MapMarker, content: string) {
this.infoWindow.setContent(content);
this.infoWindow.open(marker.getMap(), marker.getMarker());
}
}
```
```html
<!-- في Template -->
<map-marker
#markerRef="mapMarker"
*ngFor="let marker of markers; let i = index"
[position]="marker"
(mapClick)="openInfoWindow(markerRef, 'العلامة رقم ' + (i + 1))">
</map-marker>
<map-info-window>
<div>محتوى النافذة المنبثقة</div>
</map-info-window>
```
## 9. خيارات إضافية
### استخدام الخدمات الإضافية:
```typescript
// Places Service
import { GoogleMap } from '@angular/google-maps';
export class MapComponent implements OnInit {
@ViewChild(GoogleMap) map!: GoogleMap;
ngOnInit() {
// استخدام Places Service
const service = new google.maps.places.PlacesService(this.map.googleMap!);
}
}
```
### إضافة Autocomplete:
```html
<input #addressInput type="text" placeholder="ابحث عن عنوان">
```
```typescript
@ViewChild('addressInput') addressInput!: ElementRef;
ngAfterViewInit() {
const autocomplete = new google.maps.places.Autocomplete(
this.addressInput.nativeElement
);
autocomplete.addListener('place_changed', () => {
const place = autocomplete.getPlace();
if (place.geometry?.location) {
this.center = place.geometry.location.toJSON();
}
});
}
```
## 10. نصائح هامة
1. **أمان API Key**: استخدم متغيرات البيئة لحفظ API Key
2. **التحكم في الاستخدام**: ضع حدود للاستخدام في Google Cloud Console
3. **الأداء**: استخدم lazy loading للخرائط الكبيرة
4. **التوافق**: تأكد من توافق الإصدار مع Angular الخاص بك
هذا الدليل يوضح كيفية تثبيت وتشغيل Google Maps في Angular بطريقة شاملة!
تعليقات
إرسال تعليق