Google Map API_edited

Google Maps JavaScript

Người thực hiện: Vũ Mạnh Cường MSSV: 0912049

Những thứ còn lại

Hiểu được khái niệm các service Ứng dụng được một số service:

Geocoding, Directions, Street View

Google Maps JavaScript

Giới thiệu chung

Demo

Sơ lược các service

Giới thiệu chung

• Là một dịch vụ miễn phí từ Google• Dùng để xây dựng các ứng dụng dựa

trên địa điểm

Khởi tạo API

• Chèn đoạn script sau<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"> </script>

Khởi tạo API

• Hàm khởi tạo đối tượng Map JavaScript API: function initialize() { var myOptions = { zoom: 8,

center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("div_name"), myOptions); }

Kết quả sau khi khởi tạo API

Công thức chung của các service

Tạo đối tượng của service Tạo request Nhận kết quả và xử lý

Sơ lược các service

Geocoding (tìm địa điểm) Directions (tìm đường đi giữa các điểm) Distance – matrix (khoảng cách giữa các

điểm)

Geocoding

Chức năng: dùng để xác định vị trí một địa điểm thông qua tên địa điểm hoặc qua kinh độ - vĩ độ

Ví dụ: - 227 Nguyễn Văn Cừ HCM

- (10.762495, 106.682428)

Geocoding

Geocoding

Tạo đối tượng của service Tạo request Nhận kết quả và xử lý

Geocoding – Tạo đối tượng

Tạo đối tượng của Geocoding service

geocoder = new google.maps.Geocoder();

→ Thực hiện các request

Geocoding - Tạo request

{ address: string,  latLng: LatLng, bounds: LatLngBounds, region: string}

→ tên địa điểm muốn tìm→ kinh độ, vĩ độ địa điểm

Geocoding - Tạo request

Ví dụ 1:

{

address: nguyễn văn cừ hcm }

Ví dụ 2:

{

latLng: 10.762495, 106.682428 }

Geocoding – Nhận kết quả

results[]: { types[]: string, formatted_address: string, address_components[]: { short_name: string, long_name: string, types[]: string }, geometry: { location: LatLng, location_type: GeocoderLocationType viewport: LatLngBounds, bounds: LatLngBounds }}

→ map.setCenter(results[0].geometry.location);

Geocoding – Nhận kết quả

→ Dựa vào GeocoderStatus

?

Geocoding – GeocoderStatus

• OK : tìm kiếm thành công• ZERO_RESULTS: không tìm được kết quả thỏa• OVER_QUERY_LIMIT: số lần request đã vượt quá giới

hạn• REQUEST_DENIED : request bị từ chối• INVALID_REQUEST : request thiếu tham số

Sơ lược các service

Geocoding (tìm địa điểm) Directions (tìm đường đi giữa các điểm) Distance – matrix (khoảng cách giữa các

điểm)

Directions

Chức năng: dùng để xác định đường đi giữa 2 địa điểm cho trước, các hướng dẫn cụ thể.

Directions – Tạo đối tượng

Tạo đối tượng Directions service:var directionsService = new

google.maps.DirectionsService();→ Thực hiện các request

Directions – Tạo đối tượng

Tạo đối tượng Directions Display:var directionsDisplay = new

google.maps.DirectionsRenderer(rendererOptions);→ Thể hiện kết quả của request

directionsDisplay.setMap(map);→ Gắn kết quả lên bản đồ.

Directions – Tạo request

{ origin: LatLng | String, destination: LatLng | String, travelMode: TravelMode, unitSystem: UnitSystem, waypoints[]: DirectionsWaypoint, optimizeWaypoints: Boolean, provideRouteAlternatives: Boolean, avoidHighways: Boolean, avoidTolls: Boolean region: String}

Directions – Tạo request

VD:{ origin:"An Sương", destination: "Nguyễn Trãi HCM", waypoints: [ { location:"Nguyễn Văn Cừ HCM", stopover:true }], travelMode: TravelMode.DRIVING, unitSystem: UnitSystem.IMPERIAL}

Directions – Nhận kết quả

response

- Directions Routes

-Directions Legs

- Directions Step

→ directionsDisplay.setDirections(response)

Directions – Kết quả

Directions – Waypoints

- Chứa một hoặc nhiều địa điểm.

- Cấu trúc:

waypoints: [ { location: string, stopover:boolean

}]

Directions – Waypoints

Ví dụ:

waypoints: [ { location: An Dương Vương HCM, stopover:true }

{ location: Lý Thường Kiệt HCM stopover:true }

]

Directions – Waypoints

Demo