Archive for Google Map API

Icon using in Google Map API


When I created my own map service, I couldn’t find a list of all icons, such as “traffic”, “start”, “end”, etc…
So I decided to gather all of them in one place for future generations :)

Images used to construct map controls

panning

http://www.google.com/mapfiles/center.png

- http://www.google.com/mapfiles/east.png

- http://www.google.com/mapfiles/west.png

- http://www.google.com/mapfiles/north.png

- http://www.google.com/mapfiles/south.png

- http://www.google.com/mapfiles/panshadow.png

zoom

- http://www.google.com/mapfiles/zoom-plus.png

- http://www.google.com/mapfiles/zoom-minus.png

- http://www.google.com/mapfiles/slider.png

Mini versions

panning

- http://www.google.com/mapfiles/east-mini.png

- http://www.google.com/mapfiles/west-mini.png

- http://www.google.com/mapfiles/north-mini.png

- http://www.google.com/mapfiles/south-mini.png

zoom

- http://www.google.com/mapfiles/zoom-plus-mini.png

- http://www.google.com/mapfiles/zoom-minus-mini.png

Slider

- http://www.google.com/mapfiles/dslidertop.png

http://www.google.com/mapfiles/dsliderbar.png

- http://www.google.com/mapfiles/dsliderbottom.png

- http://www.google.com/mapfiles/dslidertopshadow.png

- http://www.google.com/mapfiles/dsliderbarshadow.png

- http://www.google.com/mapfiles/dsliderbottomshadow.png

Constructing scale

- http://www.google.com/mapfiles/topbar.png

- http://www.google.com/mapfiles/bottombar.png

- http://www.google.com/mapfiles/horibar400.png

Markers

http://www.google.com/mapfiles/marker.png

http://www.google.com/mapfiles/dd-start.png

http://www.google.com/mapfiles/dd-end.png

- http://www.google.com/mapfiles/markerA.png

…                                                     ….

- http://www.google.com/mapfiles/markerZ.png

- http://www.google.com/mapfiles/shadow50.png

http://maps.google.com/mapfiles/arrow.png

http://maps.google.com/mapfiles/arrowshadow.png

Info Window

http://maps.google.com/mapfiles/iw_nw.png

http://maps.google.com/mapfiles/iw_ne.png

http://maps.google.com/mapfiles/iw_sw.png

http://maps.google.com/mapfiles/iw_tap.png

http://maps.google.com/mapfiles/close.gif

Direction indicators

The number indicates the rotation angle in degrees. Only multiples of 3 are available. For angles in the range 120-357, subtract 120 or 240.

- http://maps.google.com/mapfiles/dir_0.png


http://maps.google.com/mapfiles/dir_3.png
- http://maps.google.com/mapfiles/dir_12.png
Walking directions – the same, but image names are dir_walk_X.png

Powered by Google

–  http://maps.google.com/mapfiles/poweredby.png

Tiles

- http://maps.google.com/mapfiles/water.gif
(Used instead of a real tile when the entire map tile is water)

Screen markers

- http://labs.google.com/ridefinder/images/mm_20_purple.png

http://labs.google.com/ridefinder/images/mm_20_yellow.png

http://labs.google.com/ridefinder/images/mm_20_blue.png

http://labs.google.com/ridefinder/images/mm_20_white.png

http://labs.google.com/ridefinder/images/mm_20_green.png

http://labs.google.com/ridefinder/images/mm_20_red.png

http://labs.google.com/ridefinder/images/mm_20_black.png

http://labs.google.com/ridefinder/images/mm_20_orange.png

http://labs.google.com/ridefinder/images/mm_20_gray.png

http://labs.google.com/ridefinder/images/mm_20_brown.png

- http://labs.google.com/ridefinder/images/mm_20_shadow.png

Comments off

Google Map API : Tutorial


Đoạn code đơn giản nhất để nhúng google maps vào site của chúng ta :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:800px"></div>
</body>
</html>

Code basic nhìn chung cũng giống như phiên bản 2 , với các thông số như : zoom , center , MapTypeId .
Có 4 loại MapTypeID :
* MapTypeId.ROADMAP displays the default road map view
* MapTypeId.SATELLITE displays Google Earth satellite images
* MapTypeId.HYBRID displays a mixture of normal and satellite views
* MapTypeId.TERRAIN displays a physical map based on terrain information.

Example : http://code.google.com/apis/maps/documentation/v3/examples/map-simple.html

Comments off

Google Map API : Event


Event trong bản V3 tương tự như bản V2.
1 ) Chúng ta thử với bản code sau :

var map;
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  google.maps.event.addListener(map, 'zoom_changed', function() {
    setTimeout(moveToDarwin, 3000);
  });
  
  var marker = new google.maps.Marker({
      position: myLatlng, 
      map: map,
      title:"Hello World!"
  });
  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(8);
  });
}
  
function moveToDarwin() {
  var darwin = new google.maps.LatLng(-12.461334, 130.841904);
  map.setCenter(darwin);
}

Code trên chỉ đơn giản là : khi click vào điểm marker trên bản đồ , thì sẽ zoom=8 , và sau đó 3 giây thì chuyển tới điểm darwin .

a) Add marker :

var marker = new google.maps.Marker({
      position: myLatlng, 
      map: map,
      title:"Hello World!"
  });

b) Bật sự kiện click thì zoom:

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

c) Bật sự kiện zoom_change :

google.maps.event.addListener(map, 'zoom_changed', function() {
    setTimeout(moveToDarwin, 3000);
  });

d) Hàm moveToDarwin :

function moveToDarwin() {
  var darwin = new google.maps.LatLng(-12.461334, 130.841904);
  map.setCenter(darwin);
}

2 ) Thử sự kiện click :

var map;
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });
}
  
function placeMarker(location) {
  var clickedLocation = new google.maps.LatLng(location);
  var marker = new google.maps.Marker({
      position: location, 
      map: map
  });

  map.setCenter(location);
}

Biến : event.latLng để ghi nhận giá trị click .

3 ) Code Info Window :

function attachSecretMessage(marker, number) {
  var message = ["This","is","the","secret","message"];
  var infowindow = new google.maps.InfoWindow(
      { content: message[number],
        size: new google.maps.Size(50,50)
      });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

4 ) Lấy properties từ map :
a ) map.getBounds()
b ) map.getCenter()
c ) map.getZoom()
d ) map.setCenter()
… và còn nhiều nữa ở đây :

http://code.google.com/apis/maps/documentation/v3/reference.html

Comments off

Google Map API : OverLays


1) Add marker vào map :

var marker = new google.maps.Marker({
      position: myLatlng, 
      map: map, 
      title:"Hello World!"
});

2) Add marker là ảnh :

var image = 'beachflag.png';
  var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
  var beachMarker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });

3) Add Marker Complex (hay)

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML <area> element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}


Giải thích : Đầu tiên ta gọi hàm setMarker :

setMarkers(map, beaches);

và truyền vào 2 tham số là map(bản đồ), và beaches(là 1 mảng các điểm ta muốn add Marker Complex).
Beaches:

var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

Hàm setMarker được đi như sau :
a)Đầu tiên tạo icon

 var image = new google.maps.MarkerImage('images/beachflag.png',new google.maps.Size(20, 32),new google.maps.Point(0,0),new google.maps.Point(0, 32));

new google.maps.Size(20, 32) : Dài * Rộng .
new google.maps.Point(0,0) : Tâm Icon .
new google.maps.Point(0, 32) : Phạm vi Icon .
b)Sau đó tạo bóng(Shadow):

var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',new google.maps.Size(37, 32),new google.maps.Point(0,0),new google.maps.Point(0, 32));

Các tham số cũng tương tự như tạo Icon .
c) Sau đó tạo Shape :

var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };

d) Cuối cùng là add tất cả vào :

for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }

Lưu ý : Vì location của chúng ta là 1 mảng nên dĩ nhiên beach[1],beach[2]… là các giá trị của mảng : beach[0]=’Bondi Beach’ , beach[1]=-33.890542, beach[2]=151.274856, beach[3]=4 .
Demo : http://code.google.com/intl/fr/apis/maps/documentation/v3/examples/icon-complex.html
4) Vẽ các polygon : Phần này không quan trọng lắm, có thể xem chi tiết tại :

http://code.google.com/intl/fr/apis/maps/documentation/v3/overlays.html

.
5) Info Window:
Đầu tiên ta tạo marker :

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Uluru (Ayers Rock)"
});

Sau đó ta tạo sự kiện cho click vào marker :

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

Cuối cùng khai báo contentString:

<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading">Uluru</h1>'+
    '<div id="bodyContent">'+
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
    'sandstone rock formation in the southern part of the '+
    'Northern Territory, central Australia. It lies 335 km (208 mi) '+
    'south west of the nearest large town, Alice Springs; 450 km '+
    '(280 mi) by road. Kata Tjuta and Uluru are the two major '+
    'features of the Uluru - Kata Tjuta National Park. Uluru is '+
    'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
    'Aboriginal people of the area. It has many springs, waterholes, '+
    'rock caves and ancient paintings. Uluru is listed as a World '+
    'Heritage Site.</p>'+
    '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
    'http://en.wikipedia.org/w/index.php?title=Uluru</a> (last visited June 22, 2009).</p>'+
    '</div>'+
    '</div>

Comments off

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>

Comments off

Google Maps API : Chương 6 – Interface


Css : A Touch Style.
Trong phần này , chúng ta sẽ sử dụng CSS nhúng vào file HTML của chúng ta .

<link href="style.css" rel="stylesheet" type="text/css" />
...
//code
<div id="map"></div>

Và trong file CSS chỉ đơn giản là gọi :

#map {
width: 500px;
height: 400px;
}

Chỉnh kích thước cho map
Chỉ đơn giản là viết trong file CSS

html, body {
margin: 0;
padding: 0;
height: 100%;
}
#map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Adding Hovering Toolbars
Đầu tiên add toolbar :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"➥
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=API_KEY"➥
type="text/javascript"></script>
<script src="map_data.php" type="text/javascript"></script>
<script src="map_functions.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="map"></div>
<div id="toolbar">
<h1>Cell-Tower Locations</h1>
<ul id="options">
<li><a href="#">Towers</a></li>
<li><a href="#">Poles</a></li>
<li><a href="#">Masts</a></li>
<li><a href="#">Other</a></li>
</ul>
</div>
</body>
</html>

Sau đó add css vào

#toolbar {
position: absolute;
top: 20px;
left: 60px;
width: 400px;
padding: 5px;
background: white;
border: 1px solid black;
}

Exam : http://nippontako.com/chapter6/hoveringToolbar/

Creating Collapsible Side Panels
Tạo side bar bên phải :

<body>
<div id="map-wrapper">
<div id="map"></div>
</div>
<div id="toolbar">
...
</div>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin
accumsan condimentum dolor. Vestibulum ante fabicum...</p>
</div>
</body>

CSS khai báo :

#map-wrapper {
position: relative;
height: 100%;
}
#sidebar {
position: absolute;
top: 0;
width: 300px;
height: 100%;
overflow: auto;
}
body.sidebar-right #map-wrapper { margin-right: 300px; }
body.sidebar-right #sidebar { right: 0; }
body.sidebar-off #map-wrapper { margin: 0; }
body.sidebar-off #sidebar { display: none; }

Exam : http://nippontako.com/chapter6/sidePanel/

Switching Up the Body Classes
Là ta tạo hiệu ứng khi click vào nút hide thì ẩn panel, show thì hiện panel :
Trang body:

<body>

function change :

function changeBodyClass(from, to) {
document.body.className = document.body.className.replace(from, to);
return false;
}

Tạo tool bar :

<div id="toolbar">
...
<ul id="sidebar-controls">
<li><a href="#" id="button-sidebar-hide">Hide</a></li>
<li><a href="#" id="button-sidebar-show">Show</a></li>
</ul>
</div>

gọi function :

document.getElementById('button-sidebar-hide').onclick = function() {➥
return changeBodyClass('sidebar-right', 'sidebar-off'); };
document.getElementById('button-sidebar-show').onclick = function() {➥
return changeBodyClass('sidebar-off', 'sidebar-right'); };

CSS :

body.sidebar-right a#button-sidebar-show { display: none; }
body.sidebar-off a#button-sidebar-hide { display: none; }

Exam : http://nippontako.com/chapter6/sidePanelToggle/

Resizing with the Power of JavaScript
Ta toggle side bar mạnh hơn với javascript và position:behavious :
Function windowHeight:

function windowHeight() {
// Standard browsers (Mozilla, Safari, etc.)
if (self.innerHeight)
return self.innerHeight;
// IE 6
if (document.documentElement && document.documentElement.clientHeight)
return y = document.documentElement.clientHeight;
// IE 5
if (document.body)
return document.body.clientHeight;
// Just in case.
return 0;
}

function handleResize() gọi function trên :

function handleResize() {
var height = windowHeight();
height -= document.getElementById('toolbar').offsetHeight - 30;
document.getElementById('map').style.height = height + 'px';
document.getElementById('sidebar').style.height = height + 'px';
}

Hàm khởi tạo :

function init() {
...
handleResize();
}

Và toolbar bên trang index phải có dạng như vậy :

<body>
<div id="toolbar">
...
</div>
<div id="content">
<div id="map-wrapper">
<div id="map"></div>
</div>
<div id="sidebar">
...
</div>
</div>
</body>

Note : id=sidebar phải nằm trong id=content và sau id=map-wrapper để có thể chạy được .

Exam : http://nippontako.com/chapter6/onResize/

Populating the Side Panel
Side panel hiện tại không đẹp , vì nó show ra tất cả thông tin , khi người dùng click vào marker nào , thì nó cũng không phản ánh, cho nên ta sẽ dùng list để hiện thị tô đen khung, khi người dùng click vào 1 marker nào đó .
Đầu tiên ta khai báo list :

<div id="content">
...
<div id="sidebar">
<ul id="sidebar-list">
</ul>
</div>
</div>

Sau đó trong file data ta khai báo data làm list:

var markers = [
<?php while($row = mysql_fetch_assoc($result)): ?>
<?= $joiner ?>
{
'latitude': <?= $row['latitude'] ?>,
'longitude': <?= $row['longitude'] ?>,
'address': '<?= addslashes($row['struc_address']) ?>',
'city': '<?= addslashes($row['struc_city']) ?>',
'state': '<?= addslashes($row['struc_state']) ?>',
'height': '<?= addslashes($row['struc_height']) ?>',
'elevation': '<?= addslashes($row['struc_elevation']) ?>',
'type': '<?= addslashes($row['struc_type']) ?>',
'owner': '<?= addslashes($row['owner_name']) ?>'
}
<?
$joiner = ',';
$count++;
?>
<?php endwhile; ?>
];

Và bây giờ, ta sẽ dùng PHPDOM để lấy dữ liệu ra , đưa vào trong list , đồng thời dùng hàm focusPoint để trỏ tới khi list được click :

function initializePoint(pointData) {
var point = new GPoint(pointData.longitude, pointData.latitude);
var marker = new GMarker(point);
var listItem = document.createElement('li');
var listItemLink = listItem.appendChild(document.createElement('a'));
listItemLink.href = "#";
listItemLink.innerHTML = '<strong>' + pointData.address + ' </strong><span>' +➥
pointData.city + ', ' + pointData.state + ' (' + pointData.height + 'm)</span>';
var focusPoint = function() {
marker.openInfoWindowHtml(pointData.address);
map.panTo(point);
return false;
}
GEvent.addListener(marker, 'click', focusPoint);
listItemLink.onclick = focusPoint;
document.getElementById('sidebar-list').appendChild(listItem);
map.addOverlay(marker);
}
...
function init() {
...
for(id in markers) {
initializePoint(markers[id]);
}
handleResize();
}

Exam : http://nippontako.com/chapter6/sidePanelData/

Getting Side Panel Feedback
Trong code trên , thì user có thể tương tác với list Item và marker . Nhưng chỉ có khi click vào panel thì marker hiện , còn khi click vào marker thì item không hiện gì .

Để hiện ra highlight trên site panel thì dễ quá , nhưng vấn đề là , khi click lần đầu , it’s mean : “highlight me” , còn click lần khác thì “highlight me and unhighlight the previous selection! ” . Cho nên code sau , chúng ta cần chú ý tới điểm này :

var deselectCurrent = function() {}; // Empty function
function initializePoint(pointData) {
var point = new GPoint(pointData.longitude, pointData.latitude);
var marker = new GMarker(point);
var listItem = document.createElement('li');
var listItemLink = listItem.appendChild(document.createElement('a'));
listItemLink.href = "#";
listItemLink.innerHTML = '<strong>' + pointData.address + ' </strong><span>' +➥
pointData.city + ', ' + pointData.state + ' (' + pointData.height + 'm)</span>';
var focusPoint = function() {
deselectCurrent();
listItem.className = 'current';
deselectCurrent = function() { listItem.className = ''; }
marker.openInfoWindowHtml(pointData.address);
map.panTo(point);
return false;
}
GEvent.addListener(marker, 'click', focusPoint);
listItemLink.onclick = focusPoint;
document.getElementById('sidebar-list').appendChild(listItem);
map.addOverlay(marker);
}

Trong code trên , chú ý dòng

deselectCurrent();
listItem.className = 'current';
deselectCurrent = function() { listItem.className = ''; }

var deselectCurrent = function() {}; // Empty function

Lần đầu tiên chạy, ta gọi hàm deselectCurrent và nó sẽ không làm gì cả , và gán

listItem.className = 'current';

trong lần gọi tiếp theo , thì nó sẽ gọi hàm deselectCurrent lần nữa, nhưng lần này nó có giá trị là :

deselectCurrent = function() { listItem.className = ''; }

Có nghĩa là xóa đi previoust selection, và tiếp theo , nó gán listItem.className = ‘current';
Tiếp tục, khi gọi deselectCurrent nó sẽ xóa previous selection và gán listItem.className = ‘current'; …

Exam : http://nippontako.com/chapter6/sidePanelDataBetter/

Làm loading cho site
Dĩ nhiên để tránh cho người dùng chờ đợi ta phải tạo thanh loading cho site :
Đầu tiên khai báo trong file index.php

<body>
<div id="toolbar">
...</div>
<div id="content">
<div id="map-wrapper">
<div id="map"></div>
</div>
<div id="sidebar">
...
</div>
<div id="alert">
<p>Loading data ...</p>
</div>
</div>
</body>

Sau đó khai báo trong css :

#alert {
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
display: none;
}
#alert p {
width: 150px;
margin: 0 auto 0 auto;
padding: 10px;
background: white;
border: 1px solid #aaa;
}
body.loading #alert { display: block; }

Mới đầu vào , loading sẽ hiện ra , và khi load xong thì chữ “loading” sẽ mất đi, để làm mất thanh loading ta dùng hàm sau :

function init() {
...
changeBodyClass('loading', 'standby');
}

Hàm này sẽ gọi hàm changeBodyClass mà ta đã khai báo trước đó .

Exam : http://nippontako.com/chapter6/nowLoading/

Thao tác với hộp lọc category(Data Point Filtering)
Hiện lên index.

<div id="toolbar">
<h1>Cell-Tower Locations</h1>
<ul id="filters">
</ul>
<ul id="sidebar-controls">
<li><a href="#" id="button-sidebar-hide">hide</a></li>
<li><a href="#" id="button-sidebar-show">show</a></li>
</ul>
</div>

Ở đây , ta có 3 nhiệm vụ chính :
-Sử dụng kĩ thuật để show và hide điểm đích .
-Tìm ra nhóm(category) cần sử dụng trong database.
-Tạo hàm để ẩn tất cả các list thừa .
NV1 :

function initializePoint(pointData) {
var visible = false;
...
GEvent.addListener(marker, 'click', focusPoint);
listItemLink.onclick = focusPoint;
pointData.show = function() {
if (!visible) {
document.getElementById('sidebar-list').appendChild(listItem);
map.addOverlay(marker);
visible = true;
}
}
pointData.hide = function() {
if (visible) {
document.getElementById('sidebar-list').removeChild(listItem);
map.removeOverlay(marker);
visible = false;
}
}
pointData.show();
}

Tức là lần đầu tiên chạy nó sẽ gọi hàm show , và show ra tất cả các điểm .
NV2 :

function init() {
var type;
var allTypes = { 'All':[] };
...
for(id in markers) {
initializePoint(markers[id]);
allTypes[markers[id].type] = true;
}
for(type in allTypes)
{
initializeSortTab(type);
}
handleResize();
changeBodyClass('loading', 'standby');
}

Khởi tạo này có nhiệm vụ điều hướng .
Cuối cùng , ta xem hàm xử lý sortTab:

function initializeSortTab(type) {
var listItem = document.createElement('li');
var listItemLink = listItem.appendChild(document.createElement('a'));
listItemLink.href = "#";
listItemLink.innerHTML = type;
listItemLink.onclick = function() {
changeBodyClass('standby', 'loading');
for(id in markers) {
if (markers[id].type == type || 'All' == type) {
markers[id].show();
} else {
markers[id].hide();
}
}
changeBodyClass('loading', 'standby');
return false;
}
document.getElementById('filters').appendChild(listItem);
}

Exam : http://nippontako.com/chapter6/dataFiltering/

Comments off

Google Map API – chương 4


Building a Store Location Map
Bây giờ chúng ta sẽ gán store của chúng ta lên google maps .
File generate XML là map_data.php

<?php
// Open the ronjons_cache.xml file and load the data for the pins
$datafile = simplexml_load_file("ronjons_cache.xml");
echo "var markers = [\n";
foreach ($datafile->store as $store) {
$description = "{$store->address}<br />";
if ($store->address2) $description .= "{$store->address2}
";
$description .= "{$store->city}, {$store->state}
";
$description .= "{$store->zip}
";
$description .= "Phone: {$store->phone}
";
echo "{
'latitude': {$store->latitude},
'longitude': {$store->longitude},
'name': '{$store->name}',
'description': '$description'
},\n";
}
echo "];\n";
?>

Kết quả xuất ra có dạng

var markers = [
{
'latitude': 39.649652,
'longitude': -74.177547,
'name': '"The Original" Ron Jon Surf Shop',
'description': '901 Central Avenue<br />Long Beach Island,➥
NJ
08008
Phone: (609) 494-8844
'
}, {
'latitude': 28.356577,
'longitude': -80.608069,
'name': '"One of a Kind" Ron Jon Surf Shop',
'description': '4151 North Atlantic Avenue<br />Cocoa Beach,➥
FL
32931
Phone: (321) 799-8888
'
}, {
'latitude': 26.156292,
'longitude': -80.316945,
'name': 'Ron Jon Surf Shop - Sunrise',
'description': '2610 Sawgrass Mills Circle<br />Suite 1415
Sunrise,➥
FL
33323
Phone: (954) 846-1880
'
}, {
'latitude': 28.469972,
'longitude': -81.450143,
'name': 'Ron Jon Surf Shop - Orlando',
'description': '5160 International Drive<br />Orlando,➥
FL
32819
Phone: (407) 481-2555
'
}, {
'latitude': 24.560448,
'longitude': -81.805998,
'name': 'Ron Jon Surf Shop - Key West',
'description': '503 Front Street<br />Key West,➥
FL
33040
Phone: (305) 293-8880
'
}, {
'latitude': 33.783329,
'longitude': -117.890562,
'name': 'Ron Jon Surf Shop - California',
'description': '20 City Blvd.<br />West Building C Suite 1
Orange,➥
CA
92868
Phone: (714) 939-9822
'
}, {
'latitude': 28.40168,
'longitude': -80.59774,
'name': 'Ron Jon Cape Caribe Resort',
'description': '1000 Shorewood Drive<br />Cape Canaveral,➥
FL
32920
Phone: (321) 328-2830
'
},
];

Và file map_functions.js sẽ xuất icon và info Windows ra :

var centerLatitude = 40.6897;
var centerLongitude = -95.0446;
var startZoom = 3;
var map;
var RonJonLogo = new GIcon();
RonJonLogo.image = 'ronjonsurfshoplogo.png';
RonJonLogo.iconSize = new GSize(48, 24);
RonJonLogo.iconAnchor = new GPoint(24, 14);
RonJonLogo.infoWindowAnchor = new GPoint(24, 24);
function addMarker(latitude , longitude, description) {
var marker = new GMarker(new GLatLng(latitude, longitude), RonJonLogo);
GEvent.addListener(marker, 'click',
function() {
marker.openInfoWindowHtml(description);
}
);
map.addOverlay(marker);
}
function init() {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
for(id in markers) {
addMarker(markers[id].latitude , markers[id].longitude,
markers[id].description);
}
}
window.onload = init;

Kết quả của chúng ta sau khi xuất ra là :

Comments off

Follow

Get every new post delivered to your Inbox.