โดย Ik Kat » 03/07/2017 5:15 pm
ในการนำ
Google Maps มาใช้งานบน
เว็บไซต์ การปักหมุดถือเป็นเรื่องที่สำคัญอย่างมากในการระบุตำแหน่ง หรือสถานที่เป้าหมาย ทั้งนี้สามารถอ้างอิงตำแหน่งที่อยู่ของเราได้จากการกำหนดค่า Latitude และ Longitude
ตัวอย่าง การปักหมุด เมื่อมีการนำเมาส์ไปชี้ที่เครื่องหมายจะปรากฏคำว่า Hello World!:
โค้ด: เลือกทั้งหมด
function initMap() {
var myLatLng = {lat: 13.8380209, lng: 100.5814654};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
ตัวอย่าง การกำหนดด้วย Method setMap() :
โค้ด: เลือกทั้งหมด
var myLatlng = new google.maps.LatLng(13.8380209,100.5814654);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
หากต้องการปิดเคร่องหมายให้กำหนดค่าเป็น marker.setMap(null);
ตัวอย่าง การปักหมุดมากกว่า 1 จุด :
โค้ด: เลือกทั้งหมด
function initMap() {
var mapOptions = {
center: {lat: 13.8380209, lng: 100.5814654},
zoom: 16,
}
var maps = new google.maps.Map(document.getElementById("map"),mapOptions);
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(13.836760, 100.582560),
map: maps,
title: 'Test1',
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(13.836328, 100.582123),
map: maps,
title: 'Test2',
});
}
การปักหมุดจำเป็นต้องใช้ค่า Latitude และ Longitude เราสามารถดูค่านี้ได้จากการใช้
Geocoding และนอกจากนี้เรายังสามารถแสดงข้อมูลที่กำหนดเอง หรือสามารถอนุญาตใช้ผู้สามารถย้ายเครื่องหมายได้
ในการนำ [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/33-google/3780-google-map-%E0%B8%81%E0%B8%B9%E0%B9%80%E0%B8%81%E0%B8%B4%E0%B8%A5.htmlhttp://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/33-google/3780-google-map-%E0%B8%81%E0%B8%B9%E0%B9%80%E0%B8%81%E0%B8%B4%E0%B8%A5.html]Google Maps[/url] มาใช้งานบน[url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3585-website-%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C.html]เว็บไซต์[/url] การปักหมุดถือเป็นเรื่องที่สำคัญอย่างมากในการระบุตำแหน่ง หรือสถานที่เป้าหมาย ทั้งนี้สามารถอ้างอิงตำแหน่งที่อยู่ของเราได้จากการกำหนดค่า Latitude และ Longitude
[b]ตัวอย่าง[/b] การปักหมุด เมื่อมีการนำเมาส์ไปชี้ที่เครื่องหมายจะปรากฏคำว่า Hello World!:
[code]function initMap() {
var myLatLng = {lat: 13.8380209, lng: 100.5814654};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}[/code]
[img]http://snap.mindphp.com/index.php?view=2017Jul03_595a1ceef1faa[/img]
[b]ตัวอย่าง[/b] การกำหนดด้วย Method setMap() :
[code]var myLatlng = new google.maps.LatLng(13.8380209,100.5814654);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
// To add the marker to the map, call setMap();
marker.setMap(map);[/code]
หากต้องการปิดเคร่องหมายให้กำหนดค่าเป็น marker.setMap(null);
[b]ตัวอย่าง[/b] การปักหมุดมากกว่า 1 จุด :
[code] function initMap() {
var mapOptions = {
center: {lat: 13.8380209, lng: 100.5814654},
zoom: 16,
}
var maps = new google.maps.Map(document.getElementById("map"),mapOptions);
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(13.836760, 100.582560),
map: maps,
title: 'Test1',
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(13.836328, 100.582123),
map: maps,
title: 'Test2',
});
}[/code]
[img]http://snap.mindphp.com/index.php?view=2017Jul03_595a1d6b0c9e7[/img]
การปักหมุดจำเป็นต้องใช้ค่า Latitude และ Longitude เราสามารถดูค่านี้ได้จากการใช้ [url=https://www.mindphp.com/forums/viewtopic.php?f=72&t=31199]Geocoding[/url] และนอกจากนี้เรายังสามารถแสดงข้อมูลที่กำหนดเอง หรือสามารถอนุญาตใช้ผู้สามารถย้ายเครื่องหมายได้