Tích hợp google maps vào website

Trong bài này mình muốn giới thiệu một đoạn code nhỏ để tích hợp google maps vào website các bạn, cái này phù hợp để tích hợp vào trang liên hệ của 1 website, khi người dùng vào có thể thấy được ví trí công ty trên maps một cách rất trực quan.

1. Mã HTML

- Các bạn để đoạn mã HTML sau vào vị trí cần hiển thị bản đồ

<div id="map_canvas"></div>

2. CSS

- Kích thước bản đồ có thể đặt cố định hoặc để full-width, tùy theo mẫu thiết kế, với những website thiết kế theo hướng responsive cho nhiều thiết bị chúng ta nên để width:100%

 #map_canvas {
            width: 99%;
            height: 200px;
            border:solid 1px #ccc;
        }

3. Javascript

- Mã javascript của maps đầy đủ như sau

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
        function initialize() {
            var myLatlng = new google.maps.LatLng(15.574281, 108.4677385);
            var mapOptions = {
                zoom: 9,
                center: myLatlng
            };

            var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

            var contentString = "<table><tr><th>Công ty đầu tư xây dựng Trung Trung Bộ</th></tr><tr><td>Địa chỉ: 175 Trần Quý Cáp - Tp.Tam Kỳ - Quảng Nam</td></tr></table>";

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'Công ty đầu tư xây dựng Trung Trung Bộ'
            });
            infowindow.open(map, marker);
        }

        google.maps.event.addDomListener(window, 'load', initialize);


    </script>

- Trong đó html trong contentString là popub sẽ hiện thị ở điểm marker của google maps, thông thường các bạn sẽ để thông tin công ty ở đây

- Để định vị marker trên google maps, các bạn chú ý tới đoạn mã

var myLatlng = new google.maps.LatLng(15.574281, 108.4677385);

- Để lấy tọa độ các bạn chỉ cần vào maps.google.com search địa điểm theo địa chỉ đơn vị hiện tại, khi đó tọa độ sẽ hiện thị trên URL kết quả tìm kiếm, 

- Đoạn javascript mình mặc định infowindow mở ra khi map load, để mở bằng sự kiện click lên marker ta thay

infowindow.open(map, marker);

bằng đoạn mã javascript dưới đây

google.maps.event.addListener(marker, 'click', function () {
          infowindow.open(map, marker);
        });

4. Kết luận.

- Việc tích hợp bản đồ vào website khá đơn giản, nhưng đem lại tính trực quan rất tốt cho người dùng

- Google maps còn cho phép một số cấu hình nâng cao, các bạn có thể xem thêm tại đây

Related Post


Giải Pháp Responsive Cho Video Trên Trang Web Của Bạn
Friday, March 14, 2014
Một trong những khó khăn trong việc thiết kế responsive là quản lý các plugin/resource bên ngoài, chẳng hạn như các video Youtube và Vimeo – chúng sử dụng embed iframe mà chúng ta thường copy và nhúng vào trong các trang web. Đây là một vấn đề mà bạn không thể kiểm soát được. Làm việc với các iframe đôi khi thật khó khăn, đặc biệt là với video và việc duy trì tỷ lệ khía cạnh. Có một số thủ thuật CSS mà chúng ta cố gắng làm responsive cho các iframe video, nhưng không thành công.
Nofollow cho các liên kết ngoài sử dụng jQuery
Wednesday, December 11, 2013
Hôm nay mình sẽ hướng dẫn các bạn đặt link Nofollow cho tất cả các liên kết ngoài( hay External Links), cái này nhằm “thông báo” cho thằng Google( hoặc Boot khác) rằng “mày đừng đi vào những link đó”.
Search

Đăng ký nhận bài mới


Category

Blog Archive