[Web] Sửa lỗi Google Maps không hiển thị trên IE7

1, Google Maps là gì ?

Nhắc đến Google là nhắc đến một công cụ tìm kiếm nổi tiếng mà đến 99,99% người dùng Internet đều biết đến. Nhưng ngoài Google Search ra thì hãng Google còn phát triển nhiều ứng dụng tiện lợi, hữu ích khác như Google Docs, Google Earth, Gmail….Trong đó không thể không nhắc đến Google Maps, bản đồ trực tuyến đồng thời cũng là dịch vụ cho phép người dùng tìm kiếm địa điểm, đường đi, lộ trình…và hoàn toàn miễn phí.

Theo Wikipedia thì Google Maps được định nghĩa như sau:

Google Maps (thời gian trước còn gọi là Google Local) là một dịch vụ ứng dụng và công nghệ bản đồ trực tuyến trên web miễn phí được cung cấp bởi Google và hỗ trợ nhiều dịch vụ dựa vào bản đồ như Google Ride Finder và một số có thể dùng để nhúng vào các trang web của bên thứ ba thông qua Google Maps API. Nó cho phép thấy bản đồ đường sá, đường đi cho xe đạp, cho người đi bộ (những đường đi ngắn hơn 6.2 dặm) và xe hơi, và những địa điểm kinh doanh trong khu vực cũng như khắp nơi trên thế giới.

Một sản phẩm liên quan, đó là Google Earth, một ứng dụng độc lập dành cho Microsoft Windows, Mac OS X và Linux cho phép xem các tính năng mở rộng khác.

Bạn có thể vào trang chủ http://maps.google.com/ hoặc đọc bài viết này để hiểu thêm về các tính năng của Google Maps.

2, Sửa lỗi Google Maps không hiển thị trên IE7

Trước đây tôi cũng đã dành nhiều thời gian để tìm hiểu về Google Maps. Một trong những lỗi mà tôi nhớ nhất khi làm web với Google Maps là nó không hiển thị trên Internet Explorer 7 (IE7). Các bạn hãy tham khảo đoạn code mà tôi viết dưới đây:

AI Porn Scene Generators

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="dhbk" style="width: 592px; height: 352px;"></div>
<script>
var myOptions = {
zoom: 15,
center: new google.maps.LatLng(16.07361,108.14971),
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("dhbk"), myOptions);
// Creating a marker and positioning it on the map
var marker = new google.maps.Marker({
position: new google.maps.LatLng(16.07361,108.14971),
map: map,
title: 'Trường Đại học Bách Khoa',
});
</script>

Và đây là kết quả khi đoạn code trên được chạy trên các trình duyệt khác nhau

+ Với Firefox, Chrome…

+ Và với IE7

 

Sau khi đọc đi đọc lại rất nhiều lần đoạn code đã viết và đọc các tài liệu liên quan đến Google Maps API tôi vẫn không hiểu mình sai chỗ nào mà khiến cho bản đồ không hiểu thị trên IE7 (mặc dù chạy tốt trên IE8,9). Sau đó tra Google, tôi mới biết nguyên nhân vì sao.

Đó là do dấu phẩy ở dòng cuối cùng trong các mục khai báo tùy chọn cho Google Map và IE7 không chấp nhận điều này. Cụ thể ở dòng “title: ‘Trường Đại học Bách Khoa’ ,” và dòng “mapTypeId: google.maps.MapTypeId.ROADMAP,” tôi đã thêm dư một dấu phẩy và khiến cho Google Maps không hiển thị được trên IE7.

Và hình ảnh dưới đây là kết quả khi bỏ đi dấu phẩy

3, Tổng kết

Đây là một lỗi khá hiếm nhưng gây không ít phiền toái cho lập trình viên. Và đây thật sự cũng là một kinh nghiệm quý báu dối với tôi khi làm việc với Google Maps. Với lập trình viên thì việc thêm dấu phẩy ở mỗi dòng code khi khai báo các tùy chọn có thể là 1 thói quen vì nghĩ nó vô hại nhưng đồng thời sẽ gây nhiều khó khăn trong việc fix bugs sau này. Hiện tại lỗi này vẫn chưa được Google khắc phục nên hi vọng bài viết này sẽ gỡ rối cho các bạn nếu gặp phải trường hợp này. Thân ái !