google map Phonegap cordova ไม่แสดงในโทรศัพท์

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา google map Phonegap cordova ไม่แสดงในโทรศัพท์

google map Phonegap cordova ไม่แสดงในโทรศัพท์

ช่วยดูโค้ดให้ผมหน่อยครับ..ไม่รู้ว่าส่วนไหนผิด app ที่ผมเขียนในส่วนของแผนที่จึงไม่แสดงในโทรศัพท์
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
code html
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"/>
	<link rel="stylesheet" href="css/map.css"/>
	<script src="js/jquery-2.1.4.min.js"></script>
	<script src="js/jquery.mobile-1.4.5.min.js"></script>
	<script type="text/javascript" src="js/map.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?&sensor=false"></script>
</head>

<body>

	<div data-role="page" id="map">

		<div data-role="panel" id="mypanel" data-display="overlay">
			<ul data-role="listview" data-inset="false">
				<li style="background-color: gray; color:#fff">Menu</li>
				<li data-icon="home"><a href="index.html" rel="external" data-transition="slide">Home</a></li>
				<li data-icon="location"><a href="map.html" rel="external" data-transition="slide">Traffic</a></li>
				<li data-icon="camera"><a href="cctv.html" rel="external" data-transition="slide">CCTV</a></li>
				<li data-icon="info"><a href="news.html" rel="external" data-transition="slide">NEWS</a></li>
				<li data-icon="phone"><a href="hotline.html" rel="external" data-transition="slide">Hotline</a></li>
				<li data-icon="navigation"><a href="shortcut.html" rel="external" data-transition="slide">Shortcut</a></li>
				<li data-icon="cloud"><a href="#" onclick="window.open('http://203.155.220.231/radar/pics/radar.jpg', '_system', 'location=no');" rel="external" data-transition="slide">Rain Radar</a></li>
				<li data-icon="delete"><a href="#" data-rel="close">Close Menu</a></li>
			</ul>
		</div>

        <div data-role="header" data-add-back-btn="true" data-position="fixed">
			<h1>Traffic</h1>
			<a href="#mypanel" data-icon="bars" data-iconpos="notext"></a>
			<a href="map.html" rel="external" data-icon="user" data-iconpos="notext"></a>
		</div>

        <div data-role="content" id="map_canvas">

		</div>

        <div data-role="footer" data-position="fixed"><h1><a><img src="img/traffic.png"></a></h1></div>

    </div>
	<script type="text/javascript" src="cordova.js"></script>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
code javascript
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

$(document).on('pageinit', "#map", function () {
	navigator.geolocation.getCurrentPosition(showPosition, positionFail);
});
function showPosition(position) {
	var lat = position.coords.latitude;
	var long = position.coords.longitude;
	var currentPosition = new google.maps.LatLng(lat, long);
	var mapOptions = {
        center: currentPosition,
        zoom: 14,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.LEFT_TOP
        },
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), 
        mapOptions
    );
	var trafficLayer = new google.maps.TrafficLayer();
		trafficLayer.setMap(map);
	var marker = new google.maps.Marker({
        position: currentPosition,
        map: map,
    });
}
function positionFail() {
	window.setTimeout(function(){
		$.mobile.loading('show', {
			textonly: true, 
			textVisible: true,
			text: "Loading Failed"
		});
	});
}

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
code css
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

#map, #map_canvas { width: 100%; height: 100%; padding: 0; }

Blackboy 124.122.102.xxx 11-10-2015 03:04:04

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ลองดูเนื้อหานี้เป็นแนวทาง

แสดง google map ใน jQuery Mobile ตอนที่ 9

https://www.ninenik.com/content.php?arti_id=507 via @ninenik

บางทีเราต้อง delay การแสดงผลแผนที่ด้วย setTimeout

        setTimeout(function(){ // ตั้งเวลาหน่วง หรือ delay การเรียกใช้งาน ฟังก์ชั่นแสดงแผนที่  
        initialize();   // ฟังก์ชั่นแสดงแผนที่        
        },3000); // กำหนดเวลาหน่วง 3 วินาที่ , 1000 เท่ากับ 1 วินาที

ninenik 1.47.41.xxx 11-10-2015

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน