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

Leave a comment »

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

Leave a comment »

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

Leave a comment »

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>

Leave a comment »

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>

Leave a comment »

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/

Leave a comment »

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à :

Leave a comment »

Google Maps Api : Part 2 – Chapter 5 : Manipulating Third-Party Data


Using Downtable Textfile
Trong 3 chương tới , chúng ta sẽ làm việc với database : US Federal Communications
Commission (FCC) Antenna Structure Registration (ASR) . Database này sẽ giúp chúng ta làm được nhiều việc để build map .

Thế tại sao lại là FCC ASR , vì nhửng lý do sau đây :

- Data free để sử dụng , dễ dàng thao tác và sử dụng .
- Nó có nhiều data , cho phép chúng ta có tầm nhìn tổng quát hơn . Nó có hơn 120.000 record .
- Latitues và longtitues đều có trong các record … và còn nhiều lý do khác .

Downloading the Database
Điều đầu tiên bạn cần là lấy dữ liệu về , download tại : Đây . ~ 23 Mb . Sau khi download về giải nén RA.dat, EN.dat, and CO.dat ra và chép vào thư mục working . Bạn không cần những cái khác .

+RA.dat là file chính , nó sẽ kết hợp các file còn lại với nhau . Nó chứa thông tin như size , address …
+EN.dat là cấu trúc của khách hàng .
+CO.dat là cấu trúc của latitue và longtitute .

RA.dat :

EN.dat :

CO.dat :

Database khá phức tạp , vì thế chúng ta không cần care về data trong database , chúng ta chỉ quan tâm tới location và thuộc tính của chúng .

Parsing CSV data
Chúng ta sẽ parsing file trên bằng simple PHP . Hãy cùng xem ví dụ sau :

<?php
// Open the Registrations and Applications Data file
$handle = @fopen("RA.dat","r");
// Parse and output the first 50 USI numbers.
$i = 0;
if ($handle) {
while (!feof($handle)) {
$buffer = fgets($handle, 1024);
$row = explode("|",$buffer);
echo "USI#: ".$row[4]."<br />\n";
if ($i == 50) break; else $i++;
}
fclose($handle);
}
?>

Code trên chỉ đơn giản là xuất thông tin ra màn hình. Không quan trọng lắm .

Import .dat file vào database
Để import vào databse , ta cần tạo database , code tạo như sau (mysql):

CREATE TABLE fcc_location (
loc_id int(10) unsigned NOT NULL auto_increment,
unique_si_loc bigint(20) NOT NULL default '0',
lat_deg int(11) default '0',
lat_min int(11) default '0',
lat_sec float default '0',
lat_dir char(1) default NULL,
latitude double default '0',
long_deg int(11) default '0',
long_min int(11) default '0',
long_sec float default '0',
long_dir char(1) default NULL,
longitude double default '0',
PRIMARY KEY (loc_id),
KEY unique_si (unique_si_loc)
) ENGINE=MyISAM ;
CREATE TABLE fcc_owner (
owner_id int(10) unsigned NOT NULL auto_increment,
unique_si_own bigint(20) NOT NULL default '0',
owner_name varchar(200) default NULL,
owner_address varchar(35) default NULL,
owner_city varchar(20) default NULL,
owner_state char(2) default NULL,
owner_zip varchar(10) default NULL,
PRIMARY KEY (owner_id),
KEY unique_si (unique_si_own)
) ENGINE=MyISAM ;
CREATE TABLE fcc_structure (
struc_id int(10) unsigned NOT NULL auto_increment,
unique_si bigint(20) NOT NULL default '0',
date_constr date default '0000-00-00',
date_removed date default '0000-00-00',
struc_address varchar(80) default NULL,
struc_city varchar(20) default NULL,
struc_state char(2) default NULL,
struc_height double default '0',
struc_elevation double NOT NULL default '0',
struc_ohag double NOT NULL default '0',
struc_ohamsl double default '0',
struc_type varchar(6) default NULL,
PRIMARY KEY (struc_id),
KEY unique_si (unique_si),
KEY struc_state (struc_state)
) ENGINE=MyISAM;

Sau khi bạn tạo table , chạy ví dụ tiếp theo , để đưa data và database :

<?php
set_time_limit(0); // this could take a while
// Connect to the database
require($_SERVER['DOCUMENT_ROOT'] . '/db_credentials.php');
$conn = mysql_connect("localhost", $db_name, $db_pass);
mysql_select_db("googlemapsbook", $conn);
// Open the Physical Location Coordinates file
$handle = @fopen("RA.dat","r");
if ($handle) {
while (!feof($handle)) {
$buffer = fgets($handle, 4096);
$row = explode("|",$buffer);
if ($row[3] > 0) {
// Modify things before we insert them
$row[12] = date("Y-m-d",strtotime($row[12]));
$row[13] = date("Y-m-d",strtotime($row[13]));
$row[23] = addslashes($row[23]);
$row[24] = addslashes($row[24]);
$row[30] = addslashes($row[30]);
// Formulate our query
$query = "INSERT INTO fcc_structure (unique_si, date_constr,
date_removed, struc_address, struc_city, struc_state, struc_height,
struc_elevation, struc_ohag, struc_ohamsl, struc_type)
VALUES ({$row[4]}, '{$row[12]}', '{$row[13]}', '{$row[23]}',
'{$row[24]}', '{$row[25]}', '{$row[26]}', '{$row[27]}', '{$row[28]}',
'{$row[29]}', '{$row[30]}')";
// Execute our query
$result = @mysql_query($query);
if (!$result) echo("ERROR: Duplicate structure info #{$row[4]} <br>\n");
}
}
fclose($handle);
}
echo "Done Structures. <br>\n";
// Open the Ownership Data file
$handle = @fopen("EN.dat","r");
if ($handle) {
while (!feof($handle)) {
$buffer = fgets($handle, 4096);
$row = explode("|",$buffer);
if ($row[3] > 0) {
$row[7] = addslashes($row[7]);
$row[14] = addslashes($row[14]);
$row[16] = addslashes($row[16]);
$query = "INSERT INTO fcc_owner (unique_si_own, owner_name,
owner_address, owner_city, owner_state, owner_zip) VALUES ({$row[4]},
'{$row[7]}', '{$row[14]}','{$row[16]}', '{$row[17]}', '{$row[18]}')";
$result = @mysql_query($query);
if (!$result) {
// Newer information later in the file: UPDATE instead
$query = "UPDATE fcc_owner SET owner_name='{$row[7]}',
owner_address='{$row[14]}', owner_city='{$row[16]}',
owner_state='{$row[17]}', owner_zip='{$row[18]}'
WHERE unique_si_own={$row[4]}";
$result = @mysql_query($query);
if (!$result)
echo "Failure to import ownership for struc. #{$row[4]}<br>\n";
else
echo "Updated ownership for struc. #{$row[4]} <br>\n";
}
}
}
fclose($handle);
}
echo "Done Ownership. <br>\n";
// Open the Physical Locations file
$handle = @fopen("CO.dat","r");
if ($handle) {
while (!feof($handle)) {
$buffer = fgets($handle, 4096);
$row = explode("|",$buffer);
if ($row[3] > 0) {
if ($row[9] == "S") $sign = -1; else $sign = 1;
$dec_lat = $sign*($row[6]+$row[7]/60+$row[8]/3600);
if ($row[14] == "W") $sign = -1; else $sign = 1;
$dec_long = $sign*($row[11]+$row[12]/60+$row[13]/3600);
$query = "INSERT INTO fcc_location (unique_si_loc, lat_deg, lat_min,
lat_sec, lat_dir, latitude, long_deg, long_min, long_sec,
long_dir, longitude) VALUES ({$row[4]},'{$row[6]}', '{$row[7]}',
'{$row[8]}', '{$row[9]}', '$dec_lat','{$row[11]}', '{$row[12]}',
'{$row[13]}', '{$row[14]}', '$dec_long')";
$result = @mysql_query($query);
if (!$result) {
// Newer information later in the file: UPDATE instead
$query = "UPDATE fcc_location SET lat_deg='{$row[6]}',
lat_min='{$row[7]}', lat_deg='{$row[8]}', lat_dir='{$row[9]}',
latitude='$dec_lat', long_deg='{$row[11]}', long_min='{$row[12]}',
long_sec='{$row[13]}', long_dir='{$row[14]}', longitude='$dec_long'
WHERE unique_si_loc='{$row[4]}'";
$result = @mysql_query($query);
if (!$result)
echo "Failure to import location for struc. #{$row[4]} <br>\n";
else
echo "Updated location for struc. #{$row[4]} <br>\n";
}
}
}
fclose($handle);
}
echo "Done Locations. <br>\n";
?>

Sử dụng dữ liệu bạn mới nạp vào
Bạn có thể dùng dữ liệu qua 3 cách :
+Sử dụng php để lọc table và đưa nó vào mảng, sau đó thao tác trong nó .
+Sử dụng lệnh Select để lấy ra kết quả bạn muốn .
+Nếu version của bạn có hỗ trợ views, tạo views và dùng php để trỏ tới nó.

Cách 1 : đưa dữ liệu vào mảng và thao tác nó :

<?php
// Connect to the database
require($_SERVER['DOCUMENT_ROOT'] . '/db_credentials.php');
$conn = mysql_connect("localhost", $db_name, $db_pass);
mysql_select_db("googlemapsbook", $conn);
// Create our temporary holding arrays
$hawaiian_towers = array();
$usi_list = array();
// Get a list of the structures in Hawaii
$structures = mysql_query("SELECT * FROM fcc_structure WHERE struc_state='HI'");
for($i=0; $i<mysql_num_rows($structures); $i++) {
$row = mysql_fetch_array($structures, MYSQL_ASSOC);
$hawaiian_towers[$row['unique_si']] = $row;
$usi_list[] = $row['unique_si'];
}
unset($structures);
// Get all of the owners for the above structures
$owners = mysql_query("SELECT * FROM fcc_owner
WHERE unique_si_own IN (".implode(",",$usi_list).")");
for($i=0; $i<mysql_num_rows($owners); $i++) {
$row = mysql_fetch_array($owners, MYSQL_ASSOC);
$hawaiian_towers[$row['unique_si_own']] =
array_merge($hawaiian_towers[$row['unique_si_own']],$row);
}
unset($owners);
// Figure out the location of each of the above structures
$locations = mysql_query("SELECT * FROM fcc_location
WHERE unique_si_loc IN (".implode(",",$usi_list).")");
for($i=0; $i<mysql_num_rows($locations); $i++) {
$row = mysql_fetch_array($locations,MYSQL_ASSOC);
$hawaiian_towers[$row['unique_si_loc']] =array_merge($hawaiian_towers[$row['unique_si_loc']],$row);
}
unset($locations);
echo memory_get_usage();
?>

Cách 2 : Thao tác thông qua database với các lệnh SQL

<?php
// Connect to the database
require($_SERVER['DOCUMENT_ROOT'] . '/db_credentials.php');
$conn = mysql_connect("localhost", $db_name, $db_pass);
mysql_select_db("googlemapsbook", $conn);
$query = "SELECT * FROM fcc_structure, fcc_owner, fcc_location
WHERE struc_state='HI' AND owner_state='HI'
AND unique_si=unique_si_own AND unique_si=unique_si_loc";
$result = mysql_query($query, $conn);
$joiner = '';
$count = 0;
?>
var markers = [
<?php while($row = mysql_fetch_assoc($result)): ?>
<?= $joiner ?>
{
'latitude': <?= $row['latitude'] ?>,
'longitude': <?= $row['longitude'] ?>,
'name': '<?= addslashes($row['struc_address']) ?>'
}
<?
$joiner = ',';
$count++;
?>
<?php endwhile; ?>
];
/* Memory used at the end of the script: <? echo memory_get_usage(); ?> */
/* Output <?= $count ?> points */

Screen Scrapping
Là bắt link từ trang web khác để đưa dữ liệu vào database . Ý tưởng là : download page , sử dụng CURL or wget, sau đó sử dụng vòng lặp và regular expression hoặc chuỗi để tìm dữ liệu mình muốn , và đưa nó vào database .

Ví dụ về scrapping :
Chúng ta sẽ thử copy dữ liệu từ : http://googlemapsbook.com/
chapter5/scrape_me.html .
File đó có dạng như sau :

(After about 10 lines of header HTML you'll find this...)
<!-- Content Body -->
<table border="1" width="100%">
<tr>
<td >Country</td>
<td >Capital City</td>
<td >Latitude</td>
<td >Longitude</td></tr>
<tr><td>Afghanistan</td>
<td>Kabul</td>
<td>34.28N</td>
<td>69.11E</td></tr>
<tr><td>Albania</td>
<td>Tirane</td>
<td>41.18N</td>
<td>19.49E</td></tr>
<tr><td>Algeria</td>
<td>Algiers</td>
<td>36.42N</td>
<td>03.08E</td></tr>
(and 190 countries later...)
<tr><td>Zambia</td>
<td>Lusaka</td>
<td>15.28S</td>
<td>28.16E</td></tr>
<tr><td>Zimbabwe</td>
<td>Harare</td>
<td>17.43S</td>
<td>31.02E</td>
</tr>
</table>
<!-- Content Body End -->

Điều đầu tiên bạn cần làm là sử dụng wget để save trang về ,hoặc dùng hàm $url=fopen("Liên kết để chúng ta lấy dữ liệu", r) cũng được .

<?php
// Open the file and the database
$handle = @fopen("scrape_me.html","r");
$conn = mysql_connect("localhost","username","password");
mysql_select_db("geocoding_experiment",$conn);
// Status flags and temporary variables
$in_main_table = false;
$count = 0;
if ($handle) {
while (!feof($handle)) {
$buffer = fgets($handle, 4096);
// Look for "<!-- Content Body -->"
if (trim($buffer) == "<!-- Content Body -->") {
$in_main_table = true;
continue;
}
// For each line that has "latlongtable" in it trim
if ($in_main_table && strstr($buffer,'class="latlongtable"') !== false) {
// Dig out the part we care about
$interesting_data = trim(strip_tags($buffer));
switch($count % 4) {
case 0:
// Country Info
$city = array(); // reset
$city[0] = addslashes($interesting_data);
break;
case 1:
// Capital City Info
$city[1] = addslashes($interesting_data);
break;
case 2:
// Latitude Information (determine sign)
$latitude = substr($interesting_data,0,strlen($interesting_data)-1);
if (substr($interesting_data,-1,1) == 'S') $sign = "-";
else $sign = "";
$city[2] = $sign.$latitude;
break;
case 3:
//Longitude Information (determine sign)
$longitude = substr($interesting_data,0,strlen($interesting_data)-1);
if (substr($interesting_data,-1,1) == 'W') $sign = "-";
else $sign = "";
$city[3] = $sign.$longitude;
echo implode(" ",$city)."<br />";
// Write to the database
$result = mysql_query("INSERT INTO capital_cities
(country,capital,lat,lng) VALUES ('".implode("','",$city)."')");
break;
} // switch
// Increment our counter
$count++;
// Stop when we find "<!-- Content Body End -->"
if ($buffer == "<!-- Content Body End -->") break;
} // if
} // while
} // if
fclose($handle);
?>

Sau khi chạy lệnh trên, thì database của ta như sau :

CREATE TABLE capital_cities (
uid int(11) NOT NULL auto_increment,
country text NOT NULL,
capital text NOT NULL,
lat float NOT NULL default '0',
lng float NOT NULL default '0',
PRIMARY KEY (uid),
KEY lat (lat,lng)
) ENGINE=MyISAM;

Leave a comment »

Lỗi khi lấy key từ Google Map API


The Google Maps API server rejected your request. The “sensor” parameter specified in the request must be set to either

cách giải quyết

Has this been corrected. I still get the same error even when I copy and pasted directly from Google’s example with new key and sensor=false.

<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAf_CTjQgQJ5JJBmgz8ygzoxSot4gnmWa2itJb3Z_0FBFvw-392hRsmRwSSNfUSz6vRvqW2HzASwbhyw&#8221; type=”text/javascript”></script>

Comments (1) »

Follow

Get every new post delivered to your Inbox.