รับคีย์ Google Maps API สำหรับเว็บไซต์ของคุณ
วิธีที่ดีที่สุดในการเพิ่มแผนที่ Google ในเว็บไซต์ของคุณคือการใช้ Google Maps API และ Google ขอแนะนำให้คุณได้รับคีย์ API เพื่อใช้แผนที่
คุณไม่จำเป็นต้องได้รับคีย์ API เพื่อใช้ Google Maps API v3 แต่จะมีประโยชน์มากเนื่องจากช่วยให้คุณสามารถตรวจสอบการใช้งานของคุณและจ่ายเงินสำหรับการเข้าถึงเพิ่มเติม Google Maps API v3 มีโควต้า 1 คำขอต่อวินาทีต่อผู้ใช้สูงสุด 25,000 คำขอต่อวัน หากหน้าเว็บของคุณเกินขีด จำกัด ดังกล่าวคุณจะต้องเปิดใช้การเรียกเก็บเงินเพื่อให้ได้รับมากขึ้น
วิธีรับคีย์ Google Maps API
- ลงชื่อเข้าใช้ Google โดยใช้บัญชี Google ของคุณ
- ไปที่คอนโซลนักพัฒนาซอฟต์แวร์
- เลื่อนดูรายการและค้นหา Google แผนที่ API v3 แล้วคลิกปุ่ม "ปิด" เพื่อเปิดใช้งาน
- อ่านและยอมรับเงื่อนไข
- ไปที่คอนโซล API แล้วเลือก "API Access" จากเมนูด้านซ้าย
- ในส่วน "การเข้าถึง API แบบง่าย" คลิกที่ปุ่ม "สร้างคีย์เซิร์ฟเวอร์ใหม่ … "
- ป้อนที่อยู่ IP ของเว็บเซิร์ฟเวอร์ของคุณ นี่คือ IP ที่คำขอ Maps ของคุณจะมาจาก ถ้าคุณไม่รู้จักที่อยู่ IP ของคุณคุณสามารถดูได้
- คัดลอกข้อความในบรรทัด "API key:" (ไม่รวมชื่อดังกล่าว) นี่คือคีย์ API สำหรับแผนที่ของคุณ
แปลงที่อยู่ของคุณเป็นพิกัด
ในการใช้ Google แผนที่บนหน้าเว็บของคุณคุณต้องมีเส้นรุ้งและเส้นแวงสำหรับสถานที่ คุณสามารถหาข้อมูลเหล่านี้จาก GPS หรือคุณสามารถใช้เครื่องมือออนไลน์เช่น Geocoder.us เพื่อบอกคุณได้
- ไปที่ Geocoder.us และพิมพ์ที่อยู่ของคุณลงในช่องค้นหา
- คัดลอกหมายเลขแรกของละติจูด (โดยไม่มีตัวอักษรด้านหน้า) และวางลงในไฟล์ข้อความ คุณไม่จำเป็นต้องใช้ตัวบ่งชี้องศา (º)
- คัดลอกหมายเลขแรกสำหรับลองจิจูด (อีกครั้งโดยไม่มีตัวอักษรด้านหน้า) และวางลงในไฟล์ข้อความของคุณ
ละติจูดและลองจิจูดของคุณจะมีลักษณะดังนี้:
40.756076-73.990838
Geocoder.us ใช้ได้กับที่อยู่ในสหรัฐฯเท่านั้นหากคุณต้องการได้รับพิกัดในประเทศอื่นคุณควรค้นหาเครื่องมือที่คล้ายกันในภูมิภาคของคุณ
03 จาก 05การเพิ่มแผนที่ไปยังเว็บเพจของคุณ
ขั้นแรกเพิ่มสคริปต์แผนที่ไปที่
ของเอกสารของคุณ
เปิดเว็บเพจของคุณและเพิ่มข้อมูลต่อไปนี้ลงใน หัว ของเอกสารของคุณ
เปลี่ยนส่วนที่ไฮไลต์เป็นตัวเลขละติจูดและลองจิจูดที่คุณเขียนลงในขั้นตอนที่สอง
ประการที่สองเพิ่มองค์ประกอบแผนที่ลงในหน้าเว็บของคุณ
เมื่อคุณเพิ่มองค์ประกอบสคริปต์ทั้งหมดลงใน หัว ของเอกสารของคุณคุณจำเป็นต้องวางตำแหน่งแผนที่ของคุณบนหน้าเว็บ คุณทำได้โดยการเพิ่ม a DIV องค์ประกอบที่มี id = "แผนที่ผ้าใบ" คุณลักษณะ ผมขอแนะนำให้คุณเลือกสไตล์นี้ด้วยความกว้างและความสูงที่พอดีกับหน้าเว็บของคุณ:
สุดท้ายอัปโหลดและทดสอบ
สิ่งสุดท้ายที่ต้องทำคืออัปโหลดหน้าเว็บและทดสอบว่าแผนที่ของคุณแสดงขึ้น นี่เป็นตัวอย่างแผนที่ Google บนหน้าเว็บ หมายเหตุเนื่องจากวิธีการที่ About.com CMS ทำงานคุณจะต้องคลิกลิงก์เพื่อให้แผนที่แสดงขึ้น กรณีนี้จะไม่ปรากฏบนเพจของคุณ
ถ้าแผนที่ของคุณไม่ปรากฏขึ้นลองเริ่มต้นใช้งานด้วย a ร่างกาย แอตทริบิวต์:
onload = "เริ่มต้น ()" >
สิ่งอื่น ๆ เพื่อตรวจสอบว่าแผนที่ของคุณไม่ได้โหลดมีดังนี้
- มองหาการพิมพ์ผิดใน JavaScript รวมทั้งกรณี JavaScript คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
- ตรวจสอบให้แน่ใจว่าคุณมี
ซูมและศูนย์ชุดตัวเลือก - ตรวจสอบให้แน่ใจว่า
DIVอยู่ในหน้าเว็บที่มีรหัสที่ถูกต้อง - ตรวจสอบให้แน่ใจว่า
DIVองค์ประกอบมีความสูง
เพิ่ม Marker ในแผนที่ของคุณ
แต่สิ่งที่ดีคือแผนที่ของสถานที่ของคุณหากไม่มีเครื่องหมายบอกคนที่พวกเขาควรจะไป?
หากต้องการเพิ่มเครื่องหมายสีแดงมาตรฐานของ Google แผนที่ให้เพิ่มข้อมูลต่อไปนี้ลงในสคริปต์ด้านล่าง var map = … บรรทัด:
var myLatlng = new google.maps.LatLng ( เส้นรุ้งเส้นแวง );เครื่องหมาย var = new google.maps.Marker ({ตำแหน่ง: myLatlng,map: แผนที่,หัวข้อ:" สำนักงานใหญ่ในอดีตของ About.com '});
เปลี่ยนข้อความที่เน้นเป็นเส้นรุ้งและเส้นแวงและชื่อที่คุณต้องการให้ปรากฏเมื่อมีคนวางเมาส์เหนือเครื่องหมาย
คุณสามารถเพิ่มเครื่องหมายต่างๆลงในหน้าได้เท่าที่คุณต้องการเพียงเพิ่มตัวแปรใหม่ด้วยพิกัดและชื่อใหม่ แต่ถ้าแผนที่เล็กเกินไปที่จะแสดงเครื่องหมายทั้งหมดพวกเขาจะไม่แสดงจนกว่าผู้อ่านจะซูมออก
var latlng 2 = new google.maps.LatLng ( 37.3316591,-122.0301778 );var myMarker 2 = new google.maps.Marker ({ตำแหน่ง: latlng 2 ,map: แผนที่,หัวข้อ:" คอมพิวเตอร์ Apple '});
นี่คือตัวอย่างแผนที่ Google ที่มีเครื่องหมาย หมายเหตุเนื่องจากวิธีการที่ About.com CMS ทำงานคุณต้องคลิกลิงก์เพื่อให้แผนที่แสดงขึ้น กรณีนี้จะไม่ปรากฏบนเพจของคุณ
05 จาก 05เพิ่มแผนที่ที่สอง (หรืออื่น ๆ ) ลงในหน้าเว็บของคุณ
หากคุณได้ดูหน้าแผนที่ Google แผนที่ของฉันแล้วคุณจะสังเกตเห็นว่าฉันมีแผนที่มากกว่าหนึ่งรายการปรากฏอยู่บนหน้า นี้เป็นเรื่องง่ายมากที่จะทำ นี่เป็นวิธีการ
- ดูเส้นรุ้งและเส้นแวงของแผนที่ทั้งหมดที่คุณต้องการแสดงตามที่เราได้เรียนรู้ในขั้นตอนที่ 2 ของบทแนะนำนี้
- แทรกแผนที่แรกตามที่เราได้เรียนรู้ในขั้นตอนที่ 3 ของบทแนะนำนี้ ถ้าคุณต้องการให้แผนที่มีเครื่องหมายโปรดเพิ่มเครื่องหมายในขั้นตอนที่ 4
- สำหรับแผนที่ที่สองคุณจะต้องเพิ่ม 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); - หากคุณต้องการวางเครื่องหมายบนแผนที่ใหม่ให้เพิ่มเครื่องหมายที่สองซึ่งชี้ไปที่พิกัดที่สองและแผนที่ที่สอง:
var myMarker2 = new google.maps.Marker ({ตำแหน่ง: latlng2 แผนที่: map2 , title: " ชื่อ Marker ของคุณ ' }); - จากนั้นเพิ่ม secondwhere ที่คุณต้องการให้แผนที่ที่สอง และให้แน่ใจว่าได้ให้ a
id = "map_canvas_2"ID - เมื่อโหลดหน้าของคุณแผนที่สองแผนที่จะแสดงขึ้น
นี่คือโค้ดของหน้าเว็บที่มีแผนที่ Google สองแบบอยู่:
