تغيير حجم خريطة Google باستخدام JavaScript

لقد واجهت مشكلة تتمثل في اختفاء مربعات Google بعد تغيير حجم قسم "mapwrap" الذي يحتوي على Google رسم خريطة. تهدف هذه المقالة إلى توفير حل لهذه المشكلة من خلال مناقشة الوظيفة المناسبة لتشغيل تعديل خريطة Google.

لماذا تختفي المربعات؟

عند تغيير حجم " Mapwrap" div، فإن خريطة Google لا يتم ضبطها تلقائيًا على الحجم الجديد. يؤدي هذا إلى عدم تطابق بين أبعاد الخريطة ومنطقة العرض، مما يتسبب في اختفاء المربعات.

الحل

لإصلاح هذا، تحتاج إلى تشغيل حدث تغيير الحجم بشكل صريح على كائن خريطة جوجل. يؤدي هذا إلى توجيه الخريطة إلى إعادة حساب تخطيطها والتكيف مع الأبعاد الجديدة لقسم "mapwrap".

بالنسبة لخرائط Google الإصدار 3، استخدم هذه الوظيفة:

google.maps.event.trigger(map, "resize");

عرض توضيحي

للتوضيح هذا المفهوم، إليك عرض توضيحي باستخدام jQuery:

$(function() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  // Listen for the window resize event and trigger Google Maps to resize
  $(window).resize(function() {
    google.maps.event.trigger(map, "resize");
  });
});

يضمن هذا المثال أنه عندما يتم تغيير حجم النافذة، سيتم ضبط خريطة Google الموجودة داخل قسم "map-canvas" تلقائيًا على الحجم الجديد، مما يمنع المربعات من الاختفاء.