รัน jquery google api ไม่ขึ้นค่ะ รบกวนช่วยดูให้หน่อยค่ะ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา รัน jquery google api ไม่ขึ้นค่ะ รบกวนช่วยดูให้หน่อยค่ะ

รัน jquery google api ไม่ขึ้นค่ะ รบกวนช่วยดูให้หน่อยค่ะ

รัน google api ไม่ขึ้นเลย ค่ะ
รบกวนผู้รู้ดูให้หน่อยค่ะว่าผิดตรงไหน

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=key_api">
    </script>
    <script type="text/javascript">
 var map;
var marker;
var latitudeTextBox = $("#LatitudeTextBox");
var longitudeTextBox = $("#LongitudeTextBox");

jQuery(document).ready(function () {
    var centerLatlng = new google.maps.LatLng(33.976222, -118.281698);

    var mapOptions = {
        zoom: 10,
        center: centerLatlng,
        scrollwheel: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DEFAULT
        },
        navigationControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.DEFAULT
        }
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    // Edit existing location so that we need to display

    // Display default marker
    marker = new google.maps.Marker({
        draggable: true,
        map: map,
        position: centerLatlng
    });

    // After dragging, updates both Lat and Lng.
    google.maps.event.addListener(marker, 'dragend', function () {
        var curLatLng = marker.getPosition();
        latitudeTextBox.val(curLatLng.lat());
        longitudeTextBox.val(curLatLng.lng());
    });

    google.maps.event.trigger(marker, "click");
});
    </script>
  </head>
  <body>
<div id="map-canvas"></div>
  </body>
</html>

Kainoi927 f('ip_que'))?> 12-10-2014 22:23:33

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

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

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

Pass

Code

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

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

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

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

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

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

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

ตรง Key_api ใส่แล้วนะคะ แต่ก้อยังไม่ขึ้นอ่ะ

<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzBoldXbFohC86Uww8EhvKc-MguuHIk4o">
    </script>

kainoi927 f('ip_ans'))?> 12-10-2014 22:26

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

น่าจะไม่ได้เรียกไฟล์ jquery มาใช้งานลองเพิ่ม

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

แต่ดูแล้วมีการใช้งานแผนที่ไม่ถูกต้อง ลองเข้าไปดู

หรือดูบทความเกี่ยวกับ google map ของเว็บนี้ได้ที่ลิ้งค์นี้ดู

https://www.ninenik.com/google_search.php?tags=google map

ninenik f('ip_ans'))?> 12-10-2014

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

ลองเพิ่มแล้วค่ะ

ก็ยังไม่ได้ เด๋วจะลองหาดูตาม link ที่แนะนำมานะคะ

ขอบคุณค่ะ

kainoi927 f('ip_ans'))?> 12-10-2014 22:46

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

ทำตาม link นี้

https://www.ninenik.com/content.php?arti_id=326

ก็ยังไม่ได้ค่ะ

kainoi927 f('ip_ans'))?> 12-10-2014 22:58

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

จะมีไฟล์ jquery ที่เราต้องเปลี่ยน ตรง

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

เปลี่ยนเป็น

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

ลองเอาโค้ดนี้ไปทดลองดู

<!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 API 3 - 01</title>
<style type="text/css">
html { height: 100% }
body { 
	height:100%;
	margin:0;padding:0;
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas { 
	width:550px;
	height:400px;
	margin:auto;
/*	margin-top:100px;*/
}
</style>


</head>

<body>
  <div id="map_canvas"></div>
 <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">  
  <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">  
    Latitude  
    <input name="lat_value" type="text" id="lat_value" value="0" />  <br />
    Longitude  
    <input name="lon_value" type="text" id="lon_value" value="0" />  <br />
  Zoom  
  <input name="zoom_value" type="text" id="zoom_value" value="0" size="5" />  
  <br />
  <input type="submit" name="button" id="button" value="บันทึก" />  
  </form>  
</div> 
  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>   
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
function initialize() { // ฟังก์ชันแสดงแผนที่
	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	// กำหนดจุดเริ่มต้นของแผนที่
	var my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);
	var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0]; 
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 13, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง
		mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่
	};
	map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
	
	var my_Marker = new GGM.Marker({ // สร้างตัว marker
		position: my_Latlng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
		map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
		draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้
		title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
	});
	
	// กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร
	GGM.event.addListener(my_Marker, 'dragend', function() {
		var my_Point = my_Marker.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
        map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker		
        $("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value
        $("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value 
        $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value
	});		

	// กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
	GGM.event.addListener(map, 'zoom_changed', function() {
		$("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value 	
	});

}
$(function(){
	// โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว
	// ค่าตัวแปร ที่ส่งไปในไฟล์ google map api
	// v=3.2&sensor=false&language=th&callback=initialize
	//	v เวอร์ชัน่ 3.2
	//	sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false
	//	language ภาษา th ,en เป็นต้น
	//	callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize
	$("<script/>", {
	  "type": "text/javascript",
	  src: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});
</script>  
</body>
</html>

ตัวอย่าง

ninenik f('ip_ans'))?> 12-10-2014

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

ขอบคุณมากๆ ค่ะ ได้แล้วค่ะ

kainoi927 f('ip_ans'))?> 12-10-2014 23:10

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

ทำไมมันไม่ขึ้นแผนที่คะ ต้องแก้ยังไง

saranya2532 f('ip_ans'))?> 20-09-2017 16:40

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

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

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