Giới thiệu
Câu trả lời này cũng có thể được tìm thấy như là một phần của blog của tôi ARTICLE. Hãy xem nếu bạn có thời gian bởi vì nó bao gồm nhiều thông tin hơn thì câu trả lời này một mình.
Có một giải pháp tuyệt vời khác không yêu cầu khung nội tuyến và khung nội tuyến của nó được xây dựng để đáp ứng nhanh nhất có thể. Nó được gọi là API bản đồ Google v3.
tài liệu chính thức: https://developers.google.com/maps/documentation/javascript/examples/
Đầu tiên chúng ta hãy nói về cách GMap v3 API có thể được sử dụng bên trong một ứng dụng web cổ điển, nó sẽ cho chúng ta một cái nhìn tốt những gì phải làm. Trong phần đầu của một iframe cơn sốt bản đồ là một giải pháp phân phối tiêu chuẩn nhưng một thời gian trôi qua nó trở thành một công nghệ lạc hậu, giống như một trở ngại cho họ một công nghệ phân phối thành công.
Lịch sử
mới JavaScript của Google Maps API phiên bản 3 được xây dựng từ mặt đất lên bởi Google để cung cấp một nền tảng phát triển ứng dụng bản đồ sạch sẽ, nhanh chóng và mạnh mẽ cho cả hai trình duyệt web máy tính để bàn và các thiết bị di động. API của v3 cho phép các nhà phát triển nhúng Google Maps vào các trang web của riêng họ và được thiết kế đặc biệt để nhanh hơn và phù hợp hơn cho các thiết bị di động cũng như các ứng dụng trình duyệt máy tính để bàn truyền thống. Không giống như v2 API hoạt động trên IE6 +, Firefox 2.0+, các phiên bản cũ hơn của API Chrome v3 sẽ hoạt động trên mọi trình duyệt được hỗ trợ HTML5, từ IE8 +, Firefox 3.0 + lên iOS, Android và BlackBerry 6+. Mà làm cho nó cũng là một giải pháp tuyệt vời cho các ứng dụng jQuery Mobile. Nhưng hãy để tôi chỉ cho bạn cách nó hoạt động trong một trang web cổ điển.
Giải pháp
Và đây là một ví dụ làm việc: http://jsfiddle.net/Gajotres/T4H5X/
Bạn có thể đặt nó ở bất cứ đâu, nó sẽ phản ứng với thay đổi kích thước. Nó nhanh, đáng tin cậy và linh hoạt.
Dưới đây là một ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
và câu hỏi là ...? –
Câu trả lời/đề xuất của bạn cũng không liên quan gì đến HTML5 và CSS3, đó là CSS2 và đã được giới thiệu cách đây 15 năm –
Tại sao lại bị đóng cửa ..các closers phải đã được gắn thẻ cùng. Câu hỏi là hiển nhiên; làm thế nào để làm cho một iframe google bản đồ đáp ứng? Xem xét rằng câu hỏi này có hơn 10 ngôi sao và mọi người googling ở đây khoảng 25.000 lần + nó là ngu ngốc để đóng nó. –