[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 بمفردها.




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

مثال:

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



    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>

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




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

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



جرب هذا !

<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, "");
                    })





Related