javascript - Google Map in multipage form. -

-

i have multipage form. different pages divided fieldsets, , can navigate between them using buttons. on second fieldset, e.g second "page", i'd have map, , search field can type in address.

the problem map won't show on second "page". if put map outside of form, shows , works intended.

i use hpneo gmaps.js map.

html: 

<fieldset>  <h2 class="fs-title">foo</h2>  <textarea id="" name="" placeholder="" rows="4" cols="50" class=""></textarea>  <input id="" type="" name="" placeholder="" class="" />  <textarea id="" name="" class=""></textarea>  <input id="" type="" name="next" class="next action-button" value="next" /> </fieldset>  <!--page 2--> <fieldset>    <h2 class="fs-title">bar</h2>    <label for="address">address:</label>    <div class="input">    <input type="text" id="address" name="address" />    <input type="submit" class="btn" value="search" />    </div>    <div id="mapcontainer"></div>   </fieldset>

js:

 var map;  $(document).ready(function () {         map = new gmaps({             div: '#mapcontainer',             lat: -12.043333,             lng: -77.028333         });         $('geocoding_form').submit(function (e) {             e.preventdefault();             gmaps.geocode({                 address: $('#address').val().trim(),                 callback: function (results, status) {                     if (status == 'ok') {                         var latlng = results[0].geometry.location;                         map.setcenter(latlng.lat(), latlng.lng());                         map.addmarker({                             lat: latlng.lat(),                             lng: latlng.lng()                         });                     }                 }             });         });

as others have said sizing problem in that, when map initialized, map container has width , height of 0, since hidden. should able round either waiting initialize map until second 'page' shown (i assume have javascript somewhere shows/hides, can attach that) or alternative fire maps resize event when shown.

for project doing had similar problem, except map hidden in bootstrap modal dialog. had problem every time map hidden , shown again after being initialized map go screwy. again due fact when map hidden again map containers height , width 0 again.

to round added 'data-attribute' map container called data-maps-initialized, set false. when modal map in shown fired google maps initialization , set attribute true. when hidden , shown again checked attribute, , if true triggered resize event instead. here's code used

var map; $('#mapsmodal').on('shown.bs.modal', function () {     //if map not initialized     if ($('#gmapscontainer').attr('data-maps-initialized') === 'false') {         initialize();         $('#gmapscontainer').attr('data-maps-initialized', 'true');     } else {         //fire resize event         google.maps.event.trigger(map, 'resize');      } }); function initialize() {     var mapoptions = {         center: new google.maps.latlng(50.74, -2.3),         zoom: 9,         maptypeid: google.maps.maptypeid.hybrid     };     map = new google.maps.map(document.getelementbyid("gmapscontainer"),         mapoptions); }

the $('#mapsmodal').on('shown.bs.modal', function () {... line listener when modal shown/hidden, in case whatever have set shows/hides pages.

please note not saying best way in world of doing things, worked me problem , yours sounds similar!


Comments

Post a Comment

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

-
i used pyinstaller create standalone exe file pyqt project. did not use single file option because exe created single file option takes long open. therefore, pyinstaller created dist folder contains bunch of files including program.exe file. create setup.exe file place contents of dist folder in program directory , create shortcut in start menu , on desktop. want super simple user. maybe setup.exe files when download program cnet. found inno-setup, looks promising. however, not know if there special considerations because program standalone program create python/pyqt program. thanks! have experience task? there program using task not know about? inno-setup or nsis easiest use. tell them files include , put them , create nice installer you. wrote short tutorial on experiences using innosetup might find helpful: http://www.blog.pythonlibrary.org/2008/08/27/packaging-wxpymail-for-distribution/ note tutorial based around wxpython app wrote, concepts same.
Read more

c# - Access objects in UserControl from MainWindow in WPF -

-
i have simple xaml, how can change text property of textblock in usercontrol1 mainwindow ? <window x:class="refactorxaml.mainwindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:refactorxaml="clr-namespace:refactorxaml" title="mainwindow" height="350" width="525"> <grid> <grid.rowdefinitions> <rowdefinition height="100"></rowdefinition> <rowdefinition height="100"></rowdefinition> </grid.rowdefinitions> <grid> <refactorxaml:usercontrol1></refactorxaml:usercontrol1> </grid> <grid grid.row="1"> <button>change text</button> </grid> </grid> </window> <usercon...
Read more

javascript - How to name a jQuery function to make a browser's back button work? -

-
i'm trying write function ajaxyfy web site, works perfect, except function button. that's have now: function loading() { if (typeof history.pushstate !== "undefined") { var historycount = 0; $('.menu-item, .logo').on('click','a',function(e){ e.preventdefault(); $(this).data('clicked', true); if ($(this).is('.logo a')) { var homepage = $(this).attr('href'); function1(homepage); history.pushstate(null, null, homepage); } else if ($(this).is('.projects a')) { var projects = $(this).attr('href'); function2(projects); history.pushstate(null, null, projects); } else { var pages = $(this).attr('href'); function3(pages); history.pushstate(null, null, pages); ...
Read more