CODEWITHSUNDEEP
javascriptjquerygoogle-mapstwitter-bootstrapmodal-dialog
soft genic
soft genic

Reputation: 2056

Google map modal issue

I am trying to display google map into the Twitter bootstrap modal. When user first click on the button Show map then he is able to see the map successfuly as i am generating the map onclick() function but when he closes the modal and reopen it then the map doesnot show properly and 90% part of the map goes grey like following

enter image description here

I even try this workaround that remove that whole div in which the map is bind and regenerate it but that trick doesnot work too kindly let me know how can i resolve my issue.

Following is my js function which i am calling onclick event of show map

function mapp()
{

//google.maps.event.trigger(map, "resize");
  //$("#map_google_canvas").empty();
$("#map_google_canvas").remove();

$("#crmap").append("<div id='map_google_canvas'></div>")


    var myOptions = {
        center: new google.maps.LatLng(54, -2),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_google_canvas"), myOptions);

        var addressArray = new Array("London, United Kingdom", "London Road, Brentwood, United Kingdom", "Brentwood, United Kingdom");


    var geocoder = new google.maps.Geocoder();

    var markerBounds = new google.maps.LatLngBounds();

    for (var i = 0; i < addressArray.length; i++) {
        geocoder.geocode({
            'address': addressArray[i]
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                markerBounds.extend(results[0].geometry.location);
                map.fitBounds(markerBounds);
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }


}

Kindly help,

Thanks

Upvotes: 11

Views: 17984

Answers (10)

Ocool Sanni
Ocool Sanni

Reputation: 39

well this is how the answers above helped but I had to call the main function using onclick .

<span data-target="#enlargeModal"data-toggle="modal" onclick="newMap()" class="fa fa-expand r"></span>

function newMap()

{

function showMap() {

//your map function

} 

    $('#enlargeModal').on('shown.bs.modal', function () {
          var center = fullmap.getCenter();
          google.maps.event.trigger(fullmap, 'resize');
          fullmap.setCenter(center);
    });

showMap(); }

Upvotes: 0

Peter.Wang
Peter.Wang

Reputation: 2211

I will use uiGmapIsReady wait the dom ready then force the map resize:

uiGmapIsReady.promise().then(function () {
    var map = $scope.map.control.getGMap();
    google.maps.event.trigger(map, 'resize');
});

Upvotes: 0

Carlo S
Carlo S

Reputation: 983

I solved this issue thanks to user1012181 answer. I also personally like this pure CSS solution.

div#myModalMap.modal.fade.in{    
    visibility: visible;
}

div#myModalMap.modal.fade{
    display: block;
    visibility: hidden;
}

Upvotes: 1

zufrieden
zufrieden

Reputation: 29

Since you are loading the map in a non-yet-defined width element you have this solution.

You should trigger a resize event on google.maps after initialize map with latlong

$('.modal').on('shown', function () {
  // also redefine center
  map.setCenter(new google.maps.LatLng(54, -2));
  google.maps.event.trigger(map, 'resize');
})

Upvotes: 1

Manoz
Manoz

Reputation: 6587

I also had this issue and came up with this easy solution.

Wait until your modal is completely loaded and then set the timeOut event on map function.

$('#MyModal').on('loaded.bs.modal',function(e){
   setTimeOut(GoogleMap,500);
});

I am very sure It will work out in all cases.

Upvotes: 0

Jason Saruulo
Jason Saruulo

Reputation: 1897

If you are using bootstrap 3 you have to do this:

function showMap() {
        var mapOptions = {
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
            mapOptions);
        $('#mapmodal').on('shown.bs.modal', function () {
              google.maps.event.trigger(map, 'resize');
              map.setCenter(new google.maps.LatLng(54, -2));
            });
        $('#mapmodal').modal("show");
}

Also make sure that you did not set any max-width or max-height value to img - tags. If you did so in your css style sheet put this at the end of it:

#map img{
    max-width:none;
    max-height:none;
}

I am not quiete sure whether it is neccessary but setting a height value to the div holding your map should be a good thing:

<div id="map" style="height:400px"></div>

I assembled this from several stackoverflow discussions.

Upvotes: 3

user1012181
user1012181

Reputation: 8726

The visibility:hidden and visibility:visible could be used instead of display:none and display:block. This worked for me. You can even edit the CSS of the modal for this.

Upvotes: 1

SSR
SSR

Reputation: 6438

I had the same issue. but I found an issue with modal shown event. as its not working with some version of issue so I just follow the bootstrap modal documentation to achieve it.

Bootstrap Modal Map Issue Solution :

$(document).ready(function(){
  $('#locationMap').on('shown.bs.modal', function(){
    google.maps.event.trigger(map, 'resize');
    map.setCenter(new google.maps.LatLng(-33.8688, 151.2195));
  });
});

Finally This works for me, It could help to someone.

Upvotes: 4

codeepic
codeepic

Reputation: 4102

If you are using Angular, you should use $timeout instead of setTimeout. Wrapping a function with a $timeout set to 0 will ensure that the wrapped function is executed after the current execution context is finished. In your situation Google Maps API will only repaint the map after modal and the element holding the map are fully rendered. You won't see any grey areas.

$timeout(function () {
    google.maps.event.trigger(map, 'resize');
    map.setCenter(new google.maps.LatLng(53.5085011, -6.2154598););
}, 0);

Upvotes: 1

Timbergus
Timbergus

Reputation: 3253

I am working with Angular, and what has just worked for me, on the ui.bootstrap.collapse AngularUI directive is to use a timeout. This directive has the same problem as the modals because the map size is not defined until the new view is fully load, and the map appears with grey zones. What I have done is to add this code to the button that opens the collapsed content. Maybe you can adapt it to your case with the button that opens the modal.

window.setTimeout(function () {
    google.maps.event.trigger(map, 'resize')
}, 0);

Hope it helps.

Upvotes: 4

Related Questions