i encountering problem in google map using javascript api v 3 using jquery mobile in chrome. on first page map loads fine, , on clicking 1 of marker on map takes me thenext page. page if return using either browswer back or programatically created back button, map still loads fine. problem when on first page force page reload/refresh using refresh button created. after clicking refresh when click on marker go next page, there when return map not rendered properly. whole map renders in tiny version on top left corner. , problem exists on chrome while on firefox works fine.
here code draw map:
<script> $(document).on("pageinit", "#map-page", function(){ .... .... function drawmap(currentlatlng, otherlocations) { var mymapoptions = { center: currentlatlng, // center map current geolocation maptypeid: google.maps.maptypeid.roadmap }; var map = new google.maps.map(document.getelementbyid("map-canvas"), mymapoptions); // add current lat/lng geolocation overlay map center var markercurrentlocation = new markerwithlabel({ position: currentlatlng, map: map, title: "current location!", labelcontent: "current location!", labelanchor: new google.maps.point(22, 0), labelclass: "labels", labelstyle: {opacity: 0.60} }); var iconimage = 'images/bus.png'; // add overlays other locations $.each(otherlocations, function(index, value){ var markerotherlocations = new markerwithlabel({ position: new google.maps.latlng(value.latitude, value.longitude), map: map, title: value.name+" "+value.distance, icon: iconimage, labelcontent: value.name+" "+value.distance, labelanchor: new google.maps.point(50, 0), labelclass: "labels", // css class label labelstyle: {opacity: 0.60} }); google.maps.event.addlistener(markerotherlocations, 'click', function() { $.mobile.changepage("#detail-page", { transition: "flip"} ); }); }); map.fitbounds(latlngbounds); } ... ... }); //the refresh function outside of $(document).on("pageinit") function refreshpage() { $.mobile.changepage( window.location.href, { allowsamepagetransition : true, transition : 'none', showloadmsg : false, reloadpage : true } ); } </script> my jquery mobile multipage template looks this:
the first page map rendered
the mentioned refresh button on header
<div data-role="page" id="map-page" data-url="map-page"> <div data-role="header"> <a href="#" data-role="button" data-icon="bars" data-iconpos="notext">choose station</a> <h1>nextbus application</h1> <a href="javascript:refreshpage();" data-role="button" data-icon="refresh" data-iconpos="notext">refresh</a><!-- problem arises after clicking refresh --> </div><!-- /header --> <div data-role="content" id="map-canvas"> <!--div map display.--> <!--<p>page content goes here.</p>--> </div><!-- /content --> <div data-role="footer" data-id="myfooter" class="ui-bar" data-position="fixed"> <h4>copyright 2013 suyesh amatya</h4> </div><!-- /footer --> </div><!-- /page --> the next page land after clicking marker on first page
the mentioned button on header of page
<div data-role="page" id="detail-page"> <div data-role="header"> <a href="#map-page" data-icon="home" data-iconpos="notext" data-rel="back">back</a> <h1>timings station: </h1> </div> <div data-role="content" > <a href="javascript:somefun();" data-role="button">generate </a> <center> <div id="add_exercise"></div> </center> <input id="add_result" /> <a href="javascript:somefun1();" data-role="button">check</a> </div> <div data-role="footer"> <h1>@copyright</h1> </div> </div>
Comments
Post a Comment