在页面加载上显示地图

Question

Hi in my website there is a google map that loads after the user click on a Button to view the map and this is the code :

<div style="margin-top:-5px" class="collapse" id="collapseMap">
    <?php if($appModule == "tours"){ ?>
    <iframe id="mapframe" width="354" height="580" style="position: static;" src="" frameborder="0"></iframe>
    <script>
        $('#collapseMap').on('shown.bs.collapse', function(e){
            $("#mapframe").prop("src","<?php echo base_url();?>tours/tourmap/<?php echo $module->id; ?>");
        });
    </script>
    <?php }else{ ?>
    <div id="map" class="map"></div>
    <br>
    <script>
        $('#collapseMap').on('shown.bs.collapse', function(e) {
            (function(A) {
                if (!Array.prototype.forEach)
                    A.forEach = A.forEach || function(action, that) {
                        for (var i = 0, l = this.length; i < l; i++)
                            if (i in this) action.call(that, this[i], i, this);
                    }
            })(Array.prototype);
            var mapObject, markers = [],
                markersData = {
                    'marker': [{
                        name: '<?php echo character_limiter($module->title, 80);?>',
                        location_latitude: <?php echo $module->latitude;?>,
                        location_longitude: <?php echo $module->longitude;?>,
                        map_image_url: '<?php echo $module->thumbnail;?>',
                        name_point: '<?php echo character_limiter($module->title, 80);?>',
                        description_point: '<?php echo character_limiter(strip_tags(trim($module->desc)),100);?>',
                        url_point: '<?php echo $module->slug;?>'
                    }, <?php foreach($module->relatedItems as $item):?> {
                        name: 'hotel name',
                        location_latitude: "<?php echo $item->latitude;?>",
                        location_longitude: "<?php echo $item->longitude;?>",
                        map_image_url: "<?php echo $item->thumbnail;?>",
                        name_point: "<?php echo $item->title;?>",
                        description_point: '<?php echo character_limiter(strip_tags(trim($item->desc)),100);?>',
                        url_point: "<?php echo $item->slug;?>"
                    }, <?php endforeach;?>]
                };
            var mapOptions = {
                zoom: 14,
                center: new google.maps.LatLng(<?php echo $module->latitude;?>, <?php echo $module->longitude;?>),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: !1,
                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                    position: google.maps.ControlPosition.LEFT_CENTER
                },
                panControl: !1,
                panControlOptions: {
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                zoomControl: !0,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.LARGE,
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                scrollwheel: !1,
                scaleControl: !1,
                scaleControlOptions: {
                    position: google.maps.ControlPosition.TOP_LEFT
                },
                streetViewControl: !0,
                streetViewControlOptions: {
                    position: google.maps.ControlPosition.LEFT_TOP
                },
                styles: []
            };
            var marker;
            mapObject = new google.maps.Map(document.getElementById('map'), mapOptions);
            for (var key in markersData)
                markersData[key].forEach(function(item) {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(item.location_latitude, item.location_longitude),
                        map: mapObject,
                        icon: '<?php echo base_url(); ?>uploads/global/default/' + key + '.png',
                    });
                    if ('undefined' === typeof markers[key])
                        markers[key] = [];
                    markers[key].push(marker);
                    google.maps.event.addListener(marker, 'click', (function() {
                        closeInfoBox();
                        getInfoBox(item).open(mapObject, this);
                        mapObject.setCenter(new google.maps.LatLng(item.location_latitude, item.location_longitude))
                    }))
                });

            function hideAllMarkers() {
                for (var key in markers)
                    markers[key].forEach(function(marker) {
                        marker.setMap(null)
                    })
            };

            function closeInfoBox() {
                $('div.infoBox').remove()
            };

            function getInfoBox(item) {
                return new InfoBox({
                    content: '<div class="marker_info" id="marker_info">' + '<img style="width:280px;height:140px" src="' + item.map_image_url + '" alt="<?php echo character_limiter($module->title, 80);?>"/>' + '<h3>' + item.name_point + '</h3>' + '<span>' + item.description_point + '</span>' + '<a href="' + item.url_point + '" class="btn btn-primary"><?php echo trans('
                    0177 ');?></a>' + '</div>',
                    disableAutoPan: !0,
                    maxWidth: 0,
                    pixelOffset: new google.maps.Size(40, -190),
                    closeBoxMargin: '0px -20px 2px 2px',
                    closeBoxURL: "<?php echo $theme_url; ?>assets/img/close.png",
                    isHidden: !1,
                    pane: 'floatPane',
                    enableEventPropagation: !0
                })
            }
        });
    </script>
    <?php } ?>
</div>
<!-- map -->

i want you guys to show me how i can make that happend and what i need to edit in this code to let the map loaded when user visit the page automatically i'm sure i need to edit

$('#collapseMap').on('shown.bs.collapse', function(e){

but i don't know how! thank you

Answer 1

If I've understood you correctly, you should change

  $('#collapseMap').on('shown.bs.collapse', function(e) {
       //some code
  });

to

  $(document).ready(function() {
       //some code
  });

so the code that shows the map will run as soon as DOM loads, not when the button is clicked ('shown.bs.collapse' is fired, to be more precise).

Edit: Another way would be to add these lines to your page template:

<script>
    $(document).ready(function() {
        $('#collapseMap').trigger('shown.bs.collapse');
    });
</script>

So the event which is supposedly being fired when the button is clicked will fire as soon as DOM loads.