[Web] Tìm kiếm địa điểm với Google Maps

Khi có nhu cầu tìm đường đi, địa điểm thì mọi người thường nghĩ ngay đến Google Maps. Đó là dịch vụ bản đồ trực tuyến cung cấp nhiều tiện ích thiết thực, hiệu quả và quan trọng là hoàn toàn miễn phí. Hôm trước tôi đã giới thiệu đến các bạn cách lấy thông tin địa điểm với Google Maps, và trong bài viết này tôi sẽ sử dụng thông tin đó để hiển thị trên bản đồ. Các bạn có thể sử dụng bài viết này để nhúng vào website, giúp người dùng tra tìm đường đi, địa điểm mà không nhất thiết phải vào trang chủ Google Maps.

1, Cấu trúc

Ứng dụng demo mà tôi sử dụng gồm có 2 file. Đó là index.php và get_infor.php với các chức năng như sau :

+ File get_infor.php sẽ đảm nhận việc kết nối đến Google Maps để lấy dữ liệu về.

online casinos

+ File index.php sẽ nhận dữ liệu và hiển thị thông tin trả về lên bản đồ.

2, Mã hóa

Như đã mô tả trong phần Cấu trúc, ở phần này chúng ta sẽ đi vào việc mã hóa các chức năng đó. Cụ thể tôi đã viết đoạn code sau trong file get_infor.php để nhận dữ liệu về. Tôi sử dụng JSON để đẩy dữ liệu sang file index.php .

<?php
/**
* @author Tấn Việt
* @copyright 2012
* @website https://tanvietblog.com
*/
if (!empty($_POST['address_value'])) {
$prepAddr = str_replace(' ', '+', stripUnicode($_POST['address_value']));
$geocode = file_get_contents('http://maps.google.com/maps/api/geocode/json?address='.$prepAddr.'&sensor=false');
$output = json_decode($geocode);
$address = array(
'status' => $output->status,
'lat' => $output->results[0]->geometry->location->lat,
'lng' => $output->results[0]->geometry->location->lng
);
echo json_encode($address);
}
// Loại bỏ dấu tiếng Việt để cho kết quả chính xác hơn
function stripUnicode($str){
if (!$str) return false;
$unicode = array(
'a'=>'á|à|ả|ã|ạ|ă|ắ|ặ|ằ|ẳ|ẵ|â|ấ|ầ|ẩ|ẫ|ậ|Á|À|Ả|Ã|Ạ|Ă|Ắ|Ặ|Ằ|Ẳ|Ẵ|Â|Ấ|Ầ|Ẩ|Ẫ|Ậ',
'd'=>'đ|Đ',
'e'=>'é|è|ẻ|ẽ|ẹ|ê|ế|ề|ể|ễ|ệ|É|È|Ẻ|Ẽ|Ẹ|Ê|Ế|Ề|Ể|Ễ|Ệ',
'i'=>'í|ì|ỉ|ĩ|ị|Í|Ì|Ỉ|Ĩ|Ị',
'o'=>'ó|ò|ỏ|õ|ọ|ô|ố|ồ|ổ|ỗ|ộ|ơ|ớ|ờ|ở|ỡ|ợ|Ó|Ò|Ỏ|Õ|Ọ|Ô|Ố|Ồ|Ổ|Ỗ|Ộ|Ơ|Ớ|Ờ|Ở|Ỡ|Ợ',
'u'=>'ú|ù|ủ|ũ|ụ|ư|ứ|ừ|ử|ữ|ự|Ú|Ù|Ủ|Ũ|Ụ|Ư|Ứ|Ừ|Ử|Ữ|Ự',
'y'=>'ý|ỳ|ỷ|ỹ|ỵ|Ý|Ỳ|Ỷ|Ỹ|Ỵ',
);
foreach($unicode as $nonUnicode=>$uni) $str = preg_replace("/($uni)/i",$nonUnicode,$str);
return $str;
}
?>

Để hiển thị thông tin trên bản đổ, trong file index.php tôi sẽ thêm thư viện Google Maps như sau

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

Cũng trong file index.php tôi thêm các thẻ input và button để người dùng nhập địa chỉ

Nhập địa chỉ
<input id="addressInput" size="50" type="text" value="" />
<button>Hiển thị bản đồ</button>
<div id="show_map_frame"></div>

Tiếp đó tôi sử dụng biến $.POST (jQuery) để xử lý sự kiện khi người dùng click nút xem bản đồ sau khi nhập dữ liệu.

$(document).ready(function(){
$('button').click(function(){
var address = $('#addressInput').val();
var website = $(location).attr('href');
// Kiểm tra người dùng có nhập địa chỉ hay chưa
if (!$.trim(address).length) {
alert('Vui lòng nhập địa chỉ !');
return false;
} else {
// Hiển thị nút chờ (loading)
$('.loading').css('display', 'block');
$('#show_map_frame').html('');
var url = website + 'get_infor.php';
$.post(
url,
{ address_value: address },
function(result) {
// Ẩn nút loading và hiển thị bản đồ
$('.loading').css('display', 'none');
$('#show_map_frame').html('<div id="result_map" style="width: 400px; height: 300px;"></div>');
// Lấy dữ liệu (JSON) từ file get_infor.php
var getData = $.parseJSON(result);
var status = getData.status;
var lat = getData.lat;
var lng = getData.lng;
// Kiểm tra trạng thái trả về
if (status.indexOf('OK') != -1) {
var myOptions = {
zoom: 15,
center: new google.maps.LatLng(lat, lng),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("result_map"), myOptions);
// Tạo chú thích địa điểm trên bản đồ
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: address
});
} else {
alert('Có lỗi xảy ra');
return false;
}
}
);
}
});
});

Như vậy tôi đã hoàn thành việc thêm Google Maps vào website. Các bạn có thể áp dụng cho trang web của mình để tạo nên nét độc đáo, lôi cuốn cũng như phục vụ cho người dùng tốt hơn. Thân ái!