<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Map地圖</title>
<link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css">
<script src="jquery.mobile-1.4.2/jquery-1.9.1.min.js"></script>
<script src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script>

 

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<style>
        #googleMap {
        margin: 0 auto;
        width: 640px;
        height: 480px;
        border: 5px solid #FFF;
        border-radius: 5px;
        box-shadow: 2px 2px 2px 2px #666;
}
</style>

<script language="Javascript">
        $(function(){
        // 以該點為中心顯示地圖
        var map01 = document.getElementById("googleMap");
        // 取得目前定位點(可以先到google地圖找到目的地的經緯度(按滑鼠右鍵→這是哪裡,即可取得)
        var latlng1 = new google.maps.LatLng(25.017500, 121.539561); 
        var gmap = new google.maps.Map(map01, {
                zoom:14,
                center: latlng1,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
        });
</script>

</head>

<body>
<div data-role="page" id="page">
<div data-role="content" id="googleMap"></div>
</div>
</body>
</html>