Search code examples
htmlangularjsgoogle-mapsonsen-ui

how to refresh previous page on <ons-back-button> click


Hello i am working on onsen ui with angularjs and have made a demo app which includes google maps,All things were working smootly,But after testing i found an issue on ons-back-button,Please see the case,I have page1 which containc google maps and when page loaded first time map is completely loaded fine,but from page1 when i navigate to page2 and returns back to page1 using (ons-back-button) ,my map broken and never loaded..I have wasted my 3 days in solving this,with no luck,can anyone please help me how to solve it,my code is: html

<div class="mapclass">
                <ons-row class="app-map">   
                    <ons-col> 
                        <map zoom="11" center="[{{lat}}, {{lng}}]" 
                             draggable: false >
                            <info-window id="marker-info" >
                                <div class="mpopup-wrap" style="padding: 0; width: 250px;">
                                    <div class="mpopup-box">
                                        <strong class="title">{{ infoWindow.title}}</strong>
                                        <img src="{{mapimg}}" style="float: left; width: 80px; height: 53px; margin-right: 5px;" />
                                        <span class="info">
                                            <i class="fa fa-map-marker"></i>
                                            {{infoWindow.loc}}
                                        </span>
                                        <span class="info">
                                            <i class="fa fa-home"></i>
                                            {{infoWindow.content}}
                                        </span>
                                    </div>
                                </div>
                            </info-window>
                            <marker ng-repeat="(id, marker) in markers" id="{{ id}}" 
                                    position="[{{lat}}, {{lng}}]"
                                    title= "hello"
                                    visible="true"
                                    on-click="showMarker(event, $index)" >
                            </marker>
                        </map>
                    </ons-col>
                </ons-row>
            </div>

Solution

  • Try using prepop or postpop to execute or reload the goole maps.

    Onsen docs (prepop, postpop)