javascript - Google map didn't load in jquery mobile -

I do not know that when I try to display the map on my app it is not working .. Then Gray, but when I ran it on Jsfiddle, everything is fine. I think this is about the page, if I change it to the pageinit, the map is not fully loaded and I have changed all the height and width to 100%, but still have not loaded completely ..

  & lt; Html lang = "n" & gt; & Lt; Top & gt; & Lt; Title & gt; Maps & lt; / Title & gt; & Lt; Link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> & Lt; Script src = "http://code.jquery.com/jquery-1.11.1.min.js" & gt; & Lt; / Script & gt; & Lt; Script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "http://maps.google.com/maps/api/js?v=3&sensor=false&language=en" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" & gt; Var map; Function initialize () {map = new google.maps.Map (document.getElementById ('map_canvas'), {zoom: 7, center: new google.maps.LatLng (38.0457918, 23.7676337), type the map: google.maps.MapTypeId ROADMAP}); Var currentPositionMarker = new google.maps.marker ({status: new google.maps.LatLng (38.0457918, 23.7676337, map: title, "hei"}); } $ (Document) .on ("page", "#info-map", function () {start ();}); & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "original-map" data-role = "page" & gt; & Lt; Div data-role = "header" & gt; & Lt; H1 & gt; & Lt; A data-ajax = "false" href = "/" & gt; Example & lt; / H1> & Lt; / Div & gt; & Lt; Div data-role = "content" & gt; & Lt; P & gt; This paragraph is & lt; / P & gt; & Lt; Ul data-roll = "listview" data-inset = "true" data-split-theme = "b" & gt; & Lt; Li data-role = "list-split" & gt; Maps & lt; / Li & gt; & Lt; Div id = "map_canvas" style = "height: 320px;" & Gt; & Lt; / Div & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

I try to add this code, but the map is fully loaded but the marker is not centered.

  $ (document) .bind ("Page:", function (event, data) {google.maps.event.trigger (map, 'resize');});  

And the other thing is that the title marker is not displayed. Please help.

Reset the center of the map after triggering the resize event.

  $ (document) .bind ("pageshow", function (events, data) {google.maps.event.trigger (map, 'resizing'); map.setCenter (currentPositionMarker. GetPosition ());});  

( map variable, like currentPositionMarker after making the global)