التعامل مع خرائط قوقل Google Maps Platform

Programmer Programmers · 29 يناير

اشتغل على مشروع Laravel and Livewire لدي مشكلة عند تشغيل الخريطة على pop أو Modal تختفي مباشرة أو لاتظهر أبدا

وعند استدعاء معرف الخريطة في الصفحة الرئيسية تظهر بدون مشكلة.

هل أحد واجهته نفس هذي المشكلة؟

                            <div class=" mb-3 col-md-12 ">
                                <label class="form-label">الموقع </label>
                                <div id="mapid" style="height: 300px;"></div>
                            </div>

وهذا استدعاء ملفات جافاسكربت:

<script src="{{ asset('js/mapsGoogle/mapLeaflet.js') }}"></script>
<script src="{{ asset('js/mapsGoogle/link_mapsGoogleapis.js') }}"></script>

ملف mapLeaflet.js:

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

  map = new Map(document.getElementById("mapid"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
    // mapTypeId: 'satellite',
  });
    const marker = new google.maps.Marker({
    position: myLatlng,
    map,
    title: "Click to zoom",
  });
}

initMap();

محمد عاطف17 · 4 فبراير

المشكلة كما اخبرتك منذ البداية ان العنصر map غير موجود .

حيث ان الملف mapLeaflet.js يتم تنفيذه فى صفحة ال index حيث لا يوجد حتى الان العنصر map

لذلك الحل هو اول يجب عليك نقل هذا المتغير بداخل الدالة initMap

بتاريخ On 29‏/1‏/2024 at 19:03 قال Programmer Programmers:
let map;

ثانيا ضع هذه الكود فى اخر صفحة ال modal اللتى تسمى tents.blade.php

@script
    <script>
        $wire.on('map_opend', (event) => {
            let interval_id = setInterval(() => {
                if ($('#map').length) {
                    initMap();
                    clearInterval(interval_id);
                }
            }, 300);
        });
    </script>
@endscript

وفى ملف TentComponent

نضع هذا السطر فى اخر دالة create و دالة edit

$this->dispatch('map_opend');

ويمكنك ارجاع كل شئ كما كان قبل تعديل هذا الجزء

بتاريخ On 31‏/1‏/2024 at 19:33 قال محمد عاطف11:
اذا لم تكن تحتاج ملف ال map API فى كل مكان وتحتاجه فقط فى صفحة ال index حيث يوجد ال modal فيمكنك حذفهم من script.blade.php
بتاريخ On 31‏/1‏/2024 at 18:57 قال Programmer Programmers:
 

وستعمل جيدا ان شاء الله كما هو مرفق فى الصورة

محمد عاطف17 · 29 يناير

مرحبا .

هل توجد أى اخطاء فى ال console ؟

هل يمكنك إرسال الكود الخاص بال modal .

لان المشكلة كما أعتقد انك تقوم بتهيئة الخريطة دون ان يكون العنصر موجود .

document.getElementById("mapid") // هذا العنصر غير موجود فى الصفحة

Programmer Programmers · 29 يناير

لدي صفحة تستخدم Google Maps API لعرض الخريطة. عندما أقوم بتحميل الصفحة مباشرة، تظهر الخريطة. ومع ذلك، عندما أحاول تحميل الصفحة باستخدام AJAX، أحصل على الخطأ

هذا الخطأ في ال console

mapLeaflet.js:4 Uncaught (in promise) ReferenceError: google is not defined
    at initMap

محمد عاطف17 · 29 يناير

هل يمكنك ارسال الكود كاملا .

الخطأ بالفعل انك تقوم بإرسال ال ajax دون ان يتم تحميل google api اولا لذلك يظهر هذا الخطأ.

ولمساعدتك بشكل افضل أحتاج لرؤية الكود المستخدم

تم التعديل في 29 يناير بواسطة محمد عاطف11

Programmer Programmers · 31 يناير

بتاريخ On 29‏/1‏/2024 at 21:09 قال محمد عاطف11:

هل يمكنك ارسال الكود كاملا .

الخطأ بالفعل انك تقوم بإرسال ال ajax دون ان يتم تحميل google api اولا لذلك يظهر هذا الخطأ.

ولمساعدتك بشكل افضل أحتاج لرؤية الكود المستخدم

هذا مكون livewire

class TentComponent extends Base
{
    use TentVaidation;

    public function create()
    {
        $this->newElement($this->attribute);
    }

    public function store()
    {
        $data = $this->validate();
        try {
            Tent::create($data);
            $this->successOperation($this->attribute);
        } catch (\Throwable $th) {
            session()->flash('error', 'عذرا لم تتم العملية');
        }
    }

    public function edit($id)
    {
        $tent = Tent::findOrFail($id);
        $this->tent_id = $id;
        $this->number = $tent->number;
        $this->location = $tent->location;
        $this->latitude = $tent->latitude;
        $this->longitude = $tent->longitude;
        $this->sacred_site_id = $tent->sacred_site_id;

        $this->openModal();
    }
    public function update()
    {
        $data = $this->validate();
        try {
            $tent = Tent::findOrFail($this->tent_id);
            $tent->update($data);
            $this->successOperation($this->attribute);
        } catch (\Throwable $th) {
            session()->flash('error', 'عذرا لم تتم العملية');
        }
    }

    public function delete(Tent $tent)
    {
        return parent::destroy($tent);
    }
    public function render()
    {
        return view('livewire.tent-component', [
            'tents' => Tent::paginate(5),
            'sacred_sites' => SacredSite::all(),
        ])->extends('dashboard.layouts.master');
    }
}

وهذا extends from Base

class Base extends Component
{
    use WithPagination;
    use WithFileUploads;


    public $isOpen = false;
    public $id;
    public $isDeleteOpen = false;
    public $search = '';

    public function newElement($attribute)
    {
        $this->reset($attribute);
        $this->openModal();
        $this->resetValidation();
    }

    public function successOperation($attribute)
    {
        session()->flash('success', 'تمت العملية بنجاح');
        $this->reset($attribute);
        $this->closeModal();

    }
    public function openModal()
    {
        $this->isOpen = true;
    }
    public function closeModal()
    {
        $this->isOpen = false;
    }

    public function confirmDeleteModal($id=null)
    {
       if($id) $this->id = $id;
        $this->isDeleteOpen = !$this->isDeleteOpen;
    }

    public function destroy($object)
    {
        try {
            $object->delete();
            $this->successOperation($this->attribute);
            $this->isDeleteOpen = false;
        } catch (\Throwable $th) {
            session()->flash('error', 'عذرا لم تتم العملية');
        }
    }
}

وهذا ال index والذي استدعي ال modal من خلاله

@section('title')
    {{ $componentCollection }}
@endsection

@section('first-css')
@endsection

@section('header-content')
    عرض {{ $componentCollection }}
@endsection

<!-- row -->
<div class="container-fluid">
    <!--**********************************Tabs Start***********************************-->
    <div class="d-flex flex-wrap align-items-center mb-3 ">
        <button type="button" class="btn btn-primary  me-1 " wire:click="create">
            <i class="mdi mdi-plus-circle ms-2"></i>اضافة {{ $componentSingle }} جديد
        </button>
    </div>
    <!--**********************************Tabs End***********************************-->
    <div class="row">
        <div class="col-xl-12 tab-content">
            @include('dashboard.admin.tents.tables.all')
        </div>
    </div>
    @if ($isOpen)
        @include('dashboard.admin.tents.modals.tents')
    @endif

    @if ($isDeleteOpen)
        @include('dashboard.admin.delete')
    @endif

    @include('dashboard.layouts.massages')
</div>

وهذا ال Modal

<div class="modal-container">
    <div class="modal-bg">
    </div>
    <div wire:ignore class="modal-boday-conent modal-content">
        <div class="modal-header">
            <h4 class="modal-title">
                <strong>{{ $tent_id ? ' تعديل بيانات ال' . $componentSingle : ' إضافة ' . $componentSingle . ' جديد' }}</strong>
            </h4>
            <i type="reset" wire:click.prevent="$set('isOpen', false)" aria-label="Close"
                class="las las la-times text-danger scale5 cancel-modal"></i>
        </div>
        <div class="modal-body">

            <form wire:submit.prevent="{{ $sacred_site_id ? 'update' : 'store' }}"
                class="row g-3 fv-plugins-bootstrap5 fv-plugins-framework  needs-validation form-disable" novalidate
                enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class=" mb-3 col-md-6 ">
                        <label class="form-label" for="number">رقم الخيمة </label>
                        <input wire:model="number" type="number" id="number" name="number" class="form-control"
                            placeholder="الرجاء ادخال رقم الخيمة   ">
                        @error('number')
                            <div class="text-danger px-2 showValidationError ">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <div class=" mb-3 col-md-6 ">
                        <label class="form-label" for="location">العنوان</label>
                        <input wire:model="location" type="text" id="location" required=""
                            value="{{ old('location') }}" name="location" class="form-control"
                            placeholder="الرجاء إدخال العنوان">
                        <div class="fv-plugins-message-container invalid-feedback ">
                            الرجاء إدخال العنوان
                        </div>
                        @error('location')
                            <div class="text-danger px-2 showValidationError ">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <div class=" mb-3 col-md-12 ">
                        <label class="form-label">الموقع </label>
                        <div id="map" style="height: 300px;"></div>
                    </div>

                    <div class=" mb-3 col-md-6 ">
                        <label class="form-label" for="latitude">خط الطول</label>
                        <input wire:model="latitude" type="text" id="latitude" required=""
                            value="{{ old('latitude') }}" name="latitude" class="form-control"
                            placeholder="الرجاء إدخال خط الطول">
                        <div class="fv-plugins-message-container invalid-feedback ">
                            الرجاء إدخال خط الطول
                        </div>
                        @error('latitude')
                            <div class="text-danger px-2 showValidationError ">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <div class=" mb-3 col-md-6 ">
                        <label class="form-label" for="longitude">خط العرض</label>
                        <input wire:model="longitude" type="text" id="longitude" required=""
                            value="{{ old('longitude') }}" name="longitude" class="form-control"
                            placeholder="الرجاء إدخال خط العرض">
                        <div class="fv-plugins-message-container invalid-feedback ">
                            الرجاء إدخال خط العرض
                        </div>
                        @error('longitude')
                            <div class="text-danger px-2 showValidationError ">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    <div class=" mb-3 col-md-6 ">
                        <select wire:model="sacred_site_id" id="sacred_site_id" class="form-control"
                            name="sacred_site_id" placeholder="الرجاء إدخال اسم المشعر المقدس">
                            <option disabled selected>اسم المشعر المقدس</option>
                            @foreach ($sacred_sites as $sacred_site)
                                <option value="{{ $sacred_site->id }}">{{ $sacred_site->name }}</option>
                            @endforeach
                        </select>
                        <div class="fv-plugins-message-container invalid-feedback ">
                            الرجاء إدخال اسم المشعر المقدس
                        </div>
                        @error('sacred_site_id')
                            <div class="text-danger px-2 showValidationError ">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>
                <div class="flex justify-end">
                    <button type="submit" class="btn btn-primary">{{ $tent_id ? 'تحديث' : 'حفظ' }}</button>
                    <button type="button" class="btn border-secondary" wire:click="closeModal">لغاء</button>
                </div>
            </form>
        </div>
    </div>
</div>

عندما أقوم بفتح ال modal أو إرسال نموذج وفشل التحقق من الصحة، يختفي جزء الخريطة.

أعتقد أنه تم تقديم جافا سكريبت مرة واحدة.
هل هناك أي حل للحفاظ على الخريطة (بما في ذلك التغييرات) في البث المباشر؟
شكرًا لك!

محمد عاطف17 · 31 يناير

اين تقوم باستدعاء هذه الملفات ؟

بتاريخ On 29‏/1‏/2024 at 19:03 قال Programmer Programmers:
<script src="{{ asset('js/mapsGoogle/mapLeaflet.js') }}"></script>
<script src="{{ asset('js/mapsGoogle/link_mapsGoogleapis.js') }}"></script>

الخطأ فى صفحة ال index حيث انك حين تقوم بفتح ال modal او إرسال نموذج التحقق فإن livewire يقوم بإعادة تحميل صفحة ال index

وبالتالى ملفات استدعاء ال map API تقوم بالتحميل مرة اخرى ولذلك يحدث الخطأ لان ملفات ال api يجب ان تعمل فى اول مرة فقط قبل ان تقوم الصفحة بالتحميل وعندما تعيد تحميل الصفحة تحدث المشكلة .

لذلك الحل يتوقف على مكان استدعائك لهذه الملفات .

فلترسل لى اين تقوم باستدعائها لاساعدك باذن الله

Programmer Programmers · 31 يناير

بتاريخ 2 ساعة قال محمد عاطف11:

اين تقوم باستدعاء هذه الملفات ؟

الخطأ فى صفحة ال index حيث انك حين تقوم بفتح ال modal او إرسال نموذج التحقق فإن livewire يقوم بإعادة تحميل صفحة ال index

وبالتالى ملفات استدعاء ال map API تقوم بالتحميل مرة اخرى ولذلك يحدث الخطأ لان ملفات ال api يجب ان تعمل فى اول مرة فقط قبل ان تقوم الصفحة بالتحميل وعندما تعيد تحميل الصفحة تحدث المشكلة .

لذلك الحل يتوقف على مكان استدعائك لهذه الملفات .

فلترسل لى اين تقوم باستدعائها لاساعدك باذن الله

هذا 'master.blade.php' اللي نعمل له extends من مكون ال livewire

<!DOCTYPE html>
<html lang="en">

<head>

    @include('dashboard.layouts.head')

</head>

<body onload="getMassage()">

    <!--*******************
    Preloader start
********************-->
    <div id="preloader">
        <div class="waviy">
            <span style="--i:1">L</span>
            <span style="--i:2">o</span>
            <span style="--i:3">a</span>
            <span style="--i:4">d</span>
            <span style="--i:5">i</span>
            <span style="--i:6">n</span>
            <span style="--i:7">g</span>
            <span style="--i:8">.</span>
            <span style="--i:9">.</span>
            <span style="--i:10">.</span>
        </div>
    </div>
    <!--*******************
    Preloader end
********************-->

    <!--**********************************
    Main wrapper start
***********************************-->
    <div id="main-wrapper">

        <!--**********************************
        Nav header start
    ***********************************-->
        @include('dashboard.layouts.logo-header')
        <!--**********************************
        Nav header end
    ***********************************-->

        <!--**********************************
        Header start
    ***********************************-->
        @include('dashboard.layouts.headerbar')
        <!--**********************************
        Header end ti-comment-alt
    ***********************************-->

        <!--**********************************
        Sidebar start
    ***********************************-->
            @include('dashboard.layouts.admin-sidebar')
        <!--**********************************
        Sidebar end
    ***********************************-->

        <!--**********************************
        Content body start
    ***********************************-->
        @include('dashboard.layouts.content')
        <!--**********************************
        Content body end
    ***********************************-->
        @include('dashboard.admin.toggle.toggle')

        {{-- @if ($isDeleteOpen) --}}
            {{-- @include('dashboard.admin.delete') --}}
        {{-- @endif --}}

        @include('dashboard.admin.show_image')

        <!--**********************************
        Footer start
    ***********************************-->
        @include('dashboard.layouts.footer')
        <!--**********************************
        Footer end
    ***********************************-->

    </div>
    <!--**********************************
    Main wrapper end
***********************************-->

    <!--**********************************
    Scripts
***********************************-->


    @include('dashboard.layouts.script')

</body>

</html>

ومن ثم نستدعي ملفات الجافاسكربت تبع Map Api هنا 'script.blade.php'

<script src="{{ asset('/vendor/global/global.min.js') }}"></script>
<script src="{{ asset('/vendor/jquery-nice-select/js/jquery.nice-select.min.js') }}"></script>

<script src="{{ asset('/js/toggle/toggle.js') }}"></script>
<script src="{{ asset('/js/delete/delete.js') }}"></script>
<script src="{{ asset('/js/image/show_image.js') }}"></script>

<script src="{{ asset('/js/leaflet/mapLeaflet.js') }}"></script> <!-- Google Map Api file -->
<script async src="{{ asset('/js/leaflet/mapsGoogleapis.js') }}"></script> <!-- Google Map Api like file -->



<!-- Required vendors -->
<script src="{{ asset('/vendor/chart.js/Chart.bundle.min.js') }}"></script>

<!-- Apex Chart -->
<script src="{{ asset('/vendor/apexchart/apexchart.js') }}"></script>
<script src="{{ asset('/vendor/nouislider/nouislider.min.js') }}"></script>
<script src="{{ asset('/vendor/wnumb/wNumb.js') }}"></script>

<!-- Dashboard 1 -->
<script src="{{ asset('/js/dashboard/dashboard-1.js') }}"></script>


@yield('script')
<script src="{{ asset('/js/show-validation-error.js') }}"></script>
<script src="{{ asset('/js/cancel-modal.js') }}"></script>
<script src="{{ asset('/js/custom.min.js') }}"></script>
<script src="{{ asset('/js/dlabnav-init.js') }}"></script>
<script src="{{ asset('js/validation.js') }}"></script>

<!-- Toastr -->
<script src="{{ asset('/js/toastr/toastr.min.js') }}"></script>

<!-- All init script -->
<script src="{{ asset('/js/toastr/toastr-init.js') }}"></script>

محمد عاطف17 · 31 يناير

اذا لم تكن تحتاج ملف ال map API فى كل مكان وتحتاجه فقط فى صفحة ال index حيث يوجد ال modal فيمكنك حذفهم من script.blade.php

بتاريخ 41 دقائق مضت قال Programmer Programmers:

<script src="{{ asset('/js/leaflet/mapLeaflet.js') }}"></script> <!-- Google Map Api file -->
<script async src="{{ asset('/js/leaflet/mapsGoogleapis.js') }}"></script> <!-- Google Map Api like file -->

وبعد هذه المتغيرات يمكنك إنشاء متغير جديد ولنعطه اسم مثلا isRenderedBefore

بتاريخ 3 ساعة قال Programmer Programmers:

 public $isOpen = false;
    public $id;
    public $isDeleteOpen = false;
    public $search = '';

public $isRenderedBefore = false;

وهنا قبل فتح ال modal نضع هذه السطر

بتاريخ 3 ساعة قال Programmer Programmers:

 public function newElement($attribute)
    {
        $this->reset($attribute);
        $this->openModal();
        $this->resetValidation();
    }

$this->isRenderedBefore = true;

وفى ملف ال index الخاص بال modal نضع هذا الكود

@section('script')
    @if (!$isRenderedBefore)
	<script async src="{{ asset('/js/leaflet/mapsGoogleapis.js') }}"></script> <!-- Google Map Api like file -->
	@endif
	<script src="{{ asset('/js/leaflet/mapLeaflet.js') }}"></script> <!-- Google Map Api file -->
@endsection

جرب هذا وإن شاء الله بيظبط معك

تم التعديل في 31 يناير بواسطة محمد عاطف11

محمد عاطف17 · 31 يناير

او يمكنك استخدام wire:ignore لتمنع إعادة بناء الخريطة مرة اخرى

<div class=" mb-3 col-md-12 " wire:ignore >
  <label class="form-label">الموقع </label>
  <div id="map" style="height: 300px;"></div>
</div>

Programmer Programmers · 4 فبراير

بتاريخ On 31‏/1‏/2024 at 21:19 قال محمد عاطف11:
او يمكنك استخدام wire:ignore لتمنع إعادة بناء الخريطة مرة اخرى
<div class=" mb-3 col-md-12 " wire:ignore >
  <label class="form-label">الموقع </label>
  <div id="map" style="height: 300px;"></div>
</div>

مافي فائدة حاولت وما ضبط

محمد عاطف17 · 4 فبراير

بتاريخ 5 دقائق مضت قال Programmer Programmers:

مافي فائدة حاولت وما ضبط

ممكن تبعتلى ملفات الكود مضغوطة.

المفروض الكود الاخير هذا يحل المشكلة

بتاريخ On 31‏/1‏/2024 at 20:19 قال محمد عاطف11:
او يمكنك استخدام wire:ignore لتمنع إعادة بناء الخريطة مرة اخرى
<div class=" mb-3 col-md-12 " wire:ignore >
  <label class="form-label">الموقع </label>
  <div id="map" style="height: 300px;"></div>
</div>

Programmer Programmers · 4 فبراير

حسنا

Programmer Programmers · 4 فبراير

بتاريخ 3 ساعة قال محمد عاطف11:
المشكلة كما اخبرتك منذ البداية ان العنصر map غير موجود .

حيث ان الملف mapLeaflet.js يتم تنفيذه فى صفحة ال index حيث لا يوجد حتى الان العنصر map

لذلك الحل هو اول يجب عليك نقل هذا المتغير بداخل الدالة initMap

ثانيا ضع هذه الكود فى اخر صفحة ال modal اللتى تسمى tents.blade.php
@script
    <script>
        $wire.on('map_opend', (event) => {
            let interval_id = setInterval(() => {
                if ($('#map').length) {
                    initMap();
                    clearInterval(interval_id);
                }
            }, 300);
        });
    </script>
@endscript
وفى ملف TentComponent

نضع هذا السطر فى اخر دالة create و دالة edit
$this->dispatch('map_opend');
ويمكنك ارجاع كل شئ كما كان قبل تعديل هذا الجزء

وستعمل جيدا ان شاء الله كما هو مرفق فى الصورة

اشتغل الحمد لله

وجزاك الله خير

لو تلاحظ في عملية الإضافة لما تملي حقول خط الطول والعرض عن طريق النقر على الموقع, أنه بالرغم أن الحقول فيها قيمة لكن يطلع لي الValidation أن الحقول فارغة عن طريق ال livewire ماعرفت إيش حل هذي المشكلة؟

التعامل مع خرائط قوقل Google Maps Platform

السؤال

Programmer Programmers

13 أجوبة على هذا السؤال

Recommended Posts

محمد عاطف17

محمد عاطف17

Programmer Programmers

محمد عاطف17

Programmer Programmers

محمد عاطف17

Programmer Programmers

محمد عاطف17

محمد عاطف17

Programmer Programmers

محمد عاطف17

Programmer Programmers

Programmer Programmers

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية