[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.phpget_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ề.

+ 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!

Tấn Việt

Tôi lập trang web này để thỏa mãn sở thích viết cái gì đó vui vui khi rãnh rỗi và đồng thời cũng chia sẻ những gì tôi biết hoặc đọc đâu đó trên mạng về Lập trình web. Tôi hi vọng những bài viết này sẽ giúp ích cho các bạn. Thân ái!

You may also like…

3 Responses

  1. quang tiến says:

    thanks bạn, bài viết rất có ý nghĩa

  2. Kiều Bình Hòa says:

    bạn ơi. có chức năng tìm kiếm nào như của google maps ko? khi bạn nhấn vào địa chỉ nó sẽ trượt tới vị trí mình ấy?

    • Tấn Việt says:

      Tất nhiên là có chứ bạn. Trong bài viết này mình chỉ giới thiệu cách tìm địa chỉ với Google Maps, còn những hiệu ứng như bạn nói thì mình sẽ đề cập trong những bài viết sau. Thân ái!

  3. huy says:

    a ơi cho em hỏi về cái này
    em đang làm ứng dụng tra cứu địa điểm du lịch, em đã tạo 1 database và nhập tất cả các dữ liệu về các địa điểm du lịch như khách sạn, nhà hàng, quán coffee vào. Em đưa thông tin kết nối database ra một file riêng biệt CSDL.php

    Sau đó em xuất chúng ra xml để Bản đồ có thể lấy dữ liệu thông qua các cuộc gọi JavaScript không đồng bộ.

    createElement(“markers”);
    $parnode = $dom->appendChild($node);

    $connection=mysql_connect (localhost, $username, $password);
    if (!$connection) { die(‘Not connected : ‘ . mysql_error());}

    $db_selected = mysql_select_db($database, $connection);
    mysql_query(“SET NAMES utf8”);
    if (!$db_selected) {
    die (‘Can\’t use db : ‘ . mysql_error());
    }
    $bien=$_POST[TIT];
    $query = “SELECT * FROM markers where name like ‘%$bien%’ or address like ‘%$bien%'”;
    $result = mysql_query($query);
    if (!$result) {
    die(‘Invalid query: ‘ . mysql_error());
    }
    header(“Content-type: text/xml”);
    while (($row = mysql_fetch_array($result))){

    $node = $dom->createElement(“marker”);
    $newnode = $parnode->appendChild($node);
    $newnode->setAttribute(“name”, $row[‘name’]);
    $newnode->setAttribute(“address”, $row[‘address’]);
    $newnode->setAttribute(“lat”, $row[‘lat’]);
    $newnode->setAttribute(“lng”, $row[‘lng’]);
    $newnode->setAttribute(“type”, $row[‘type’]);
    }
    echo $dom->saveXML();

    ?>

    Kế tiếp em code đoạn này để đưa các địa điểm trong database ra bản đồ google map:

    Bản đồ du lịch thành phố Đà Nẵng

    //<![CDATA[

    var customIcons = {
    khachsan: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png&#039;
    },
    cf: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png&#039;
    },
    nhahang: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png&#039;
    }
    };

    function load() {
    var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(16.049855,108.222045),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.SATELLITE
    });
    var infoWindow = new google.maps.InfoWindow;

    // Change this depending on the name of your PHP file
    downloadUrl("xuat_xml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
    var name = markers[i].getAttribute("name");
    var address = markers[i].getAttribute("address");
    var type = markers[i].getAttribute("type");
    var point = new google.maps.LatLng(
    parseFloat(markers[i].getAttribute("lat")),
    parseFloat(markers[i].getAttribute("lng")));
    var html = "” + name + “ ” + address;
    var icon = customIcons[type] || {};
    var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: icon.icon
    });
    bindInfoWindow(marker, map, infoWindow, html);
    }
    });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, ‘click’, function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
    });
    }

    function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
    new ActiveXObject(‘Microsoft.XMLHTTP’) :
    new XMLHttpRequest;

    request.onreadystatechange = function() {
    if (request.readyState == 4) {
    request.onreadystatechange = doNothing;
    callback(request, request.status);
    }
    };

    request.open(‘GET’, url, true);
    request.send(null);
    }

    function doNothing() {}

    //]]>

    Tìm kiếm địa điểm

    Tìm đường đi

    và giờ cho em hỏi là giờ em muốn làm chức năng tìm kiếm 1 địa điểm bất kì trong database và chỉ hiện 1 mình nó ra khi load bản đồ thì phải làm sao ạ?
    thank anh nhiều!