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>
อ่านเพิ่มเติม