Html Google Maps

การสร้าง Google Map Mashup: คู่มือทีละขั้นตอน

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

ปัญหา: วิธีการทำแผนที่หลายสถานที่

ลองนึกภาพว่าคุณมีรายชื่อสถานที่ดังนี้:

  • El Cerrito, CA
  • Corvallis, OR
  • Morganton, NC
  • New York, NY
  • San Diego, CA

ความท้าทายคือการสร้าง Google Map ที่มีพินทำเครื่องหมายแต่ละสถานที่เหล่านี้ มาเริ่มต้นว่าคุณจะทำสิ่งนี้ได้อย่างไร

เริ่มต้น

ก่อนที่เราจะเริ่มการเขียนโค้ด ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Google Maps เบื้องต้นในโปรเจ็กต์ของคุณแล้ว และคุณมี Google Maps API Key กุญแจนี้มีความสำคัญสำหรับการเข้าถึงฟังก์ชันของ Google Maps

โครงสร้าง HTML ตัวอย่าง

นี่คือโครงสร้างพื้นฐานเพื่อเริ่มต้น:

<head>
  <script 
   type="text/javascript"
   src="http://maps.google.com/maps?file=api&v=1&key=YOUR_API_KEY">
  </script>
</head>
<body onload="createMap()" onunload="GUnload()">
  <div id="map" style="width: 600px; height: 400px;"></div>
</body>

ขั้นตอนที่ 1: ตั้งค่าแผนที่

ก่อนอื่นเราต้องเริ่มต้นแผนที่ นี่คือฟังก์ชันง่ายๆ เพื่อเริ่มต้น:

function createMap() {
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.44, -122.14), 14);
}

คำอธิบาย

  • GMap2: นี้ใช้ในการสร้างแผนที่ใหม่
  • setCenter: ตั้งศูนย์กลางแผนที่ไปยังละติจูดและลองจิจูดที่ระบุ

ขั้นตอนที่ 2: สร้างพินสำหรับแต่ละสถานที่

เพื่อแสดงสถานที่บนแผนที่ เราจะสร้างพินโดยใช้พิกัดละติจูดและลองจิจูด นี่คือวิธีการ:

var where = new GLatLng(37.925243, -122.307358); // El Cerrito, CA
var marker = new GMarker(where); // สร้างพิน
map.setCenter(where); // ตั้งศูนย์กลางแผนที่ที่พิน
map.addOverlay(marker); // เพิ่มพินไปยังแผนที่

การเพิ่มสถานที่เพิ่มเติม

คุณจะต้องตั้งค่าพิกัด สำหรับแต่ละเมืองด้วยตนเอง ซึ่งอาจทำได้ยาก แทนที่จะทำเช่นนั้น ให้พิจารณาการใช้บริการ Geocoder ของ Google เพื่อดึงละติจูดและลองจิจูดโดยอัตโนมัติสำหรับแต่ละที่อยู่

ขั้นตอนที่ 3: ใช้ Geocoder

แทนที่จะค้นหาละติจูดและลองจิจูดด้วยตนเอง ให้ใช้สคริปต์นี้:

var address = "El Cerrito, CA";
var geocoder = new GClientGeocoder();
geocoder.getLatLng(address, function(point) {
  if (point) {
    map.clearOverlays(); // ลบพินก่อนหน้า
    map.addOverlay(new GMarker(point)); // เพิ่มพินใหม่
    map.setCenter(point, 10); // ตั้งศูนย์กลางและซูมแผนที่
  }
});

คำอธิบาย

  • GClientGeocoder: บริการนี้ช่วยในการแปลงที่อยู่ให้อยู่ในพิกัดทางภูมิศาสตร์
  • getLatLng: ดึงละติจูดและลองจิจูดตามที่อยู่

ขั้นตอนที่ 4: ทำการวนรอบผ่านสถานที่ทั้งหมด

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

var locations = ["El Cerrito, CA", "Corvallis, OR", "Morganton, NC", "New York, NY", "San Diego, CA"];
locations.forEach(function(location) {
  geocoder.getLatLng(location, function(point) {
    if (point) {
      map.addOverlay(new GMarker(point));
    }
  });
});

สรุป

การสร้าง Google Map mashup ด้วยพินสำหรับสถานที่ต่างๆ ไม่เพียงแค่ตรงไปตรงมา แต่ยังเป็นวิธีที่ดีในการแสดงข้อมูล ด้วยการตั้งค่าและโค้ดเพียงเล็กน้อย คุณสามารถเปลี่ยนรายการสถานที่ใดๆ ให้กลายเป็นประสบการณ์เชิงโต้ตอบได้

สรุปด่วน:

  • ตั้งค่า Google Maps API ของคุณ
  • เริ่มต้นแผนที่
  • สร้างพินด้วยการทำ GeoCoding สำหรับความถูกต้อง
  • ทำการวนรอบผ่านสถานที่หลายแห่งได้อย่างง่ายดาย

ตอนนี้ถึงเวลาของคุณที่จะสร้าง Google Map mashup ของคุณเอง! สนุกกับการเขียนโค้ด!