Home > Lập trình > Javascript > Tạo bản đồ đơn giản với Google Map API

Tạo bản đồ đơn giản với Google Map API

Show hàng cái đã rồi tính tiếp. http://clbinternet.info/maps.

Google map API
Google map API

Mấy hôm vừa rồi có tìm hiểu về google map API để làm cái map như vậy. Đơn giản là vì CLB có nhu cầu đưa địa chỉ tất cả thành viên lên bản đồ online. Mỗi khi có nhu cầu ăn uống, họp hành hay chơi bời gì đó thì tìm một điểm chung có đường đi tiện nhất cho các thành viên. Nhìn cái map nó to vậy chứ thật ra nó đơn giản lắm, vì sử dụng Google Map API (Application Programming Interface). Dịch nôm na ra thì API là giao diện lập trình ứng dụng (nghe chả biết nó là cái quần gì hết lol), nhưng để dễ hiểu trong bài viết này thì mình nói sơ qua về Google Map API. Sau khi mình làm việc qua với Google Map API, thì mình nhận thấy nó là một gói ứng dụng sử dụng HTML, Javascript, CSS để xây dựng nên giao diện và phương thức hoạt động đồng thời với việc sử dụng kho dữ liệu của Google (? Còn bỏ ngỏ vì chưa biết nó làm thế nào để sử dụng dữ liệu) .

Để sử dụng google map API ta phải tuân thủ theo chuẩn mà nhà sản xuất đề ra, đồng thời sử dụng các phương thức mà nó cung cấp cho chúng ta để tạo bản đồ. Google tạo ra GM API này để chúng ta (lập trình viên) sử dụng. miễn phí hoặc dùng bản của doanh nghiệp. Nó tạo cho mình dùng nên nó sẽ cung cấp hướng dẫn cho mình hihi (khoái). (Link document ).

Để tạo ra một API như vậy tớ cam đoan, đảm bảo vs các cậu rằng đứng đằng sau cái bản đồ này là cả một hệ thống về phần mềm bao gồm các services thu thập thông tin, xử lý, lưu trữ, một đội ngủ nhân viên để bảo trì, xây dựng và phát triển đấy :D. Cho nên đừng nghỉ rằng mình sử dụng nó đơn giản như vậy mà xem thường nó nhé ^^.
Để tạo ra một map đơn giản ta chỉ cần đoạn code nhỏ sau đây

<!DOCTYPE html>
<html>
<head>
<script src=”http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false”>
</script>

<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById(“googleMap”)
,mapProp);
}

google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head>

<body>
<div id=”googleMap” style=”width:500px;height:380px;”></div>

</body>
</html>

Trong đó:

<script src=”http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false”>
</script>

–    Dùng để đăng ký với google rằng web của tao đang sử dụng dịch vụ của mày cung cấp đấy.

<div id=”googleMap” style=”width:500px;height:380px;”></div>

–    Đây là phần khai báo kết hợp vs javascript giúp cho Google API hiểu rằng ta muốn đặt cái bản đồ tại vị trí này của web.

var map=new google.maps.Map(document.getElementById(“googleMap”)
,mapProp);

–    Đây là đoạn script mà mình nhắc ở trên, mục đích của dòng này là tạo ra một đối tượng gọi là map, sử dụng khởi tạo mapProp.  (nếu ai học lập trình rồi sẽ hiểu từ đối tượng này rõ ràng) để phục vụ cho các mục đích sau này (ví dụ như tạo một điểm và đánh dấu trên bản đồ…)

var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};

–    Đoạn này nhằm thiết lập những khởi tạo đầu tiên cho map, như vị trí trung tâm, độ phóng đại bản đồ, và loại bản đồ hiển thị. Ta có thể thay đổi những giá trị này cho phù hợp vs mục đích sử dụng. Chi tiết các bạn vào đây để tham khảo Google Map API

google.maps.event.addDomListener(window, ‘load’, initialize);

–    Và phần cuối cùng muốn nói đó là dòng này. Là phần quan trọng để map có thể xuất hiện. Nó có chức năng là lắng nghe sự thay đổi của bản đồ. Nếu nó là lần tải đầu tiên sẽ gọi function khởi tạo.

Tuy đã có rất nhiều bài viết về google map API và cách sử dụng của nó, tuy nhiên mình vẫn muốn viết lại, vì thứ nhất là khi viết lại mình có thể nhớ lâu hơn những gì mình tìm hiểu được và thứ hai là biết đâu đó bài hướng dẫn của mình lại là bài đầu tiên mà một bạn nào đó vừa mới tìm hiểu về nó ^^.

About Huy Nguyễn

Chào mọi người, mình là Huy. Mình thích rất nhiều thứ liên quan đến máy tính, thích web thích lập trình, thích thiết kế ... :3. Thích nhiều thứ, hiện tại mình đang tìm hiểu về Wordpress bạn nào có hứng thú thì trao đổi thêm vs mình nha.

Check Also

24/4/2011: Chuyên đề “Làm việc nhóm với Goolge Apps”

Bạn đang là sinh viên hay bạn đang là một nhân viên? Bạn hiện là …

11 comments

  1. bài viết rõ ràng trong sáng, tuy còn vài chỗ sai chính tả, hé hé 😀 Ngưỡng mộ quớ 😀

  2. Phạm Phương

    Thế giờ mình muốn biết vị trí truy cập internet của mình ở đâu trên bản đồ thì phải làm thế nào ?

  3. nghe nói có bạn Phạm Phương biết cách, bạn thử hỏi bạn đó xem sao :3.

  4. Phạm Phương

    /*Chèn vào dưới var map=new google.maps.Map(document.getElementById(“googleMap”)
    ,mapProp); */
    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ạn đang ở đây nè =]]. Copy cái tọa độ này vào ô đầu tiên ' + position.coords.latitude+','+position.coords.longitude
    });

    map.setCenter(pos);
    }, function() {
    handleNoGeolocation(true);
    });

    } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
    }
    /*Kết thúc*/

    /*Chèn vào trên hàm function initialize()*/
    function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
    } else {
    var content = 'Error: Your browser doesn't support geolocation.';
    }

    var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
    };

    var infowindow = new google.maps.InfoWindow(options);
    map.setCenter(options.position);
    }
    /*Kết thúc*/

  5. hay nè, update lên bài viết luôn đi Huy Nguyễn Quốc 😀

  6. Các bạn cho hỏi! Mình muốn dùng module sim để thu thập vị trí, sau đó phân tích tọa độ và gửi lên chương trình mà mình viết với google api thì có được không(tọa độ thay đổi liên tục)? google api có hỗ trợ hàm nào liên quan đến việc này không? cám ơn nhiều!

    • Hi Bảo Anh,

      Mình chưa hiểu ý bạn lắm. Cụ thể bạn muốn thực hiện chức năng gì? Có phải bạn muốn theo dõi điện thoại của 1 người thông qua google map?

      • Không phải bạn! Mình muốn dùng module sim (có GPS VÀ GPRS), GPS thu thập vị trí(tọa độ Long, Lat ) sau đó dùng GPRS truyền tọa độ đó về một máy tính có kết nối mạng. Mình muốn hỏi làm sao để cái chương trình mình viết sử dụng GOOGLE API có thể UPDATE cái tọa độ đó và show lên bản đồ được? mình có tìm hiểu thì chỉ thấy người ta thêm tọa độ trực tiếp vào code thì nó show lên được! Mong bạn chỉ giúp!

        • Huy Nguyễn

          Nếu bạn đã đảm bảo là truyền dữ liệu đến được với Website thì bạn chỉ cần viết hàm để nó tự động cập nhật vào database, sau đó muốn hiển thị lên Map thì bạn cũng tương tự là viết hàm để truy xuất database lên website thôi :D. Bạn add skype nqhuy031091 tiện mình trao đổi thêm nhé 😀

  7. Có bạn nào có kinh nghiệm về fusion table và google map cho mình ý kiến nhe. Mình cần search một record từ fusion table (có khoảng 4 triệu rows), rồi zoom tới kết quả trong google map.

Leave a Reply

%d bloggers like this: