Google Map API : Services


Geocoding là việc xử lý từ địa chỉ (VD : 1600 Amphitheatre Parkway, Mountain View, CA) tới number trong google maps(VD : latitude 37.423021 and longitude -122.083739) .
1) Code 1 geocode basic (từ địa chỉ leter sang địa chỉ number) như sau :

var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeAddress() {
    var address = document.getElementById("address").value;
    if (geocoder) {
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
              map: map, 
              position: results[0].geometry.location
          });
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  }

<body onload="initialize()">
 <div id="map_canvas" style="width: 320px; height: 480px;"></div>
  <div>
    <input id="address" type="textbox" value="Sydney, NSW">
    <input type="button" value="Encode" onclick="codeAddress()">
  </div>
</body>

Giải thích :
a) Tạo form :

<div id="map_canvas" style="width: 320px; height: 480px;"></div>
  <div>
    <input id="address" type="textbox" value="Sydney, NSW">
    <input type="button" value="Encode" onclick="codeAddress()">
  </div>

b) Viết hàm Address , trong đó có các điều cần lưu ý như sau :
Đầu tiên lấy address (là tên):

var address = document.getElementById("address").value;

Sau đó gọi geocode:

geocoder.geocode({ 'address': address}, function(results, status) {
...});

Trong đó address là địa chỉ. Mở rộng thêm , ta có mảng geocode :

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

. Các thông số lần lượt khai báo như vậy .
Và cuối cùng là hàm trỏ tới center điểm click và add marker vào :

map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
              map: map, 
              position: results[0].geometry.location
          });

Demo : http://code.google.com/intl/fr/apis/maps/documentation/v3/examples/geocoding-simple.html
2) Code 1 geocode basic (từ địa chỉ number sang địa chỉ letter) như sau :

var geocoder;
  var map;
  var infowindow = new google.maps.InfoWindow();
  var marker;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(40.730885,-73.997383);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeLatLng() {
    var input = document.getElementById("latlng").value;
    var latlngStr = input.split(",",2);
    var lat = latlngStr[0];
    var lng = latlngStr[1];
    var latlng = new google.maps.LatLng(lat, lng);
    if (geocoder) {
      geocoder.geocode({'latLng': latlng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (results[1]) {
            map.setZoom(11);
            marker = new google.maps.Marker({
                position: latlng, 
                map: map
            }); 
            infowindow.setContent(results[1].formatted_address);
            infowindow.open(map, marker);
          }
        } else {
          alert("Geocoder failed due to: " + status);
        }
      });
    }
  }

Giải thích :
Code trên chỉ khác code trước là :

var input = document.getElementById("latlng").value;
    var latlngStr = input.split(",",2);
    var lat = latlngStr[0];
    var lng = latlngStr[1];

Đầu tiên lấy giá trị từ id “latlng”, sau đó cắt giá trị đó ra thành 2 phần ,đưa vào mảng . Vd : Giá trị nhập vào là “2,4” thì mảng latlngStr={[0]=>2,[1]=>4} . Sau đó lat={0},lng={4} .
Sau đó , ta so sánh

{'latLng': latlng}

chứ không so sách

'address': address

như ở ví dụ 1.
Và 1 điểm nữa là : giá trị result trả về .
Ở ví dụ 1 , ta thấy result[0], còn ví dụ này, result[1], tại sao vậy ?
Sau khi google trỏ tới địa chỉ mà ta gõ vào , thì kết quả trả về là 1 mảng result gồm nhiều kết quả định dạng khác nhau . Và ta chỉ việc lọc lấy kết quả mình mong muốn trả về .
List full định dạng như sau (gồm 7 định dạng):

results[0].formatted_address: "275-291 Bedford Ave, Brooklyn, NY 11211, USA",
results[1].formatted_address: "Williamsburg, NY, USA",
results[2].formatted_address: "New York 11211, USA",
results[3].formatted_address: "Kings, New York, USA",
results[4].formatted_address: "Brooklyn, New York, USA",
results[5].formatted_address: "New York, New York, USA",
results[6].formatted_address: "New York, USA",
results[7].formatted_address: "United States"

Vậy VD 1 ta lấy result[0] tức là giá trị trả về có đầy đủ các tham số .
Còn VD 2 ta lấy result[1] tức là giá trị trả về chỉ bao gồm 3 tham số .
Ngoài ra , result còn trả về nhiều giá trị hơn , chứ không chỉ là format_address :

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

Các giá trị đó là :
+ types : là kiểu biểu trưng cho dạng trả về. VD : “Chicago” thì type là locality . Sau đây là list các types trả về :

* street_address indicates a precise street address.
* route indicates a named route (such as "US 101").
* intersection indicates a major intersection, usually of two major roads.
* political indicates a political entity. Usually, this type indicates a polygon of some civil administration.
* country indicates the national political entity, and is typically the highest order type returned by the Geocoder.
* administrative_area_level_1 indicates a first-order civil entity below the country level. Within the United States, these administrative levels are states. Not all nations exhibit these administrative levels.
* administrative_area_level_2 indicates a second-order civil entity below the country level. Within the United States, these administrative levels are counties. Not all nations exhibit these administrative levels.
* administrative_area_level_3 indicates a third-order civil entity below the country level. This type indicates a minor civil division. Not all nations exhibit these administrative levels.
* colloquial_area indicates a commonly-used alternative name for the entity.
* locality indicates an incorporated city or town political entity.
* sublocality indicates an first-order civil entity below a locality
* neighborhood indicates a named neighborhood
* premise indicates a named location, usually a building or collection of buildings with a common name
* subpremise indicates a first-order entity below a named location, usually a singular building within a collection of buildings with a common name
* postal_code indicates a postal code as used to address postal mail within the country.
* natural_feature indicates a prominent natural feature.
* airport indicates an airport.
* park indicates a named park.
* post_box indicates a specific postal box.
* street_number indicates the precise street number.
* floor indicates the floor of a building address.
* room indicates the room of a building address.

+ formatted_address : Là địa chỉ trả về .
+ address_components : là chi nhỏ địa chỉ ra .
+ geometry[] : các tham số cần lấy ra.
.location : tâm điểm trả về … và các thông số khác .
3) Hướng(Directions) : Ta có thể tính toán Hướng bằng Object DirectionsService .
Ta tham khảo code sau

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var myOptions = {
    zoom:7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  directionsDisplay.setMap(map);
}
  
function calcRoute() {
  var start = document.getElementById("start").value;
  var end = document.getElementById("end").value;
  var request = {
    origin:start, 
    destination:end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}

<div>
<b>Start: </b>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<b>End: </b>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>

Giải thích : Code trên đầu tiên ta tạo select box để chọn giá trị, khi change thì gọi hàm calcRoute() và xử lý .
Để hiểu rõ code , đầu tiên ta phải hiểu :
a)Direction Request : 1 Direction cần những gì ? Nó là 1 mảng chứa

{
  origin: LatLng | String,
  destination: LatLng | String,
  travelMode: DirectionsTravelMode,
  unitSystem: DirectionsUnitSystem,
  waypoints[]: DirectionsWaypoint,
  provideTripAlternatives: Boolean,
  region: String
}

+origin: Điểm đầu.
+destination: Điểm cuối
+travelMode: Có 2 tham số là DirectionsTravelMode.DRIVING và DirectionsTravelMode.WALKING .
+unitSystem : Kết quả trả về là met hoặc kilomet : DirectionsUnitSystem.METRIC và DirectionsUnitSystem.IMPERIAL .
+waypoints : Các chặng dừng giữa đường đi .Xem chi tiết tại : Đây .

+provideTripAlternatives : Nếu set true, có thể có nhiều đường đi để tới điểm đích , dĩ nhiên , khi làm vậy thì thời gian xử lý bản đồ sẽ cao hơn .
Và đây là 1 điểm ví dụ :

{
  origin: "Chicago, IL",
  destination: "Los Angeles, CA",
  waypoints: [
    {
      location:"Joplin, MO", 
      stopover:false
    },{
      location:"Oklahoma City, OK",
      stopover:true
    }],
  provideTripAlternatives: false,
  travelMode: DirectionsTravelMode.DRIVING,
  unitSystem: DirectionsUnitSystem.IMPERIAL
}

b) Tiếp theo ta cần hiểu biến DirectionsService và DirectionsRenderer .
DirectionsService sẽ được khởi tạo , thông qua điểm Request trên mà ta đã tạo , sau đó nó return về DirectionsResult , sau đó DirectionsResult trả kết quả tới DirectionsRenderer .
Vầy để tạo DirectionsRenderer ta làm như sau :
# Tạo đối tượng DirectionsRenderer .
# Gọi method setMap() để đưa nào vào map.
# Gọi setDirections() để đưa DirectionsResult vào .
Vậy là ta có thể hiểu được đường đi của code rồi .
Demo : http://code.google.com/intl/fr/apis/maps/documentation/v3/examples/directions-simple.html
4) DirectionsRenderer không chỉ hiện ra đường đi, mà nó còn có thể hiện ra list danh sách các điểm mà nó đi ngang qua :
– Chỉ đơn giản thêm Panel hiện ra :

directionsDisplay.setPanel(document.getElementById("directionsPanel"));

– Và định nghĩa div có id là “directionsPanel”

<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>

.
Demo : http://code.google.com/intl/fr/apis/maps/documentation/v3/examples/directions-panel.html
5) Và các direction phức tạp khác :
Demo 1 : http://code.google.com/intl/fr/apis/maps/documentation/v3/examples/directions-complex.html
Demo 2 : http://code.google.com/intl/fr/apis/maps/documentation/v3/examples/directions-waypoints.html

<sưu tầm>

Advertisements
%d bloggers like this: