CODEWITHSUNDEEP
google-mapsjquery-uitwitter-bootstrap-3bootstrap-modal
Shashidhar
Shashidhar

Reputation: 191

Google map is not displaying on bootstrap modal popup

map is not displaying on bootstrap modal popup.

Modal popup is coming with blank page, How to display a map inside it. I added all the scripts files and css files. Help me out!

HTML

<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: 400px;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
// button 
<td><a href="#" onclick="loadMap('@callinfo.latitude','@callinfo.longitude')" data-toggle="modal" data-target="#myModal"><i class="fa fa-map-marker"></i></a></td>

JS

<script>
    function loadMap(lat, lon) {
      var mapOptions = {
        center: new google.maps.LatLng(lat, lon),
        zoom: 15,
        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(lat, lon)
    });
    marker.setMap(map);
    }

    //show map on modal
$('#myModal').on('shown.bs.modal', function (lat, lon) {     
    loadMap(lat, lon);
});
</script>

Upvotes: 0

Views: 695

Answers (1)

k.liakos
k.liakos

Reputation: 669

First of all remove the onclick attr from the a element.

The loadMap method should only run once, and this will be done from the shown.bs.modal event.

But this event function does not take the lat & lon as arguments.

Add lat & lon as data attributes on some element, for example the map_canvas div:

<div id="map_canvas" data-lat="@callinfo.latitude" data-lon="@callinfo.longitude" style="width:auto; height: 400px;"></div>

Then retrieve these values in the shown.bs.modal event like this:

$('#myModal').on('shown.bs.modal', function () {     
    loadMap($("#map_canvas").attr("data-lat"), $("#map_canvas").attr("data-lon"));
});

Upvotes: 1

Related Questions