Bạn dùng com phocamap, cũng dễ cấu hình, lại có luôn phần router giúp khách hàng tìm đường bạn có thể xem ở web mình đang sử dụng : http://quangvietco.com.vn/lien-he.html
HTML: <script> function createMarker(point,map, info) { var marker = new GMarker(point); map.openInfoWindowHtml(point, info); GEvent.addListener(marker, "mouseover", function() { marker.openInfoWindowHtml(info); }); return marker; } function initmap(lat,lng,z,info) { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(lat, lng), z); map.setMapType(G_NORMAL_MAP); var point = new GLatLng(lat, lng); map.addOverlay(createMarker(point,map,info)); var mapControl = new GMapTypeControl(); map.addControl(mapControl); map.addControl(new GLargeMapControl()); } } </script> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIABAAtHobeYl1heSJpxsGMBoPOBStqsIB6TA8lyWacGVndCpXQEpOZRRfb8ztOxEnw7F7fHEskzEgE0KpaQ&hl=vi" type="text/javascript"></script> <script> window.onload = function() {initmap(21.016604,105.80523,16,'<b>Shop Me Yêu Bé.VN</b></br>Tầng 1, Tòa nhà 157 Bis, ngõ 100 đường Nguyễn Chí Thanh, Hà Nội');}; </script> chỗ key=... các bạn sửa đi 1 chữ cái trong đó là xong. Còn địa chỉ initmap thì vào trang googlemap mà lấy tọa đồ cần thiết ! Demo: http://www.shopmeyeube.vn/ban-do-duong-di.html
Mình thì hay dùng Plugin google map. Có thể để bát cứ nơi đâu với tên {mosmap}. Có thể override để dùng nhiều mục đích như kích cỡ khác nhau. Trước khi sử dụng bạn phải đăng ký Google để có map key Sau khi có key vào admin -> Quản lý Plugin -> Đưa key vào + lấy kinh tuyến + vĩ tuyến đưa vào. (vì ko có là nó đưa qua tới mỹ luôn). Chúc thuận lợi.
Sau khi cài đặt bạn mở com phocamap -> chọn tạo Maps mới Vào tạo Maps bạn điền các thông tin của bạn như bình thường, đến khung latitude, ngay bên cạnh bạn sẽ thấy button Setcoordinates click vào nó Hiện ra 1 topup có bản đồ, bạn điền đúng địa chỉ của bạn ở khung nhỏ bên dưới : Set Coordinates by address : rồi click Set Các thông tin còn lại thì tùy ý thích mà bạn chọn, có thê thử từng option để thấy cách hiển thị. Sau khi xong save lại và qua menu tạo menu mới chọn loại phocamap, là xong, ra trang chủ xem lại.
Bài Viết của bạn rất bổ ích,nhưng mình xin bổ sung thêm là phải cấu hình thêm ở phần markers nữa mới đầy đủ . Thanks bạn nhìu , làm cái này dễ cấu hình ko phải xin cái API key gì đó ... Like
của mình cài xong, vào bị lỗi như sau. mong bạn chỉ giúp. 500 - An error has occurred. Table 'joomla.h9xbn_phocamaps_icon' doesn't exist SQL=SELECT a.*,l.title AS language_title,uc.name AS editor FROM `h9xbn_phocamaps_icon` AS a LEFT JOIN `h9xbn_languages` AS l ON l.lang_code = a.language LEFT JOIN h9xbn_users AS uc ON uc.id=a.checked_out WHERE (a.published IN (0, 1)) ORDER BY a.ordering asc Table 'joomla.h9xbn_phocamaps_icon' doesn't exist SQL=SELECT a.*,l.title AS language_title,uc.name AS editor FROM `h9xbn_phocamaps_icon` AS a LEFT JOIN `h9xbn_languages` AS l ON l.lang_code = a.language LEFT JOIN h9xbn_users AS uc ON uc.id=a.checked_out WHERE (a.published IN (0, 1)) ORDER BY a.ordering asc LIMIT 0, 20 Table 'joomla.h9xbn_phocamaps_icon' doesn't exist SQL=SELECT a.*,l.title AS language_title,uc.name AS editor FROM `h9xbn_phocamaps_icon` AS a LEFT JOIN `h9xbn_languages` AS l ON l.lang_code = a.language LEFT JOIN h9xbn_users AS uc ON uc.id=a.checked_out WHERE (a.published IN (0, 1)) ORDER BY a.ordering asc
CHẢNG CẦN PHẢI SÀI COM J CHO NÓ NĂNG WEB THEO MÌNH CHỈ CẦN ĐĂNG NHẬP GOOGLE MAP RỒI TÌM ĐỊA CHỈ CỦA MÌNH MUỐN CHO VAO PHAN LIEN HE -->lẤY MÃ NHÚNG-->VÀO components/com_contact/views/contact/tmpl/default.php TÌM ĐẾN DÒNG <div class="contact-image"> PAST VÔ LÀ OK XÓA BỎ CÁI : <!--?php echo JHtml::_('image', $this->contact->image, JText::_('COM_CONTACT_IMAGE_DETAILS'), array('align' => 'middle')); ?--> RỒI VÀO PHẦN Contact Manager: Contact cho no hiển thi ảnh lên như hình là ok; Mình đã làm cho trang http://matdung.vn/lien-he.html bạn có thể xem
Vụ lỗi này thì mình pó tay, chưa gặp bao giờ, bạn kiểm tra kỹ phiên bản phocamap và joomla nhé, up cho cao thủ joomla nào biết hỗ trợ giùm
Đơn giản nhất là nhúng code các bác ợ HTML: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Chèn Google Maps vào website</title> <!-- Chuỗi khai báo lấy tham số của google maps --> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=vi"></script> <script type="text/javascript"> var map; function initialize() { var myLatlng = new google.maps.LatLng(Vứt tọa độ vào đây); var myOptions = { zoom: 16, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("div_id"), myOptions); // Biến text chứa nội dung sẽ được hiển thị var text; text= "<b style='color:#00F' " + "style='text-align:center'>Trụ sở công ty mình ở đây<br />" + "<img src='Link đến logo công ty' /></b>"; var infowindow = new google.maps.InfoWindow( { content: text, size: new google.maps.Size(100,50), position: myLatlng }); infowindow.open(map); var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"Tên công ty" }); } </script> </head> <body onLoad="initialize()"> <div id="div_id" style="height:500px; width:600px"></div> </body> </html> Mở cái bài viết liên hệ ra, tương đoạn code này vào cuối là chạy tẹt . Em làm thế với cái web này http://aothethao.net/lien-he.html
Bạn ơi mình cài giống như bạn sao. Giờ hiển lỗi này: Google đã vô hiệu hóa sử dụng API Maps cho ứng dụng này. Khóa được cung cấp là không phải là khóa API Google hợp lệ, hoặc không được ủy quyền cho API Javascript phiên bản 3 của Google Maps trên trang web này. Nếu bạn là chủ sở hữu của ứng dụng này, bạn có thể tìm hiểu cách lấy khóa hợp lệ tại đây: https://developers.google.com/maps/documentation/javascript/tutorial#Obtaining_Key làm sao khắc phục bạn. Thanks bạn nhiều.
Có 2 cách khắc phục 1.Vào plugin google map - hiệu chỉnh version 3. sang 2. (chú ý dãy option bên phải sẽ thấy). 2. Vào config Api của google https://code.google.com/apis/console và turn on version 2.0, version 3.0 như hình ảnh.
cái này bạn có thể hướng dẫn mình lấy dẫn đường bằng tiếng việt được như bạn không? mình làm thì nó ra mỗi tiếng anh thôi