[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ề.
https://loomisgreene.com bankruptcy lawyer Loveland. Philadelphia bankruptcy. https://us.animalemaleenhancement.com Animale cbd Male Enhancement.
+ 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!
thanks bạn, bài viết rất có ý nghĩa
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ấ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!
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'
},
cf: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
},
nhahang: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png'
}
};
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!