Kết quả 1 đến 4 của 4
  1. #1
    CI New tinapc's Avatar
    Ngày tham gia
    30-11-2013
    Bài viết
    16
    Cảm ơn
    0
    Được cảm ơn 6 trong 3 bài viết

    Tạo Googlemap từ một địa chỉ cố định

    Chào các bạn
    Mình là thành viên mới của 4rum CI VN. Hôm nay mình cũng xin góp tí kinh nghiệm để phát triển 4Rum :)
    Giới thiệu sơ qua nội dung của tut này. Như các bạn đã biết, khi chúng ta làm một số dự án yêu cầu tạo google map từ một địa chỉ khi người dùng nhập vào (những dự án như mua bán nhà đất thường iu cầu muc này)
    1. Nguồn sử dụng:
    -http://maps.googleapis.com/maps/api/geocode
    -https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false

    2. Kỹ năng cho CI:
    - Sử dụng helper bằng cách tạo những hàm bởi chính bạn

    Ok, lets started

    1. Đầu tiên tôi sẽ tạo một helper có tên getlatlang_helper.php và lưu trong thư mục application/helpers/
    - Trong file này tôi tạo một hàm với nội dung như sau:
    Code:
    <?php
    
    
    /* 
     * This function using to get Lat and Lng from a address via google map api
     */
    
    
    if(!function_exists('get_latlng')) {
        function get_latlng($address) {
            $url = "http://maps.googleapis.com/maps/api/geocode/json?address=$address&sensor=false";
    
    
            //Lay du lieu tra ve bang cach su dung ham file_get_contents
            $getmap = file_get_contents($url);
    
    
            //Ket qua tra ve la dang json, To decode, su dung ham json_decode()
            $googlemap = json_decode($getmap);
            
            foreach($googlemap->results as $res){
                $address = $res->geometry;
                $latlng = $address->location;
                //$formattedaddress = $res->formatted_address;
                //echo "Latitude: ". $latlng->lat ."<br />". "Longitude:". $latlng->lng;
            }
            
            //tra ve mot mang voi gia tri cua lat + lng
            return $latlng;
        }
    }
    2. Tôi tạo một Controller có tên create_map.php trong thư mục application/controllers/
    - Để sử dụng helper mà tôi vừa tạo ở trên, trong controller này tôi sẽ load helper đó bằng cách

    Code:
    //Load helper getlatlang_helper
    $this->load->helper('getlatlng');
    - Cụ thể controller của tôi có nội dung như sau:<
    Code:
    <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
    
    
    class Create_map extends CI_Controller {
    
    
        public function __construct(){
            parent::__construct();
    
    
            //Load helper getlatlang_helper
            $this->load->helper('getlatlng');
        }
    
    
        public function index()
        {
            //Toi su dung dia chi nhu sau: 234 Quang Trung, Quảng Ngãi
            $ex_address = "234 Quang Trung, Quảng Ngãi";
    
    
            //Lay gia tri lat + lng tu dia chi tren
            $my_latlng = get_latlng(urlencode($ex_address));
    
    
            //Tao mot so thong tin lien lac de show khi user click len marker
            $title = 'Địa chỉ của tôi';
            $address = $ex_address;
            $phone = '0909-000-000';
            $email = 'tester@yahoo.com';
    
    
            //Gia tri bien de load qua view
            $data = array(
                'title'        => $title,
                'address'    => $address,
                'phone'        => $phone,
                'email'        => $email,
                'mylatlng'    => $my_latlng
            );
    
    
            //Load file view
            $this->load->view('create_map/index', $data);
    
    
        }
    
    
    }
    
    
    /* End of file create_map.php */
    /* Location: ./application/controllers/create_map.php */
    3. Tôi tạo một view có tên index.php trong thư mục application/views/create_map/ với nội dung
    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
            <script>
    
    
            function initialize() {
              var myLatlng = new google.maps.LatLng('<?=$mylatlng->lat?>', '<?=$mylatlng->lng?>');
              var mapOptions = {
                zoom: 15,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
              }
    
    
              var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    
    
              var contentString = '<h3><?=$title?></h3>';
                  contentString +='<p>Địa chỉ: <?=$address?></p>';
                  contentString +='<p>Điện thoại: <?=$phone?></p>';
                  contentString +='<p>Email: <?=$email?></p>';
                  
              var infowindow = new google.maps.InfoWindow({
                  content: contentString
              });
    
    
              var marker = new google.maps.Marker({
                  position: myLatlng,
                  map: map,
                  title: '<?=$title?>'
              });
              google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
              });
            }
    
    
            google.maps.event.addDomListener(window, 'load', initialize);
    
    
                </script>
        </head>
        <body></body>
    </html>
    Ok như vậy là đã xong phần code, bây giờ bạn chạy site của bạn và tận hưởng kết quả :))
    Link demo : http://tina-web.net/tutorial_ci/index.php/create_map
    Link download:https://bitbucket.org/tinapc/ci-tutorial/get/master.zip

    Cảm ơn các bạn đã theo dõi Tut,
    Hẹn các bạn ở Tut sau
    Thank all
    Sửa lần cuối bởi tinapc; 02-12-2013 lúc 06:14 AM.

  2. The Following 3 Users Say Thank You to tinapc For This Useful Post:

    PhanNguyenChuong (04-12-2013),toyotaansuong (06-12-2013),Zen Studio (02-12-2013)

  3. #2
    Super Moderator Zen Studio's Avatar
    Ngày tham gia
    19-06-2013
    Bài viết
    393
    Cảm ơn
    58
    Được cảm ơn 166 trong 123 bài viết
    nhìn demo là ngon rồi, nhưng thêm chút drag để lấy tọa độ nữa thì tuyệt vời, cám ơn nhé
    hay cung chung toi chinh phuc tri thuc

  4. #3
    CI New toyotaansuong's Avatar
    Ngày tham gia
    06-12-2013
    Bài viết
    2
    Cảm ơn
    1
    Thanked 1 Time in 1 Post
    cảm ơn bạn nhé, mình cũng gà mờ vụ này nhưng nay được sáng ra rồi. để demo thử xem thế nào, hy vọng là thành công, có gì rắc rối sẽ lên đây hỏi đáp, bác nhớ tư vấn cho mình nhé, thanks cho bạn phát. bài viết rất chi tiết.
    công ty chúng tôi chuyên ban xe Toyota Camry uy tín và chất lượng

  5. #4
    Moderator 2webvn.com's Avatar
    Ngày tham gia
    27-03-2013
    Bài viết
    203
    Cảm ơn
    24
    Được cảm ơn 119 trong 81 bài viết
    Bạn cũng có thể dùng Javascript:
    http://forum.codeigniter.vn/showthre...oogle-Map.html

  6. The Following User Says Thank You to 2webvn.com For This Useful Post:

    PhanNguyenChuong (07-12-2013)

Chia sẽ và Bình Luận chủ đề Tạo Googlemap từ một địa chỉ cố định trên facebook

Các từ khóa xuất hiện trên google của chủ đề

Chưa có từ khóa lên top google

Tag của Chủ đề này - Hãy Thêm Tags Để bài viết nhanh lên top google

Quyền viết bài

  • Bạn không thể đăng chủ đề mới
  • Bạn không thể gửi trả lời
  • Bạn không thể gửi đính kèm
  • Bạn không thể sửa bài
  •