Cách chèn bản đồ Google Map vào website

 KINH DOANH BAN HANG ONLINE


Đã nhiều bạn dùng wordpress thì có sẵn plugin có thể nhúng ngay địa chỉ vào website 1 cách dễ dàng,những với những website ko dùng wordpress thì phải làm sao ?

Hướng dẫn Cách chèn bản đồ Google Map vào website

Bước 1: Đăng ký tài khoản gmail với Google
Bước 2 : Click vào URL : http://code.google.com/apis/maps/
và chọn Sign up for a Google Maps API key
Bước 3 :Nhập website vào rồi click  Generate API key
Bước 4 : Google sẽ create cho bạn key  API
Bước 5 : Copy code sau bỏ vào trước tag </HEAD> trong website của bạn
Bước 6 : Trở lại google, click vào Loading the Maps API sau đó xuất hiện đoạn code . Hãy copy đoạn code   initialize  vào trước thẻ kết thúc </HEAD> trên web của bạn.
Bước 7 : Đưa tag Body sự kiện onload và onunload vào trong thẻ body
Bước 8: Thêm mô tả cho vị trí hiện bản đồ
Click sau dòng map.setCenter(new GLatLng(37.4419,-122.1419), 13);   Enter xuống hàng gõ lệnh sau :

Code: map.openInfoWindow(map.getCenter(), document.createTextNode("170 , de la thanh,HN"));

 

Bước 9: Chỉnh kinh độ , vĩ độ , độ zoom phù hợp nơi muốn hiện bản đồ.
Bước 10: F12 xem thử trang web
Chú ý : có thể chỉnh độ rộng cao  div chứa bản đồ :
<div id=”map_canvas” style=”width: 500px; height: 300px“></div>

• Width : độ rộng
• Height : độ cao

Để tìm được kinh độ , vĩ độ của địa điểm , bạn có thể làm như sau :

Bước 1 : vào  http://open.atlas.free.fr/GMapsTransparenciesImgOver.php
Chọn Map và Zoom out : đến cấp độ 2 ,chọn vị trí là nước Việt Nam
Bước 2 : Nhắp double vào vị trí Việt Nam ,chọn HN và Zoom In đến level 16. Chọn vị trí muốn xác định tọa độ và click double.
Sau đó ta sẽ có tọa độ như sau :

Code:

<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(“map_canvas”));
map.setCenter(new GLatLng(10.779622500015304,106.68488502502441), 17);
map.openInfoWindow(map.getCenter(),
// Đoạn text ghi chú cho địa điểm ta muốn hiện
document.createTextNode(“R4-31 , Phan Khiêm Ích ,Phú Mỹ Hưng -Q7 “));
map.setUIToDefault();
}
}
</script>

Đem đoạn trên gắn vào nơi bạn muốn xuất hiện là xong.

 Các bạn cập nhật bài viết về kinh doanh bán hàng online và thủ thuật blog tại web này nhé

-------------------------------------------------------------------------------------------------------------- Mời bạn đọc xem tiếp và bấm theo dõi trên G+ --- Like --- Share để ủng hộ cho tôi phát triển thêm, vì lợi ích cộng đồng Các bạn đang xem bài viết tại http://kinhdoanhbanhangonlinetainha.blogspot.com/

Posted in: thủ thuật blog