วิธีการเพิ่ม Google Map ไปยังเว็บเพจของคุณ

01 จาก 05

รับคีย์ Google Maps API สำหรับเว็บไซต์ของคุณ

วิธีที่ดีที่สุดในการเพิ่มแผนที่ Google ในเว็บไซต์ของคุณคือการใช้ Google Maps API และ Google ขอแนะนำให้คุณได้รับคีย์ API เพื่อใช้แผนที่

คุณไม่จำเป็นต้องได้รับคีย์ API เพื่อใช้ Google Maps API v3 แต่จะมีประโยชน์มากเนื่องจากช่วยให้คุณสามารถตรวจสอบการใช้งานของคุณและจ่ายเงินสำหรับการเข้าถึงเพิ่มเติม Google Maps API v3 มีโควต้า 1 คำขอต่อวินาทีต่อผู้ใช้สูงสุด 25,000 คำขอต่อวัน หากหน้าเว็บของคุณเกินขีด จำกัด ดังกล่าวคุณจะต้องเปิดใช้การเรียกเก็บเงินเพื่อให้ได้รับมากขึ้น

วิธีรับคีย์ Google Maps API

1. ลงชื่อเข้าใช้ Google โดยใช้บัญชี Google ของคุณ
2. ไปที่คอนโซลนักพัฒนาซอฟต์แวร์
3. เลื่อนดูรายการและค้นหา Google แผนที่ API v3 แล้วคลิกปุ่ม "ปิด" เพื่อเปิดใช้งาน
4. อ่านและยอมรับเงื่อนไข
5. ไปที่คอนโซล API แล้วเลือก "API Access" จากเมนูด้านซ้าย
6. ในส่วน "การเข้าถึง API แบบง่าย" คลิกที่ปุ่ม "สร้างคีย์เซิร์ฟเวอร์ใหม่ ... "
7. ป้อนที่อยู่ IP ของเว็บเซิร์ฟเวอร์ของคุณ นี่คือ IP ที่คำขอ Maps ของคุณจะมาจาก ถ้าคุณไม่รู้จักที่อยู่ IP ของคุณคุณสามารถดูได้
8. คัดลอกข้อความในบรรทัด "API key:" (ไม่รวมชื่อดังกล่าว) นี่คือคีย์ API สำหรับแผนที่ของคุณ

02 จาก 05

แปลงที่อยู่ของคุณเป็นพิกัด

ในการใช้ Google แผนที่บนหน้าเว็บของคุณคุณต้องมีเส้นรุ้งและเส้นแวงสำหรับสถานที่ คุณสามารถหาข้อมูลเหล่านี้จาก GPS หรือคุณสามารถใช้เครื่องมือออนไลน์เช่น Geocoder.us เพื่อบอกคุณได้

1. ไปที่ Geocoder.us และพิมพ์ที่อยู่ของคุณลงในช่องค้นหา
2. คัดลอกหมายเลขแรกของละติจูด (โดยไม่มีตัวอักษรด้านหน้า) และวางลงในไฟล์ข้อความ คุณไม่จำเป็นต้องใช้ตัวบ่งชี้องศา (º)
3. คัดลอกหมายเลขแรกสำหรับลองจิจูด (อีกครั้งโดยไม่มีตัวอักษรด้านหน้า) และวางลงในไฟล์ข้อความของคุณ

ละติจูดและลองจิจูดของคุณจะมีลักษณะดังนี้:

40.756076
-73.990838

Geocoder.us ใช้ได้กับที่อยู่ในสหรัฐอเมริกาเท่านั้นหากต้องการรับพิกัดในประเทศอื่นคุณควรค้นหาเครื่องมือที่คล้ายกันในภูมิภาคของคุณ

03 จาก 05

การเพิ่มแผนที่ไปยังเว็บเพจของคุณ

ขั้นแรกเพิ่มสคริปต์แผนที่ไปที่

ของเอกสารของคุณ

เปิดหน้าเว็บของคุณและเพิ่มข้อมูลต่อไปนี้ลงใน HEAD ของเอกสาร

เปลี่ยนส่วนที่ไฮไลต์เป็นตัวเลขละติจูดและลองจิจูดที่คุณเขียนลงในขั้นตอนที่สอง

ประการที่สองเพิ่มองค์ประกอบแผนที่ลงในหน้าเว็บของคุณ

เมื่อคุณมีองค์ประกอบสคริปต์ทั้งหมดที่เพิ่มเข้าไปใน HEAD ของเอกสารแล้วคุณจะต้องวางตำแหน่งแผนที่ไว้บนหน้า คุณทำได้โดยการเพิ่มองค์ประกอบ DIV ด้วยแอตทริบิวต์ id = "map-canvas" ผมขอแนะนำให้คุณเลือกสไตล์นี้ด้วยความกว้างและความสูงที่พอดีกับหน้าเว็บของคุณ:

สุดท้ายอัปโหลดและทดสอบ

สิ่งสุดท้ายที่ต้องทำคืออัปโหลดหน้าเว็บและทดสอบว่าแผนที่ของคุณแสดงขึ้น นี่เป็นตัวอย่างแผนที่ Google บนหน้าเว็บ หมายเหตุเนื่องจากวิธีการที่ About.com CMS ทำงานคุณจะต้องคลิกลิงก์เพื่อให้แผนที่แสดงขึ้น กรณีนี้จะไม่ปรากฏบนเพจของคุณ

หากแผนที่ของคุณไม่ปรากฏขึ้นให้ลองเริ่มต้นใช้งานด้วยแอตทริบิวต์ BODY:

onload = "initialize ()" >

สิ่งอื่น ๆ เพื่อตรวจสอบว่าแผนที่ของคุณไม่ได้โหลดมีดังนี้

• มองหาการพิมพ์ผิดใน JavaScript รวมทั้งกรณี JavaScript คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
• ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่าตัวเลือกการซูมและศูนย์
• ตรวจสอบว่าองค์ประกอบ DIV อยู่ในหน้าเว็บที่มีรหัสที่ถูกต้อง
• ตรวจสอบว่าองค์ประกอบ DIV มีความสูง

04 จาก 05

เพิ่ม Marker ในแผนที่ของคุณ

แต่สิ่งที่ดีคือแผนที่ของสถานที่ของคุณหากไม่มีเครื่องหมายบอกคนที่พวกเขาควรจะไป?

หากต้องการเพิ่มเครื่องหมายสีแดงมาตรฐานของ Google แผนที่ให้เพิ่มข้อมูลต่อไปนี้ลงในสคริปต์ด้านล่างบรรทัด var map = ... :

var myLatlng = new google.maps.LatLng ( ละติจูดลองจิจูด );
เครื่องหมาย var = new google.maps.Marker ({
ตำแหน่ง: myLatlng,
map: แผนที่,
title: " สำนักงานใหญ่ในอดีตของ About.com "
});

เปลี่ยนข้อความที่เน้นเป็นเส้นรุ้งและเส้นแวงและชื่อที่คุณต้องการให้ปรากฏเมื่อมีคนวางเมาส์เหนือเครื่องหมาย

คุณสามารถเพิ่มเครื่องหมายต่างๆลงในหน้าได้เท่าที่คุณต้องการเพียงเพิ่มตัวแปรใหม่ด้วยพิกัดและชื่อใหม่ แต่ถ้าแผนที่เล็กเกินไปที่จะแสดงเครื่องหมายทั้งหมดพวกเขาจะไม่แสดงจนกว่าผู้อ่านจะซูมออก

var latlng 2 = new google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = new google.maps.Marker ({
ตำแหน่ง: latlng 2 ,
map: แผนที่,
ชื่อ: " Apple Computer "
});

นี่คือตัวอย่างแผนที่ Google ที่มีเครื่องหมาย หมายเหตุเนื่องจากวิธีการที่ About.com CMS ทำงานคุณต้องคลิกลิงก์เพื่อให้แผนที่แสดงขึ้น กรณีนี้จะไม่ปรากฏบนเพจของคุณ

05 จาก 05

เพิ่มแผนที่ที่สอง (หรืออื่น ๆ ) ลงในหน้าเว็บของคุณ

หากคุณได้ดูหน้าแผนที่ Google แผนที่ของฉันแล้วคุณจะสังเกตเห็นว่าฉันมีแผนที่มากกว่าหนึ่งรายการปรากฏอยู่บนหน้า นี้เป็นเรื่องง่ายมากที่จะทำ นี่เป็นวิธีการ

1. ดูเส้นรุ้งและเส้นแวงของแผนที่ทั้งหมดที่คุณต้องการแสดงตามที่เราได้เรียนรู้ในขั้นตอนที่ 2 ของบทแนะนำนี้
2. แทรกแผนที่แรกตามที่เราได้เรียนรู้ในขั้นตอนที่ 3 ของบทแนะนำนี้ ถ้าคุณต้องการให้แผนที่มีเครื่องหมายโปรดเพิ่มเครื่องหมายในขั้นตอนที่ 4
3. สำหรับแผนที่ที่สองคุณจะต้องเพิ่ม 3 บรรทัดใหม่ในสคริปต์การเริ่มต้น () ของคุณ:
   var latlng2 = new google.maps.LatLng ( พิกัดที่สอง );
   var myOptions2 = {ซูม: 18, ศูนย์: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. หากคุณต้องการวางเครื่องหมายบนแผนที่ใหม่ให้เพิ่มเครื่องหมายที่สองซึ่งชี้ไปที่พิกัดที่สองและแผนที่ที่สอง:
   var myMarker2 = new google.maps.Marker ({ตำแหน่ง: latlng2 , map: map2 , title: " ชื่อเครื่องหมายของคุณ "});
5. จากนั้นเพิ่มที่สอง

   ที่คุณต้องการแผนที่ที่สอง และตรวจสอบว่าได้ระบุ ID = "map_canvas_2"

6. เมื่อโหลดหน้าของคุณแผนที่สองแผนที่จะแสดงขึ้น

นี่คือโค้ดของหน้าเว็บที่มีแผนที่ Google สองแบบอยู่: