كيف يمكنني تغيير حجم خريطة Google باستخدام JavaScript بعد تحميلها؟


Answers

لخرائط Google الإصدار 3 ، تحتاج إلى تشغيل حدث تغيير الحجم بشكل مختلف:

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

راجع وثائق حدث التغيير (ستحتاج إلى البحث عن الكلمة "تغيير الحجم"): http://code.google.com/apis/maps/documentation/v3/reference.html#event

تحديث

كانت هذه الإجابة هنا منذ وقت طويل ، لذا قد يكون عرضًا صغيرًا مفيدًا وعلى الرغم من أنه يستخدم 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 & trigger Google Maps to update too
  $(window).resize(function() {
    // (the 'map' here is the result of the created 'var map = ...' above)
    google.maps.event.trigger(map, "resize");
  });
});
html,
body {
  height: 100%;
}
#map-canvas {
  min-width: 200px;
  width: 50%;
  min-height: 200px;
  height: 80%;
  border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&dummy=.js"></script>
Google Maps resize demo
<div id="map-canvas"></div>

تحديث 2018-05-22

مع إصدار عارض جديد في الإصدار 3.32 من API Maps Maps ، لم يعد حدث تغيير الحجم جزءًا من فئة Map .

وثائق الوثائق

عندما يتم تغيير حجم الخريطة ، يتم إصلاح مركز الخريطة

  • يحافظ التحكم في ملء الشاشة الآن على المركز.

  • لم تعد هناك حاجة إلى تشغيل حدث تغيير الحجم يدويًا.

المصدر: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); ليس له أي تأثير يبدأ من الإصدار 3.32

Question

لدي تعيين "mapwrap" div إلى 400 بكسل x 400 بكسل وداخلي تعيين "خريطة" Google إلى 100٪ × 100٪. وبالتالي ، يتم تحميل الخريطة بسرعة 400 × 400 بكسل ، ثم مع جافا سكريبت ، فأنا أغير حجم "mapwrap" إلى 100٪ × 100٪ من الشاشة - حيث يتم تغيير حجم خريطة google إلى الشاشة بأكملها كما توقعت ، ولكن تبدأ البلاطات بالاختفاء قبل الحافة اليمنى لل الصفحة.

هل هناك وظيفة بسيطة يمكنني الاتصال بها لتعديل خريطة Google إلى قسم "mapwrap" الأكبر حجمًا؟




فولفغانغ Pichler في map-in-a-box يعرض على

قم بتحميل خريطة في عنصر div قابل لتغيير الحجم وقابل لتغيير الحجم.




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

نحتاج إلى تحديث GoogleMapHelper لإصلاح المشكلة

تحتاج إلى إضافة البرنامج النصي أدناه في وظيفة setCenterMap

google.maps.event.trigger({$id}, \"resize\");

وتحتاج إلى تضمين التعليمة البرمجية أدناه في JavaScript

google.maps.event.addListenerOnce({$id}, 'idle', function(){
   setCenterMap(new google.maps.LatLng({$this->defaultLatitude}, 
   {$this->defaultLongitude}));
});