[google-maps] عرض خريطة جوجل في شكل خلق مع Twitter Bootstrap



Answers

بالنسبة لي ، يعمل مثل هذا (Boostrap 3):

$("#contact-modal").on("shown.bs.modal", function () {
    google.maps.event.trigger(map, "resize");
});
Question

أحاول إدراج خريطة جوجل في وسيلة باستخدام تويتر Bootstrap. يظهر التنسيق مع شكل الخريطة ، ولكن يتم عرض جزء فقط من الخريطة ، والباقي رمادي. عند تغيير حجم الشاشة ، تظهر الخريطة دائمًا بشكل صحيح ، على الرغم من توسيطها في المكان الخطأ.

لقد بحثت ووجدت اقتراحات مثل استدعاء حدث تغيير حجم الخريطة ، أو تعيين الحد الأقصى لعرض صورة الخريطة على لا شيء ، ولكن لم يساعد أي من هذه الاقتراحات حتى الآن. يبدو أن الخريطة تفشل في معرفة حجمها الصحيح طالما أنها في عنصر مخفي.

JS

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(51.219987, 4.396237),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapCanvas"),
    mapOptions);
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.219987, 4.396237)
  });
  marker.setMap(map);
}

HTML

<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3></h3>
  </div>
  <div class="modal-body">
    <div id="mapCanvas" style="width: 500px; height: 400px"></div>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
  </div>
</div>

أنا أستخدم Twitter Bootstrap v2.0.4. أحتاج إلى بعض المساعدة لأنني أخفق في تشغيل حدث التغيير بشكل صحيح أو تحرير ملف css بحيث يتم ترك خريطة Google بمفردها.




    this works for me 
    **<!-- Modal -->**
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Google Maps</h4>
                </div>
                <div class="modal-body">

                    <div id="map_canvas" style="width:auto; height: 500px;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


**Button**
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">View Map</button>

**javascript**
<script type="text/javascript">
    function initializeMap() {
        var mapOptions = {
            center: new google.maps.LatLng(51.219987, 4.396237),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
          mapOptions);
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(51.219987, 4.396237)
        });
        marker.setMap(map);
    }

    //show map on modal
    $('#myModal').on('shown.bs.modal', function () {
        initializeMap();
    });

</script>

آمل أن هذا سوف يساعد




جرب هذا !

<div class="modal fade" id="map_modal" tabindex="-1" role="dialog" aria-    labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body"><div id="map_canvas" style="width:530px; height:300px"></div></div>

    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

var map = marker = new Array();
geocoder = NULL;


                    function addPoint(location, id, mapId) {
                        if (!marker[id]) {
                            marker[id] = new google.maps.Marker({
                                position: location,
                                map: map[mapId],
                                draggable: true
                            });
                        }

                    }


                    function placeMarker(location, editStr, id) {
                        if (!marker[id]) {
                            marker[id] = new google.maps.Marker({
                                position: location,
                                map: map[id],
                                draggable: false
                            });
                        }
                        marker[id].setPosition(location);
                        map[id].setCenter(location);
                        $("#longitud").val(location.lat());
                        $("#latitud").val(location.lng());


                    }


                    function  initializeMap(id, div_id, lat, lng, editStr) {
                        if (!geocoder)
                            geocoder = new google.maps.Geocoder();

                        if (!map[id]) {
                            var coordinates = new google.maps.LatLng(lat, lng);
                            var myOptions = {zoom: 8, center: coordinates, mapTypeId: google.maps.MapTypeId.ROADMAP}
                            map[id] = new google.maps.Map(document.getElementById(div_id), myOptions);
                            google.maps.event.addListener(map[id], 'click', function(event) {
                                placeMarker(event.latLng, editStr, id);
                            });

                            placeMarker(coordinates, editStr, id);

                        }
                    }


                    $('#map_modal').on('shown.bs.modal', function(e) {
                        initializeMap("#newMaps", "map_canvas", 10.444598, -66.9287, "");
                    })



تخلص الجواب المقبول من الصناديق الرمادية ، لكنه لم يركز الخريطة في الإحداثيات الصحيحة بالنسبة لي. وكان الحل الوحيد هو الانتظار لتقديم الخريطة حتى بعد انتهاء عرض الوسائط.

$('#modal').on('shown', function () {
    initialize();
});



عند استخدام Bootstrap 3 ، فإنك تحتاج إلى استخدام ما هو مذكور في وثائقها ، بدلاً من الاستخدام "الظاهر" "shown.bs.modal"

مثال:

 $('#modal').on('shown.bs.modal', function () { 
     initialiseMap();
 });



Links