Lợi ích của việc chèn bản đồ Google map vào website
- Tạo cho người dùng khi ghé thăm website có một cái nhìn tổng quan về địa điểm nơi bán hàng.- Không sử dụng thông qua một website về địa điểm nào mà vẫn có thể tìm thấy địa điểm cần ghé tới.
- Ghi chú một cách trực quan nhất về địa điểm. Đảm bảo cho bạn có đầy đủ tính năng của một trang LIÊN HỆ - GIỚI THIỆU.
Sau đây là các ví dụ mẫu cho các trường hợp cụ thể. Bạn có thể chọn ví dụ thích hợp nhất để chèn vào website của bạn:
1. Đánh dấu địa điểm trên bản đồ Google Map có ghi chú
Mẫu 1: Định vị địa điểm trên bản đồ kèm theo của sổ ghi chú, hình ảnh doanh nghiệp, công ty...
Source code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.bogiaso.com - Chèn Googel Maps vào website</title>
<!-- Chuỗi khai báo lấy tham số của google maps -->
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false&language=vi"></script>
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(10.843928,106.717672);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("div_id"), myOptions);
// Biến text chứa nội dung sẽ được hiển thị
var text;
text= "<b style='color:#00F' " +
"style='text-align:center'>Nhà của mình nè!<br />" +
"<img src='citihouse-logo.jpg' /></b>";
var infowindow = new google.maps.InfoWindow(
{ content: text,
size: new google.maps.Size(100,50),
position: myLatlng
});
infowindow.open(map);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Trường ĐH GTVT TP.HCM!"
});
}
</script>
</head>
<body onLoad="initialize()">
<div id="div_id" style="height:500px; width:600px"></div>
</body>
</html>
2. Vị trí hiện tại của tôi trên bản đồ Google Map
Bạn có muốn chia sẽ vị trí hiện tại của mình cho người khác biết? Tôi có thể biết bạn đang ở đâu nếu bạn chia sẽ địa điểm của bạn cho tôi. Trong khi bạn không biết mình đang ở chổ nào.Trong ví dụ này: Google Maps sẽ theo dõi IP của bạn và xác định bạn đang ở đâu trên bản đồ. Việc của bạn là có nên cho phép Google theo dõi bạn hay không?
Sau khi bạn cho phép,thì Google sẽ hiển thị vị trí hiện tại của bạn trên bản đồ tương ứng. Ví dụ, hiện tại tôi đang ngồi ở quán cà phê và vào website. Hãy xem vị trí của tôi nào:
Mẫu 2: Xác định vị trí hiện tại đang ngồi bằng việc theo dõi IP của người dùng
Google Gears Geolocation API - Đây là bộ công cụ cho phép bạn thao tác với vị trí người dùng hiện tại. Để có thể lấy được địa điểm, bạn nên tải file Google Gearsvề máy hoặc có thể link trực tiếp đến file. sau đó khai báo nó trong thẻ <script>
<script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js" >
</script>
Chú ý: Vì đây là bộ công cụ hoạt động theo chuẩn W3C định vị, đây là một phần của HTML 5 nên trước khi bắt đầu bạn nên kiểm tra xem trình duyệt có hỗ trợ hay không.
Source code xác định vị trí hiện tại:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Maps API</title>
<script type="text/javascript"
src="http://code.google.com/apis/gears/gears_init.js" ></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=vi®ion=hcm"></script>
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(10.790141,106.633301);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('div_id'),myOptions);
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: "<b style='color:#00F'>Trần Văn Tiến đang ở đây</b> <br
/>" +
"<img src='avatar.jpg' height='70' width='50' />"
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
}
else
{
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Quá trình tìm kiếm địa điểm của
bạn không thể thực hiện.';
} else {
var content = 'Trình duyệt của bạn không hỗ trợ ';
}
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
</script>
</head>
<body onload="initialize()" >
<div id="div_id" style="height:500px; width:500px"></div>
</body>
</html>
Khi xem, trình duyệt sẽ hỏi bạn có muốn chia sẽ vị trí của bạn cho google biết không. Hãy nhấn đồng ý
- Allow : Với Google Chrome
- Share Location : Với firefox.
- Allow : Với Google Chrome
- Share Location : Với firefox.
Geolocation cho phép bạn lấy các thông tin về vị trí hiện tại và kiểm tra tính hỗ trợ về chuẩn W3C định vị. Trong trường hợp kiểm tra trình duyệt không hỗ trợ hoặc quá trình tìm kiếm vị trí hiện tại không thành công thì vị trí do đối tượng myLatlng nắm giữ sẽ được hiển thị trên bản đồ. Sau đó hàm handleNoGeolocation sẽ được gọi với giá trị boolean truyền vào cho biết lỗi do không tìm thấy vị trí hay là lỗi do trình duyệt không hỗ trợ.
Nếu tìm thấy địa điểm thành công thì khởi tạo đối tượng infowindow Nắm giữ thông tin vị trí và hiện thị nó ra bản đồ.
Bạn có thể sử dụng cái này để gọi một hàm javascript ( Ajax ) thực hiện insert tọa độ của người dùng vào CSDL. Đây là cách theo dõi người dùng.
Một số doanh nghiệp muốn mở rộng thị trường chỉ cần biết người dùng vào website của họ ở đâu nhiều nhất, thì họ sẽ tới đó mở một chi nhánh…
Tác giả: Trần Văn Tiến.
Không có nhận xét nào:
Đăng nhận xét