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