Hiện thị quãng đường từ 2 điểm A & B trên google maps

Trước đây mình có viết một bài về việc tích hợp google map vào website, ở ví dụ đó chỉ đơn giản là hiện thị thông tin một địa điểm trên google map, chúng ta thường dùng để tích hợp vào trang contact của các website để tăng tính trực quan hơn. Ở ví dụ này mình muốn nói về cách sử dụng Google Map API V3 để hiện thị đường đi giữa hai điểm A & B trên bản đồ, có thể ứng dụng rộng hơn vào các website có chức năng tìm đường đi như website về địa điểm hoặc du lịch...

1. Google Map Api Key

 Để sử dụng api của google, ta phải đăng ký một API Key, các bạn vào link sau và làm theo các bước hướng dẫn

https://developers.google.com/maps/documentation/javascript/get-api-key

 Ở đây mình đã tạo một project Test Google Map API: AIzaSyD20leyBaRoFAvwVxKJwKzWdxJur6vnPiE

Nếu nhu cầu sử dụng là không nhiều, chúng ta có thể dùng gói free của google là đủ

Free up to 25,000 map loads per day.3
$0.50 USD / 1,000 additional map loads, up to 100,000 daily, if billing is enabled.

2. HTML

Ở ví dụ này chúng ta sẽ cần 1 form để nhập địa chỉ 2 điểm A & B, và hiện thị bản đồ sau khi thực hiện tìm kiếm dựa trên địa chỉ vừa nhập
<div id="floating-panel">
    <b>Start: </b>
	<input type="text" id="start" value="218 Bach Dang, Hai Chau, Da Nang, Viet Nam"/>
    <b>End: </b>
	<input type="text" id="end" value="Duong Van Nga, Nai Hien Dong, Son Tra, Da Nang"/>
	<input type="button" value="Submit" id="reloadMap"/>
	<hr/>
	<span id="infoDirections">...</p>
    </div>
   <div id="map"></div>

3. CSS

Tiếp theo là css, ở đây mình sẽ cho bản đồ hiện thị full màn hình và form nhập địa chỉ hiện thì đè lên phía trên

html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

4. Javascript

Sau khi xong phần layout, ta cần dùng các hàm javascript để lấy địa chỉ 2 điểm A & B trên form và hiện thị bản đồ

<script>
      function initMap() {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 7,
          center: {lat: 41.85, lng: -87.65}
        });
        directionsDisplay.setMap(map);

        var onChangeHandler = function() {
         calculateAndDisplayRoute(directionsService, directionsDisplay);
        };
        document.getElementById('reloadMap').addEventListener('click', onChangeHandler);
		
		calculateAndDisplayRoute(directionsService, directionsDisplay);
      }

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        directionsService.route({
          origin: document.getElementById('start').value,
          destination: document.getElementById('end').value,
          travelMode: google.maps.TravelMode.DRIVING
        }, function(response, status) {
          if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
			//get direction info
			var htmlReturn = '';
			var route = response.routes[0];
			htmlReturn += "Distance: <strong>" + route.legs[0].distance.text + "</strong>, Duration: <strong>" + route.legs[0].duration.text + "</strong>";
			document.getElementById('infoDirections').innerHTML  = htmlReturn;
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD20leyBaRoFAvwVxKJwKzWdxJur6vnPiE&callback=initMap">
    </script>

Ở đây cần chú ý thay API của các bạn ở link Javascript

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

Khi đăng ký API Key google cho phép mình lựa chọn API Key đó sẽ hạn chế sử dụng trên domain cụ thể nào đó hoặc cho tất cả các domain, các bạn nên hạn chế API Key trên một domain cụ thể của dự án bạn đang làm để tránh tình trạng vượt quá limited cả gói Free :)

5. Kết luận.

Việc sử dụng google map api khá đơn giản nhưng đem lại tính trực quan cao và làm cho các sản phẩm của các bạn có ấn tượng khá tốt với khách hàng vì tính tương tác của nó.

Các bạn có thể xem demo tại đây hoặc download source tại đây.

Related Post


[Infographic] AWD với RWD
Tuesday, May 3, 2016
Bạn là dân đam mê lập trình web? Chắc bạn đã nghe nhiều đến hai kỹ thuật này rồi nhỉ? Adaptive Web Design (AWD) & Responsive Web Design (RWD) Có thể bạn có đôi chút nhầm lẫn hoặc phân vân khi nghĩ tới chúng, để giúp bạn làm sáng tỏ hơn sự khác nhau giữa AWD và RWD mời bạn xem Infographic...
Sử dụng file SVG cho Website
Sunday, January 10, 2016
Việc hiển thị hình ảnh trên nhiều độ phân giải màn hình là một vấn đề đau đầu với bất kì một ai, dù bạn làm web hay mobile app. Thông thường, khi bạn muốn hiển thị một hình ảnh trên nhiều kích thước màn hình khác nhau, bạn sẽ chọn cách sử dụng nhiều hình ảnh tương ứng với nhiều độ phân giải, và có thể dùng media query của CSS để load chúng ra. Và cách làm này rất tốn kém...
Search

Đăng ký nhận bài mới


Category

Blog Archive