google map appear with grey inside modal in bootstrap

Question

I use "Bootstrap v3.3.5 (http://getbootstrap.com) Copyright 2011-2015 Twitter, Inc. " for my site and i want to add google-map. I run this code, and all maps is grey. I dont understand why this not work with modal. Can someone help me?

I also have included <script src="https://maps.googleapis.com/maps/api/js"></script>.

HTML:

<body>
  <a class="openmodal" href="#contact" data-toggle="modal" data-id="Peggy Guggenheim Collection - Venice">Contact</a>
  <div class="modal fade" id="contact" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content" id="back">
        <div class="modal-header">
        <h4>Contact<h4>
      </div>
      <div class="modal-body">
        <div id="map"></div>
      </div>
      <div class="modal-footer">
        <a class="btn btn-default" data-dismiss="modal">Close</a>
      </div>
  </div>
</div>

JS:

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
  function initialize() {
    var mapCanvas = document.getElementById('map');
    var mapOptions = {
      center: new google.maps.LatLng(44.5403, -78.5463),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions)
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

CSS:

#map {
  width: 500px;
  height: 400px;
}

Adding the version of bootstrap you are using might help the other find your answer — dvhh, Aug 26 '15 at 01:36
i found this similar "http://stackoverflow.com/questions/11742839/showing-a-google-map-in-a-modal-created-with-twitter-bootstrap". the solution was adding $("#contact-modal").on("shown.bs.modal", function () { google.maps.event.trigger(map, "resize"); }); but how and where added this? — GomuGomuNoRocket, Aug 26 '15 at 02:02

score 13 · Accepted Answer · answered Aug 26 '15 at 09:13

13

Here is the code above in a working fiddle -> http://jsfiddle.net/wgur1z7n/ ^{(bootstrap 3.3.5)}

Trigger the google maps resize event after the modal is shown :

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

answered Aug 26 '15 at 09:13

davidkonrad

83,997
17
205
265

i got an error as `map` is not defined, so replaced the code as ` $('#map-location').on('shown.bs.modal', function () { loadMap(); });` then the map is shown properly. – Pranesh Janarthanan Nov 22 '17 at 10:29
after a postback, the issue still persists. I will add the startup script to prevent the grey map issue. – Pranesh Janarthanan Nov 22 '17 at 10:53
@Vijayaraghavan, the order of factors does not matter - if you for some reason not have initialized the map beforehand, you must do that when the modal is shown. Whatever you do it is not the main issue, the issue is that a map attached to a hidden container must be refreshed/realigned/updated in order to reflect the dimensions of the container. That goes for modals, tabs etc. – davidkonrad Nov 22 '17 at 15:02

score 0 · Answer 2 · answered Sep 10 '17 at 18:25

Triggering "resize" did not work for me. The map showed up, but with wrong coordinates and wrong zoom level. You probably have an initMap function on your page. This worked for me:

<script>
    $('#myModal').on('shown.bs.modal', function () {
        initMap();
    });
</script>

score -1 · Answer 3 · answered Jan 08 '18 at 17:10

Try this rookie solution

<!DOCTYPE html>
<html>

<head>
    <title>Place Autocomplete</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=yes">
    <meta charset="utf-8">
    <style>
    #map {
        height: 450px;
        width: 1080px;
    }

    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .controls {
        margin-top: 10px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 300px;
    }

    #pac-input:focus {
        border-color: #4d90fe;
    }

    .pac-container {
        font-family: Roboto;
    }

    #type-selector {
        color: #fff;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
    }

    #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
    }

    .modal {
        display: block;

        z-index: 1;
        padding-top: 20px;
        padding-bottom: 20px width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
    }

    .modal-content {

        background-color: #fefefe;
        margin-left: 60px;
        margin-bottom: 20px;
        padding: 0;
        border: 1px solid #888;
        width: 90%;
        height: 90%;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 4s;
        animation-name: animatetop;
        animation-duration: 4s
    }

    @-webkit-keyframes animatetop {
        from {
            top: -900px;
            opacity: 0
        }
        to {
            top: 0;
            opacity: 1
        }
    }

    @keyframes animatetop {
        from {
            top: -900px;
            opacity: 0
        }
        to {
            top: 0;
            opacity: 1
        }
    }

    .close {
        color: white;
        float: right;
        font-size: 40px;
        font-weight: bold;
        margin-top: 10px;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    .modal-header {
        padding: 2px 16px;
        background-color: #a8c9ff;
        color: white;
    }

    .modal-body {
        padding: 2px 16px;
        background-color: white;
        color: black;
    }

    .modal-footer {
        padding: 2px 16px;
        background-color: #a8c9ff;
        color: white;
    }
    </style>
</head>

<body onload="clr()">
    <div>
        <div id='myModal' class='modal'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <span onclick='cl()' class='close' style="border: 2px; border-color: black">OK</span>
                    <h2>Search location and click OK</h2>
                    <h4 style="color: red">Note : If map dosen't load propery Click <a href="javascript:;" onclick="ref()">here</a>!   (Click on location to select or Drag marker to position.)</h4></div>
                <div class='modal-body'>
                    <input id="pac-input" class="controls" type="text" placeholder="Enter a location">
                    <div id="type-selector" class="controls">
                        <input type="radio" name="type" id="changetype-all">
                        <label for="changetype-all">All</label>
                        <input type="radio" name="type" id="changetype-establishment">
                        <label for="changetype-establishment">Establishments</label>
                        <input type="radio" name="type" id="changetype-address">
                        <label for="changetype-address">Addresses</label>
                        <input type="radio" name="type" id="changetype-geocode" checked="checked">
                        <label for="changetype-geocode">Geocodes</label>
                    </div>
                    <div id="map" style="position: none"></div>
                </div>
                <div class='modal-footer'></div>
            </div>
        </div>
        <div style="">
            <input type="button" onclick="notifi()" id="btn" value="Show map">
            <input type="text" style="width: 400px" id="Location" placeholder="Choose location from map..." disabled="">
        </div>
    </div>
    <script>
    function initMap() {
        var $Location = document.getElementById('Location');

        var map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: -33.8688, lng: 151.2195 },
            zoom: 13
        });
        google.maps.event.trigger(map, 'resize');
        var input = /** @type {!HTMLInputElement} */ (
            document.getElementById('pac-input'));
        var types = document.getElementById('type-selector');
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
        var autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo('bounds', map);
        var infowindow = new google.maps.InfoWindow();
        var marker = new google.maps.Marker({
            map: map,
            anchorPoint: new google.maps.Point(0, -29),
            draggable: true
        });
        autocomplete.addListener('place_changed', function() {
            infowindow.close();
            marker.setVisible(false);
            var place = autocomplete.getPlace();
            if (!place.geometry) {

                window.alert("No details available for input: '" + place.name + "'");
                return;
            }

            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);
            }
            marker.setIcon( /** @type {google.maps.Icon} */ ({
                url: place.icon,
                size: new google.maps.Size(71, 71),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(17, 34),
                scaledSize: new google.maps.Size(35, 35)
            }));
            marker.setPosition(place.geometry.location);
            marker.setVisible(true);
            $Location.value = "Latitude : " + place.geometry.location.lat() + "  Longitude : " + place.geometry.location.lng();
            google.maps.event.addListener(marker, 'dragend', function(marker) {
                var latLng = marker.latLng;
                $Location.value = "Latitude : " + latLng.lat() + "  Longitude : " + latLng.lng();

            });
            google.maps.event.addListener(marker, 'click', function(event) {
                $Location.value = "Latitude : " + this.getPosition().lat() + "  Longitude : " + this.getPosition().lng();
            });
            var address = '';
            if (place.address_components) {
                address = [
                    (place.address_components[0] && place.address_components[0].short_name || ''),
                    (place.address_components[1] && place.address_components[1].short_name || ''),
                    (place.address_components[2] && place.address_components[2].short_name || '')
                ].join(' ');
            }
            infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
            infowindow.open(map, marker);
        });


        map.addListener('click', function(e) {
            setTimeout(function() { marker.setPosition(e.latLng); }, 10);
            $Location.value = "Latitude : " + e.latLng.lat() + "  Longitude : " + e.latLng.lng();
            google.maps.event.addListener(marker, 'click', function(event) {
                $Location.value = "Latitude : " + this.getPosition().lat() + "  Longitude : " + this.getPosition().lng();
            });
        });
        marker.addListener('click', function() {

            map.setCenter(marker.getPosition());
        });

        function setupClickListener(id, types) {
            var radioButton = document.getElementById(id);
            radioButton.addEventListener('click', function() {
                autocomplete.setTypes(types);
            });
        }
        setupClickListener('changetype-all', []);
        setupClickListener('changetype-address', ['address']);
        setupClickListener('changetype-establishment', ['establishment']);
        setupClickListener('changetype-geocode', ['geocode']);
    }
    </script>
    <script type="text/javascript">
    var modal = document.getElementById('myModal');
    var span = document.getElementsByClassName("close")[0];
    span.onclick = function() {
        modal.style.display = "none";
    }
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }

    function cl() {

        modal.style.display = "none";
    }

    function notifi() {


        modal.style.display = "block";
        clr();
    }

    function explode() {
        modal.style.display = "none";
    }
    setTimeout(explode, 3000);

    function ref() {
        location.reload();
    }

    function clr() {
        document.getElementById("Location").value = "";
        document.getElementById("pac-input").value = "";
    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPQ7PC_2JN_9jNw4z3N-PIsOtJF6HY-Hs&libraries=places&callback=initMap" async defer></script>
</body>

</html>

google map appear with grey inside modal in bootstrap

3 Answers3

Linked