วัน: 26 กรกฎาคม 2014

Google Maps: สร้าง markers หลายตำแหน่งGoogle Maps: สร้าง markers หลายตำแหน่ง

2014-07-262014-07-26| phunsanitphunsanit| 0 Comment | 07:00

google maps api สามารถสร้าง marker หลายตำแหน่งในแผนที่เดียวกันได้ อาจจะใช้ในการสร้างแผนที่สาขา หรือจะเป็นโรงพญาบาลในบริเวณนั้นก็ได้

จุดสำคัญคือตำแหน่ง gps ถ้าต้องการให้ได้ตำแหน่งที่ตรงกับ position ในแผนที่จริง ๆ แทนที่จะต้องเดินไป เช็คตำแหน่ง gps ในมือถือ ใช้วิธีดูเอาจากแผนที่ของ google เองจะตรงกว่า ตัวอย่างผมเปิดแผนที่ อนุสาวรีย์ชัยสมรภูมิ จากนั้นคลิกที่ โรงพญาบาล จะมี info windows เปิดขึ้นมา จากนั้นให้คลิกขวา เปิดใน tab ใหม่ เช่น โรงพยาบาลรามาธิบดี จะได้ url เช่น https://www.google.com/maps/place/%E0%B9%82%E0%B8%A3%E0%B8%87%E0%B8%9E%E0%B8%A2%E0%B8%B2%E0%B8%9A%E0%B8%B2%E0%B8%A5%E0%B8%A3%E0%B8%B2%E0%B8%A1%E0%B8%B2%E0%B8%98%E0%B8%B4%E0%B8%9A%E0%B8%94%E0%B8%B5/@13.7760601,100.522649,15z/data=!4m12!1m6!3m5!1s0x0:0xc4dd9b398f456bcf!2z4LmC4Lij4LiH4Lie4Lii4Liy4Lia4Liy4Lil4Lij4Liy4Lih4Liy4LiY4Li04Lia4LiU4Li1!8m2!3d13.766015!4d100.5267864!3m4!1s0x30e2994da99aa1fd:0xc4dd9b398f456bcf!8m2!3d13.766015!4d100.5267864 จากนั้น ก็ดูที่ !3d จะตามด้วยเลข latitude และ !4d จะเป็นเลข longitude ของจุดที่ google plot ตำแหน่งเอาไว้

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps APIs > Maps JavaScript API > Markers</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="map" id="mapA"></div>
<script src="../../vendor/components/jquery/jquery.min.js"></script>
<script>
var map;
var places = [{
  "latitude": 13.7485809,
  "longitude": 100.5832588,
  "name_en": "Bangkok Hospital",
  "name_th": "โรงพยาบาล กรุงเทพ ซอยศูนย์วิจัย"
 }, {
  "latitude": 13.746166,
  "longitude": 100.552348,
  "name_en": "Bumrungrad International Hospital",
  "name_th": "โรงพยาบาล บำรุงราษฎร์"
 }, {
  "latitude": 13.7679658,
  "longitude": 100.5345264,
  "name_en": "Phramongkutklao Hospital",
  "name_th": "โรงพยาบาลพระมงกุฎเกล้า"
 },
 {
  "latitude": 13.7561676,
  "longitude": 100.5391023,
  "name_en": "Phyathai 1 Hospital",
  "name_th": "โรงพยาบาล พญาไท 1"
 }, {
  "latitude": 13.7698357,
  "longitude": 100.5404377,
  "name_en": "Phyathai 2 Hospital",
  "name_th": "โรงพยาบาล พญาไท 2 อินเตอร์เนชันแนล"
 },
 {
  "latitude": 13.769295,
  "longitude": 100.527455,
  "name_en": "Prasat Neurological Hospital and Institute",
  "name_th": "สถาบันประสาทวิทยา"
 }, {
  "latitude": 13.76188,
  "longitude": 100.526455,
  "name_en": "Priest Hospital",
  "name_th": "โรงพยาบาลสงฆ์"
 }, {
  "latitude": 13.7659465,
  "longitude": 100.5353223,
  "name_en": "Queen Sirikit National Institute of Child Health",
  "name_th": "สถาบันสุขภาพเด็กแห่งชาติมหาราชินี"
 }, {
  "latitude": 13.7642952,
  "longitude": 100.5367674,
  "name_en": "Rajavithi Hospital",
  "name_th": "โรงพยาบาล ราชวิถี"
 },
 {
  "latitude": 13.766015,
  "longitude": 100.5267864,
  "name_en": "Ramathibodi Hospital",
  "name_th": "โรงพยาบาลรามาธิบดี"
 },
 {
  "latitude": 13.7657804,
  "longitude": 100.5333703,
  "name_en": "TropMed Hospital for Tropical Diseases - Faculty of Tropical Medicine, Mahidol University",
  "name_th": "โรงพยาบาล เวชศาสตร์เขตร้อน ม.มหิดล"
 }, {
  "latitude": 13.7719828,
  "longitude": 100.5515745,
  "name_en": "Veterans General Hospital",
  "name_th": "โรงพยาบาล ทหารผ่านศึก"
 }, {
  "latitude": 13.7831277,
  "longitude": 100.5336353,
  "name_en": "Vichaiyut Hospital (North Building)",
  "name_th": "โรงพยาบาล วิชัยยุทธ"
 }, {
  "latitude": 13.7804061,
  "longitude": 100.5330211,
  "name_en": "Vichaiyut Medical Center",
  "name_th": "ศูนย์การแพทย์วิชัยยุทธ"
 }, {
  "latitude": 13.7600024,
  "longitude": 100.534462,
  "name_en": "Bhumirajanakarindra Kidney Institute Hospital",
  "name_th": "โรงพยาบาล สถาบันโรคไตภูมิราชนครินทร์"
 }
];

/* function createMaps */
function createMap(mapArea, position) {
 var latlng = new google.maps.LatLng(parseFloat(position.latitude), parseFloat(position.longitude));
 map = new google.maps.Map(document.getElementById(mapArea), {
  "zoom": 18
 });

 map.setCenter(latlng);

 var marker = new google.maps.Marker({
  "map": map,
  "position": latlng,
 });

 var infowindow = new google.maps.InfoWindow({
  "content": 'Latitude = ' + position.latitude + ', ' + ' longitude = ' + position.longitude,
  "position": latlng,
 }).open(map, marker);

}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
 infoWindow.setPosition(pos);
 infoWindow.setContent(browserHasGeolocation ?
  'Error: The Geolocation service failed.' :
  'Error: Your browser doesn\'t support geolocation.');
 infoWindow.open(map);
}

function initMap(defaultLatitude = 13.7651991, defaultLongitude = 100.5368694) {
 position = {
  "latitude": defaultLatitude,
  "longitude": defaultLongitude,
 };

 createMap('mapA', position);

 setMarkers(map)
}

function setMarkers(map) {
 for (var a = 0; a < places.length; a++) {
  var place = places[a];
  var marker = new google.maps.Marker({
   "map": map,
   "position": {
    "lat": parseFloat(place.latitude),
    "lng": parseFloat(place.longitude)
   },
   "title": place.name_en + "\n" + place.name_th,
   "zIndex": a
  });
 }
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyDE5zb4r9sbN5S_GcD3NZRED1Ma3FzFqso"></script>
</body>
</html>

อ่านเพิ่มเติม

google maps: สร้างและลบ marker / overlay

Read MoreRead More