javascript - issues w/ centering google map in bootstrap3 modal... keeps changing -
hi , help. have bootstrap 3 page put google map modal. after tweaking , research, reading able map show, correctly in desktop , mobile formats (map fill modal no grey, not break out of modal in responsive etc.) last issue find center marker not center inside frame after render time. after page reload map appear correctly, sometimes, not. in chrome, firefox, mozilla , opera test browsers. hours , hours spent on please.
here's code:
html
<!-- google map in modal --> <!-- button trigger modal --> <p><a href="#mapmodals" data-toggle="modal" role="button" data-target="#mapmodal" class="btn btn-primary"><b>map satori spa</b></a></p> <!-- maps --> <div class="modal fade" id="mapmodal" tabindex="-1" role="dialog" aria-labelledby="#mapmodal" aria-hidden="true"> <div class="modal-dialog modal-lg""> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" style="color:#000;">satori spa massage - encino ca.</h4> </div> <div class="modal-body"> <div id="map-container"></div> </div> <div class="modal-footer"> <button type="button" class="close" data-dismiss="modal">close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> js @ bottom of page
<!-- google map in modal --> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type='text/javascript'> var var_map; var var_location = new google.maps.latlng(34.158540,-118.493270); function map_init() { var var_mapoptions = { center: new google.maps.latlng( 34.158540, -118.493270 ), zoom: 11, maptypeid: google.maps.maptypeid.roadmap, maptypecontrol: true, pancontrol:false, rotatecontrol:false, streetviewcontrol: true, }; var_map = new google.maps.map(document.getelementbyid("map-container"), var_mapoptions); var contentstring = '<div id="mapinfo">'+ '<p style=" font-size:12px; line-height:14px; color:#000;"><strong>satori spa massage</strong><br>'+ '16545 ventura blvd suite 27<br>' + 'encino, california,<br>91436 usa<br>'+ 'p: (818) 907-9967</p>'+ '<a href="http://www.satorispamassage.com" target="_blank">plan visit</a>'+ '</div>'; var var_infowindow = new google.maps.infowindow({ content: contentstring }); var var_marker = new google.maps.marker({ position: var_location = new google.maps.latlng(34.158540,-118.493270), map: var_map, title:"click information satori spa massage in encino", maxwidth: 200, maxheight: 200 }); google.maps.event.addlistener(var_marker, 'click', function() { var_infowindow.open(var_map,var_marker); }); } google.maps.event.adddomlistener(window, 'load', map_init); //start of modal google map $('#mapmodal').on('shown.bs.modal', function () { google.maps.event.trigger(var_map, "resize"); map.setcenter(new google.maps.latlng(34.158540, -118.493270)); initialize(); }); </script> live page here @ satorispamassage.com again , appreciated.
the basic issue call method setcenter of map , name of variable var_map.
another issue: may happen opens modal before map has been created, test variable before access it:
//start of modal google map $('#mapmodal').on('shown.bs.modal', function () { //test if map has been created if(var_map){ google.maps.event.trigger(var_map, "resize"); var_map.setcenter(new google.maps.latlng(34.158540, -118.493270)); } }); (also removed call of initialize, there no such function)
Comments
Post a Comment