Google map not showing on download module

Question

I plan to show google map on modal, but map not showing from modal

This is my code:

<div style="margin-top:-7px;"> <button class="btn btn-default pull-right btn-mini " style="margin-right:5px;" data-toggle="modal" data-target="#myModal7"><i class="fa fa-globe"></i> Show Map</button> </div> <div class="modal inmodal fade" id="myModal7" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-md"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Address</h4> </div> <div class="modal-body"> <div class="panel mb25 mt5" style="width:500px; margin:0 auto; padding:10px;"> <div id="map" style="width: 500px; height: 500px;"></div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-white" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> <script type="text/javascript"> var address = 'Japan'; var map = new google.maps.Map(document.getElementById('map'), { zoom: 16 }); var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': address }, function(results, status) { if(status == google.maps.GeocoderStatus.OK) { new google.maps.Marker({ position: results[0].geometry.location, map: map }); google.maps.event.trigger(map, 'resize'); map.setCenter(results[0].geometry.location); } }); </script> 

I did research for this problem, ang got a general answer, google.maps.event.trigger(map, "resize"); the problem is where I put it, please help me.

thanks

Answer 1

The google map has a problem with the parent "display: none".

initialize your card after showing the modal for the first time. add a class for buttons or links that show modal.

 $('.modal-opener-btn').one('click', function(){ //putt your code here }); 

NOTICE: use the "one" and do not use the "on"

NOTICE: You can also use the modal "featured" listener if this solution does not work

 $('#myModal7').on('shown', function(){ //putt your code here }); 

Just change the bottom tag and script contents to:

  <script type="text/javascript"> function init(){ var address = 'Japan'; var map = new google.maps.Map(document.getElementById('map'), { zoom: 16 }); var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': address }, function(results, status) { if(status == google.maps.GeocoderStatus.OK) { new google.maps.Marker({ position: results[0].geometry.location, map: map }); google.maps.event.trigger(map, 'resize'); map.setCenter(results[0].geometry.location); } }); } $('#myModal7').on('shown.bs.modal', function(){ init(); }); </script> 

Answer 2

regarding your research you can try to use this function

inside of this

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

Answer 3

There was the same problem, and it was the solution that made my day: Make sure you have jQuery on the start page that named your modal page: