Latest web development tutorials

ฐาน Google Maps

สร้างง่าย Google Maps

ตอนนี้ขอสร้างง่าย Google Maps

ต่อไปนี้เป็นกราฟที่แสดง Google แผนที่ลอนดอน:

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

</body>
</html>

ลอง»

ตัวอย่างของการวิเคราะห์

ในตัวอย่างข้างต้นเราจะสร้างกระบวนการในการแก้ไขแผนที่ของ Google

ทำไมควรประกาศ HTML5 ใบสมัคร

<!DOCTYPE html>

เบราว์เซอร์ส่วนใหญ่ใช้ "รูปแบบมาตรฐาน" ของ HTML5 การแสดงผลหน้าเอกสารซึ่งหมายความว่าโปรแกรมที่คุณสามารถทำงานร่วมกับเบราว์เซอร์ที่สำคัญทั้งหมด

นอกจากนี้หากมีแท็ก DOCTYPE ไม่มีเบราว์เซอร์ที่คุณใช้โหมดสำส่อน (โหมดมาตรฐาน) สำหรับการแสดงผลเนื้อหาของหน้าเว็บ

เคล็ดลับ: มันควรจะตั้งข้อสังเกตว่าบางโหมด "สำส่อน" ใน CSS และคุณไม่สามารถใช้โหมดมาตรฐานในการประยุกต์ใช้โดยเฉพาะอย่างยิ่งทุกคนต้องรับมรดกจากองค์ประกอบของบล็อกปกครองตามสัดส่วนของขนาดที่ หากคุณไม่ได้ระบุขนาดของโมดูลในผู้ปกครองค่าเริ่มต้น 0 0 x พิกเซล หากคุณต้องการที่จะใช้ร้อยละสามารถประกาศใน <style> แท็กดังต่อไปนี้:

<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>

แผนที่นี้แสดงโมดูลประกาศสไตล์ (GoogleMap) ควรจะมีความสูง HTML ของ 100%

เพิ่ม Google Maps API Key

ในตัวอย่างต่อไปนี้ครั้งแรก <script> แท็กต้องรวมอยู่ใน Google Maps API:

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

คีย์ API ของ Googleสร้างวางไว้ในตัวแปรสำคัญ(key= YOUR_API_KEY)

พารามิเตอร์เซ็นเซอร์จะต้องมีใช้พารามิเตอร์เพื่อบ่งชี้ว่าโปรแกรมประยุกต์ที่ใช้เซ็นเซอร์ (คล้ายกับระบบนำทาง GPS) เพื่อหาตำแหน่งของผู้ใช้ค่าพารามิเตอร์สามารถตั้งค่าให้จริงหรือเท็จ

HTTPS

หากใบสมัครของคุณจะมีความปลอดภัย http: แอพลิเคชัน (HTTPS HTTP ที่ปลอดภัย), คุณสามารถใช้ HTTPS โหลด Google Maps API:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

โหลดไม่ตรงกัน

ในทำนองเดียวกันเรายังสามารถโหลด Google Maps API หลังหน้ามีแปล้

ตัวอย่างต่อไปนี้จะใช้ในการดำเนินการ window.onload แปล้เมื่อโหลดหน้าเว็บ Google Maps loadScript () ฟังก์ชันสร้างโหลด Google Maps API <script> แท็ก นอกจากนี้ในตอนท้ายของฉลากเพื่อโทรกลับที่เริ่มต้น = พารามิเตอร์เริ่มต้น () จะดำเนินการหลังจาก API ที่มีการโหลดอย่างเป็นฟังก์ชันการเรียกกลับ:

ตัวอย่าง

function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js? key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize"; document.body.appendChild(script);
}

window.onload = loadScript;

ลอง»

แผนที่ที่กำหนดเองคุณสมบัติ

ก่อนที่จะเริ่มต้นแผนที่เราต้องสร้างวัตถุแผนที่เพื่อกำหนดคุณสมบัติแผนที่ทรัพย์สิน:

var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

ศูนย์ (กลาง)

แอตทริบิวต์ศูนย์ระบุ Center แผนที่ซึ่งโดยพิกัด (เส้นรุ้งเส้นแวง) เพื่อสร้างจุดกลางบนแผนที่

ซูม (Zoom Series)

สถานที่ให้บริการแผนที่ซูมซูมระบุจำนวนของขั้นตอน ซูม: 0 แสดงเต็มรูปแบบแผนที่ทั้งหมดของโลก

MapTypeId (แผนที่ชนิดเริ่มต้น)

ประเภทแอตทริบิวต์ MapTypeId ระบุแผนที่เริ่มต้น

MapTypeId รวมถึงต่อไปสี่ประเภท:

  • google.maps.MapTypeId.HYBRID: ภาพถ่ายดาวเทียมแสดงให้เห็นถนนสายหลักของชั้นโปร่งใส
  • google.maps.MapTypeId.ROADMAP: แสดงแผนที่ถนนปกติ
  • google.maps.MapTypeId.SATELLITE: ภาพดาวเทียมแสดง
  • google.maps.MapTypeId.TERRAIN: แสดงแผนที่ที่มีลักษณะทางกายภาพ (เช่นภูมิประเทศและพืชผัก) ของ

สถานที่ที่จะแสดงใน Google Maps

โดยทั่วไปจะใช้ใน Google แผนที่ <div>:

<div id="googleMap" style="width:500px;height:380px;"></div>

หมายเหตุ: ขนาดของแผนที่จะ DIV ตั้งค่าให้แสดงขนาดของแผนที่เพื่อให้เราสามารถกำหนดขนาดของแผนที่ใน <div> องค์ประกอบ

สร้างวัตถุแผนที่

var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);

รหัสข้างต้นใช้พารามิเตอร์ (mapProp) ใน <div> (ID เป็น GoogleMap) สร้างแผนที่ใหม่

เคล็ดลับ: หากคุณต้องการที่จะสร้างหน้าแผนที่หลายท่านจะต้องเพิ่มวัตถุแผนที่ใหม่สามารถ

ตัวอย่างต่อไปนี้กำหนดสี่แผนที่อินสแตนซ์ (แผนที่โดยใช้แผนที่สี่ประเภทที่แตกต่างกัน):

ตัวอย่าง

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);

ลอง»

กำลังโหลดแผนที่

หน้าต่างแผนที่เพื่อเริ่มต้นวัตถุหลังจากที่โหลดโดยการดำเนินการเริ่มต้น () ฟังก์ชันซึ่งทำให้มั่นใจได้ว่าหน้ามีการโหลดอย่างเต็มที่ก่อนที่จะโหลด Google แผนที่:

google.maps.event.addDomListener(window, 'load', initialize);