jquery - Load google map on Modal dialog window not working -
on modal dialog window, google map not loading properly.
when press f12 time map loading.
modal dialog called on onclick label, after modal dialog window loaded.
my html modal
<div class="modal fade" id="modalshowmap" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true" data-backdrop="static"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="mymodallabel">select location</h4> </div> <div class="modal-body"> <div id="dvmap" style="width: 570px; height: 500px"> </div> </div> <div class="modal-footer"> </div> </div> </div> my jquery code
$(document).ready(function () { window.onload = function () { var mapoptions = { center: new google.maps.latlng(18.9300, 72.8200), zoom: 14, maptypeid: google.maps.maptypeid.roadmap }; var infowindow = new google.maps.infowindow(); var latlngbounds = new google.maps.latlngbounds(); var map = new google.maps.map(document.getelementbyid("dvmap"), mapoptions); google.maps.event.addlistener(map, 'click', function (e) { var answer = confirm("are sure?") if (answer) { $('#lat').val(e.latlng.lat()); $('#longitude').val(e.latlng.lng()); $('#modalshowmap').modal("toggle"); } }); google.maps.event.addlisteneronce(map, 'tilesloaded', function () { google.maps.event.addlisteneronce(map, 'tilesloaded', function () { google.maps.event.trigger(map, 'resize'); }); }); } });
i'm not sure how tilesloaded works how did modal
$('#mymodal').on('show.bs.modal', function () { resizemap(); }) function resizemap() { if (typeof map == "undefined") return; var center = map.getcenter(); google.maps.event.trigger(map, "resize"); map.setcenter(center); }
Comments
Post a Comment