API bản đồ Google V3 - Nhấp vào Marker hiển thị thêm nội dung thông tin dưới dạng lớp phủ (như trong Google Maps)

Chúng tôi sử dụng Bản đồ Google Api V3 để tải bản đồ google trong vùng chứa HTML. Chúng tôi có một mẫu tìm kiếm địa điểm. Khi gửi, chúng tôi sẽ nhận được các vị trí có sẵn và đặt điểm đánh dấu trên bản đồ. Khi các điểm đánh dấu được tải, khi nhấp vào từng điểm đánh dấu, chúng tôi cần hiển thị Tiêu đề, chi tiết địa chỉ và thiết kế giống như những gì chúng tôi có trong bản đồ google. (Trong bản đồ google - Khi nhấp vào điểm đánh dấu màu đỏ, chúng tôi có thể thấy hộp lớp phủ thông tin khác với các chi tiết bổ sung như Dấu sao, Chỉ đường, Tìm kiếm lân cận, Lưu vào Bản đồ, Thêm ..)API bản đồ Google V3 - Nhấp vào Marker hiển thị thêm nội dung thông tin dưới dạng lớp phủ (như trong Google Maps)

Chúng tôi đã xây dựng chức năng api tải hộp lớp phủ như trên. Hoặc chúng tôi không có chức năng để tải các chi tiết như những gì chúng tôi có trong bản đồ google hiện tại.

Khi tôi tìm kiếm trong tài liệu google và bản đồ, tôi có thể thấy các tùy chọn để hiển thị cửa sổ lớp phủ và viết nội dung bên trong hộp. Nhưng tôi không thấy tùy chọn tải nội dung theo yêu cầu.

Tôi đã dán mã bên dưới để tham khảo.

 var map = null; 
     gmap_ready = function(){ 
    var myLatlng = new google.maps.LatLng(43.834527,-103.564457); 
    var myOptions = { 
     zoom: 3, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

}

function fnLoadMarkers(){ 
var locations = [ 
    ['S Dakota', 43.834527,-103.564457, 1], 
    ['Texas', 31.428663,-99.418947, 2], 
    ['California', 36.668419,-120.249025, 3], 
    ['Newyork', 43.197167,-76.743166, 4], 
    ['Missouri', 38.410558,-92.73926, 5] 
]; 
setMarkers(map,locations); 
    } 
function setMarkers(map, locations) { 
var image = 'images/marker.gif'; 

for (var i = 0; i < locations.length; i++) { 
    var currLocation = locations[i]; 
    var latLng = new google.maps.LatLng(currLocation[1], currLocation[2]); 
    var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map, 
     icon: image, 
     title: currLocation[0], 
     zIndex: currLocation[3] 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     var latitude = this.position.lat(); 
     var longitude = this.position.lng(); 
     window.open("http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q="+latitude+","+longitude+"&sll="+latitude+","+longitude+"&sspn=0.172749,0.4422&ie=UTF8&ll="+latitude+","+longitude+"&spn=0.162818,0.4422&z=11&iwloc=A"); 
    }); 
    }

}

Nếu có bất kỳ gợi ý về cách để đạt được những kết quả này, nó sẽ rất hữu ích. Ngoài ra, vui lòng hướng dẫn, cho dù có thể thông qua API Google API hay không.

Cảm ơn trước,

Trân

Srinivasan.C

Nguồn

2012-06-12 Srinivasan

kiểm tra thư viện InfoBubble .. – gorelative

nhìn vào cửa sổ thông tin tiêu chuẩn https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows – Ray

Tôi không hiểu lý do tại sao bạn đang mở một cửa sổ mới sử dụng Google Maps từ một API marker Google Maps? Bạn không thể thêm cửa sổ thông tin trên Google Maps qua URL.

Đây là cách tôi thực hiện.

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
// Initiate map 
function initialize(data) { 
    // Make position for center map 
    var myLatLng = new google.maps.LatLng(data.lng, data.lat); 

    // Map options 
    var myOptions = { 
    zoom: 10, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
    }; 

    // Initiate map 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    // Info window element 
    infowindow = new google.maps.InfoWindow(); 

    // Set pin 
    setPin(data); 
} 
// Show position 
function setPin(data) { 
    var pinLatLng = new google.maps.LatLng(data.lng, data.lat); 
    var pinMarker = new google.maps.Marker({ 
    position: pinLatLng, 
    map: map, 
    data: data 
    }); 

    // Listen for click event 
    google.maps.event.addListener(pinMarker, 'click', function() { 
    map.setCenter(new google.maps.LatLng(pinMarker.position.lat(), pinMarker.position.lng())); 
    map.setZoom(18); 
    onItemClick(event, pinMarker); 
    }); 
} 
// Info window trigger function 
function onItemClick(event, pin) { 
    // Create content 
    var contentString = pin.data.text + "<br /><br /><hr />Coordinate: " + pin.data.lng +"," + pin.data.lat; 

    // Replace our Info Window's content and position 
    infowindow.setContent(contentString); 
    infowindow.setPosition(pin.position); 
    infowindow.open(map) 
} 
</script> 
</head> 
<body onload="initialize({lat:-3.19332,lng:55.952366,text:'<h2>Edinburgh</h2><i>Nice city!</i>'})"> 
    <div id="map_canvas"> 
</div> 
</body> 
</html>

Nguồn

2012-06-13 18:37:27 transilvlad

@Srinivasan đã trợ giúp này? – transilvlad

Tôi nghĩ rằng OP đang nói về thanh bên trái mà trượt ra khi bạn bấm vào một bản đồ pin trên bản đồ google. (tức là maps.google.com không sử dụng infowindow) –

người bạn đời tuyệt vời! :) –

API bản đồ Google V3 - Nhấp vào Marker hiển thị thêm nội dung thông tin dưới dạng lớp phủ (như trong Google Maps)

Trả lời

Các vấn đề liên quan