Nội dung

0.1 Kích thước ảnh
0.2 Scale

1 Bản đồ google map động
2 Nạp bản đồ sử dụng Javascript

Lưu hình ảnh hiển thị vị trí địa điểm của bạn trên google map, gọi là ảnh bản đồ tĩnh về thành phố khu vực bạn muốn lấy, ví dụ URL sau trả về ảnh cho thành phố thị trấn New York.

https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Clabel:C%7C40.718217,-73.998284

Chú ý: bạn không cần sử dụng những thứ khác như javascript, để hiển thị ảnh tất cả chỉ với URL trên sử lý trên server của google, bạn chỉ cần nhúng đường dẫn này trong thẻ img là có thể xem được ảnh giống như hình trên.

Địa chỉ URL Google Statc Maps có dạng:

https://maps.googleapis.com/maps/api/staticmap?parameters

Lưu ý: Static Maps không hỗ trợ custom icon nếu website bạn sử dụng URL schema HTTPS. Icon mặc định luôn hiển thị.

Các tham số chấp nhận để tạo ảnh bản đồ tĩnh:
Tham số xác định vị trí (Location)

center: khai báo vị trí khu vực hiển thị trên chính giữa bản đồ, bao gồm 2 thông số ngăn cách nhau bởi dấu phẩy {latitude,longitude}. VD: “40.714728,-73.998672”.
Hoặc tên thành phố thị trấn..bằng chữ: VD: “city hall, new york, ny”
zoom: thiết lập mức độ phóng cho bản đồ tham số này điền giá trị số bắt đầu từ 0 đến 21. Đặt zoom=0 bạn có thể xem được toàn bộ bản đồ.

Ví dụ sau với cùng 1 địa điểm center nhưng mức độ zoom cho 2 hình ảnh chụp bản đồ là 12 & 14.

https://maps.googleapis.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=12&size=400x400
https://maps.googleapis.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=14&size=400x400

Kích thước ảnh

Sử dụng tham số size kết hợp với center bạn có thể lấy ảnh map với kích thước mong muốn tính bằng đơn vị pixels tương ứng với tham số nhân scale (mặc định scale=1).
VÍ dụ:
scale=1&size=640×640: ảnh có kích thước chính xác 640px , 640 px
scale=2&size=640×640: ảnh có kích thước 1280px , 1280px

Scale

Tham số size của Google Statis Maps API định nghĩa kích thước pixel cho bản đồ, tuy nhiên nếu chi tiết trong bản đồ quá nhỏ khiến việc theo dõi khó khăn bạn có thể phóng ảnh lên gấp đôi, ba mà vẫn giữ vị trí trong ảnh để làm điều này bạn khai báo tham số scale.
Xem Ví dụ sau:

Too small	Too fuzzy

Mọi cách dùng khác bạn có thể xem chi tiết tại link này: https://developers.google.com/maps/documentation/staticmaps/?csw=1.

Bản đồ google map động

Tất cả ứng dụng bản đồ động hay tĩnh nên kèm theo thông tin API key trong tham số yêu cầu, để kích hoạt tính năng thống kê trong API Console.
Và google có liên hệ với bạn thông qua ứng dụng có cung cấp API key.

Như vậy API key có vai trò xác định nhận dạng ứng dụng google của bạn. Quản lý API key tại trang Google APIs console. Tạo key mới bạn thực hiện theo các bước dưới đây:

Truy cập địa chỉ https://code.google.com/apis/console và đăng nhập với tài khoản của bạn.
Nhấn vào liên kết Services từ menu bên trái, bảng danh sách liệt kê các services hỗ trợ API, ví dụ mình bật dịch vụ Static Maps API.
Một khi service được kích hoạt, API key được sinh ra ở tab API Access

Để chỉ định ‘key’ trên URL bạn thêm tham số GET key. VD:
https://maps.googleapis.com/maps/api/staticmap?center=New+York,NY&zoom=13&size=600×300&key=API_KEY

API cho phép bạn tương tác với ứng dụng google thông qua ngôn ngữ mà nó hỗ trợ API, trong bài này mình sẽ dùng javascript để nạp bản đồ hiển thị vào website.
Trước tiên chúng ta thêm thư viện google map api vào trong thẻ head.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=xxx&sensor=false"></script>

Điền thông tin api key của bạn vào tham số key trong URL trên.

Google Map API cung cấp cách chuyển chuỗi địa chỉ sang tọa độ, bạn truyền tên vị trí khu vực vào tham số address của URL https://maps.googleapis.com/maps/api/geocode/json, Ví dụ:

https://maps.googleapis.com/maps/api/geocode/json?address=hoàng+mai&sensor=false

Nhập URL trên trình duyệt sẽ trả về kết quả JSON chứa thông tin chi tiết về quận hoàng mai Hà nội, cũng như hoành độ, tung độ..

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "Hoàng Mai",		//tên dài1 thuộc địa chỉ
               "short_name" : "Hoàng Mai",	//tên ngắn1 thuộc địa chỉ
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "Hanoi",	//tên dài2 thuộc địa chỉ
               "short_name" : "Hanoi",	//tên ngắn 2 thuộc địa chỉ
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "Vietnam",	//tên dài 3 thuộc địa chỉ
               "short_name" : "VN",	//tên ngắn 3 thuộc địa chỉ
               "types" : [ "country", "political" ]
            },
				...địa chỉ có nhiều nhánh nữa..
         ],
         "formatted_address" : "Hoàng Mai, Hanoi, Vietnam",	//địa chỉ chính xác bạn muốn tìm
         "geometry" : {
				//kinh,vĩ độ so với container chứa map
            "bounds" : {
               "northeast" : {
                  "lat" : 21.00255120,
                  "lng" : 105.90906140
               },
               "southwest" : {
                  "lat" : 20.94607010,
                  "lng" : 105.80726610
               }
            },
				//chứa kinh độ & vĩ độ
            "location" : {
               "lat" : 20.97138060,
               "lng" : 105.86425930
            },
            "location_type" : "APPROXIMATE",	//vị trí này là gần đúng
			//kinh,vĩ độ so với khung nhìn browser
            "viewport" : {
               "northeast" : {
                  "lat" : 21.00255120,
                  "lng" : 105.90906140
               },
               "southwest" : {
                  "lat" : 20.94607010,
                  "lng" : 105.80726610
               }
            }
         },
         "types" : [ "administrative_area_level_2", "political" ]
      },
      ..kết quả khác..
   ],
   "status" : "OK"
}

Nếu bạn muốn lấy kết quả XML, thay json bằng xml.

https://maps.googleapis.com/maps/api/geocode/xml?address=hoàng+mai&sensor=false

Ngược lại, api sau sẽ chuyển từ tọa độ sang chuỗi địa chỉ. Khai báo 2 giá trị latitude,longitude bởi tham số latlng Ví dụ:

http://maps.googleapis.com/maps/api/geocode/json?latlng=20.97138060,105.86425930&sensor=false

Tọa độ trên trả về địa chỉ: “953 Tam Trinh, Yên Sở, Hoàng Mai District, Hanoi, Vietnam” bạn tìm thấy ở key ‘formatted_address’.

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "126",	//tên dài 1 của phần địa chỉ
               "short_name" : "126",	//tên ngắn 1 của phần địa chỉ
               "types" : [ "street_number" ]
            },
            {
               "long_name" : "Tam Trinh",
               "short_name" : "Tam Trinh",
               "types" : [ "route" ]
            },
            {
               "long_name" : "Yên Sở",
               "short_name" : "Yên Sở",
               "types" : [ "sublocality", "political" ]
            },
            {
               "long_name" : "Hoàng Mai",
               "short_name" : "Hoàng Mai",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "Hanoi",
               "short_name" : "Hanoi",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "Vietnam",	//tên dài n của phần địa chỉ
               "short_name" : "VN",	//tên ngắn n của phần địa chỉ
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "126 Tam Trinh, Yên Sở, Hoàng Mai, Hanoi, Vietnam",	//đầy đủ các phần địa chỉ ở trên
         "geometry" : {
				//kinh,vĩ độ
            "location" : {
               "lat" : 20.97172860,
               "lng" : 105.866940
            },
            "location_type" : "ROOFTOP",
            "viewport" : {
               "northeast" : {
                  "lat" : 20.97307758029150,
                  "lng" : 105.8682889802915
               },
               "southwest" : {
                  "lat" : 20.97037961970850,
                  "lng" : 105.8655910197085
               }
            }
         },
         "types" : [ "street_address" ]
      },
     ...kết quả khác..
   ],
   "status" : "OK"
}

Nếu thích đọc nội dung xml trong PHP thì dùng URL sau:

http://maps.googleapis.com/maps/api/geocode/xml?latlng=20.97138060,105.86425930&sensor=false

Nạp bản đồ sử dụng Javascript

Chèn bản đồ vào thẻ HTML với đối tượng google.maps.Map.

<div id="map_canvas"></div>
<script>
//thuộc tính cho map
var mapOptions = {
  center: new google.maps.LatLng(20.994769,105.801465),	//đối tượng vị trí, map sẽ hiển thị vị trí này
  zoom: 8,	//độ phóng
  mapTypeId: google.maps.MapTypeId.ROADMAP	//loại bản đồ chuẩn mặc định
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
</script>

Thiết lập tùy chọn hiển thị bản đồ, xác định vị trí địa điểm với các tham số như cách tạo bản đồ tĩnh mình có hướng dẫn ở trên. Với tên các tham số như center, zoom,..

Bạn có thể thay đổi vị trí khu vực trên bản đồ bất cứ lúc nào. Bằng cách gọi phương thức setCenter để thay đổi vị trí Lat,Lng

var LatLng_obj=new google.maps.LatLng(20.994769,105.801465);
map.setCenter(LatLng_obj);	//cách khác thiết lập vị trí chính giữa map

Đi kèm với tham số zoom.

map.setCenter(LatLng_obj,13);	//độ phóng

Marker (đánh dấu vị trí)

Đánh dấu vị trí trên bản đồ thể hiện qua hình ảnh kinh khí cầu, rất đơn giản bạn tạo đối tượng google.maps.Marker hoặc GMarker và thêm vào bản đồ.

//tạo điểm nút trên bản đồ, có thể sử dụng 2 lớp: google.maps.Marker | GMarker
var marker = new google.maps.Marker({
	position: map.getCenter(),	//vị trí nút
	map: map,	//áp dụng cho đối tượng bản đồ trên.
	title: 'Khu vực thanh xuân'	//alt khi mouseover vào nút, cách khác: marker.setTitle('abc')
  });

Nếu không truyền đối tượng reference google.maps.Map cho option của Marker, bạn có thể thêm vào Map với hàm addOverlay.

//cách khác thêm điểm nút
map.addOverlay(marker);

Hiển thị chú giải cho nút đánh dấu vị trí

Chúng ta sử dụng đối tượng google.maps.InfoWindow có thể tạo tip cho Marker cho phép chèn nội dung HTML để mô tả chi tiết về địa điểm.

/**
 *@InfoWindow (đối tượng tip cho điểm nút)
*/
var infowindow = new google.maps.InfoWindow({
	content: "<font size='3' color='red'>Công ty thiết kế web giá rẻ <br/>và quảng cáo google <strong>Hoangweb</strong></font>"	//chuỗi hiển thị trên tip
});
infowindow.open(map,marker);	//hiển thị tip cho điểm nút trên map

Kết quả:

Sử lý sự kiện

Khi nhấn vào nút marker trên bản đồ sẽ kích hoạt sự kiện ‘click’, khai báo đối tượng và sự kiện tương ứng vào hàm tạo sự kiện như sau:

google.maps.event.addListener(marker, 'click', function() {
	....
});

Ví dụ mình thiết lập độ phóng cho bản đồ mức 13, khi nhấn vào marker và sau đó đi chuyển nút điểm ở vị trí chính giữa bản đồ. Thêm 2 dòng sau vào hàm sự kiện ‘click’ trên.

map.setZoom(13);	//phóng map với độ 13
map.setCenter(marker.getPosition());	//lấy điểm nút làm vị trí trung tâm

Hàm setCenter thiết lập lại vị trí ‘center’, một khi vị trí này được sửa đổi đối tượng Map sẽ tiếp tục gọi sự kiện center_changed.

google.maps.event.addListener(map, 'center_changed', function() {
	....
});

Mở rộng bản đồ hay phóng zoom và kết hợp với thay đổi vị trí center sao cho luôn tập trung ở giữa khung xem bản đồ. Để làm điều này chúng ta sử dụng hàm panTo. VD:

//sự kiện center_changed: khi tác động điểm nút trên map
google.maps.event.addListener(map, 'center_changed', function() {
	window.setTimeout(function() {
	  map.panTo(marker.getPosition());	//phóng map tập chung vào vị trí điểm nút này
	}, 3000);
  });

Tuy nhiên vì vẫn giữ vị trí cũ là lấy marker làm trung tâm hay nói cách khác tham số ‘center’ được bảo toàn, nên sự kiện ‘center_changed’chỉ chạy một lần. Nếu gọi panTo thay đổi nhiều vị trí khác nhau thì có thể gặp lỗi kích hoạt sự kiện ‘center_changed’ vô hạn gây lỗi. Do đó bạn nên đưa vào lệnh chờ setTimeout giống như trên.

Xem demo.
Chúc bạn thành công!

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook

Nhúng bản đồ google map cho website từ a-z

Kích thước ảnh

Scale

Bản đồ google map động

Nạp bản đồ sử dụng Javascript

Marker (đánh dấu vị trí)

Hiển thị chú giải cho nút đánh dấu vị trí

Sử lý sự kiện

Comments

HOÀNG WEB

SẢN PHẨM

LIÊN KẾT

Kích thước ảnh

Scale

Bản đồ google map động

Nạp bản đồ sử dụng Javascript

Marker (đánh dấu vị trí)

Hiển thị chú giải cho nút đánh dấu vị trí

Sử lý sự kiện

Comments

HOÀNG WEB

KẾT NỐI VỚI TÔI

SẢN PHẨM

LIÊN KẾT