1000k/description.md

## description.md

      
    Raw
  

              description.md
            
          
    This code is for the problem of jQuery Mobile using Google Maps API.
When there are the window placed Google Maps (gmap1.html) and Form (gmap2.html), the Map is not rendered after the following transition:

Access to 'gmap1.html' -- Google Maps shows correctly.
Move to 'gmap2.html' with a tag link.
Back to 'gmap1.html' with clicking 'submit' button.
'gmap1.html' shown but Google Maps doesn't show.

To fix it, use $.mobile.ajaxEnabled = false; option.
Problem is this aid disables all Ajax functions. Unfortunatel, I have no idea anything else.

For more information, refer the following article:
jQM + Google Maps でマップが表示されない時の対処法 | 1000g. (Japanese only)

  
## gmap1.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>page 1</title>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

    <script type="text/javascript" charset="utf-8">
var lat = 35.69155205242442,
    lng = 139.7027329864502;

$("#page1").live("pageshow", function() {
  var latlng = new google.maps.LatLng(lat, lng);
  var myOptions = {
    zoom: 12,
    center: latlng,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map($("#map_canvas")[0], myOptions);
})

// Delete the comment out to fix the problem.
// $.mobile.ajaxEnabled = false;
    </script>

    <style type="text/css" media="screen">
        #map_canvas { height:500px; width:500px; }
    </style>
</head>

<body>
    <div data-role="page" data-theme="a" id="page1">
        <div data-role="content">
            <div id="map_canvas"></div>
            <a href="gmap2.html" data-role="button" data-rel="dialog">Go to gmap2.html</a>
        </div>
    </div>
</body>
</html>

## gmap2.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>page 2</title>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
// Delete the comment out to fix the problem.
// $.mobile.ajaxEnabled = false;
    </script>
</head>
<body>
    <div data-role="dialog" data-theme="a" id="page2">
        <form name="search" action="gmap1.html" method="post">
            <input type="text" name="dummy" value="dummy">
            <input type="submit" value="submit">
            </form>
        </form>

        <a href="gmap1.html" data-role="button" data-rel="back">back to gmap1.html</a>
    </div>
</body>
</html>
	<!DOCTYPE HTML>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>page 1</title>
	<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

	<script type="text/javascript" charset="utf-8">
	var lat = 35.69155205242442,
	lng = 139.7027329864502;

	$("#page1").live("pageshow", function() {
	var latlng = new google.maps.LatLng(lat, lng);
	var myOptions = {
	zoom: 12,
	center: latlng,
	disableDefaultUI: true,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	map = new google.maps.Map($("#map_canvas")[0], myOptions);
	})

	// Delete the comment out to fix the problem.
	// $.mobile.ajaxEnabled = false;
	</script>

	<style type="text/css" media="screen">
	#map_canvas { height:500px; width:500px; }
	</style>
	</head>

	<body>
	<div data-role="page" data-theme="a" id="page1">
	<div data-role="content">
	<div id="map_canvas"></div>
	<a href="gmap2.html" data-role="button" data-rel="dialog">Go to gmap2.html</a>
	</div>
	</div>
	</body>
	</html>