Api của Google Maps: Cách thêm điểm đánh dấu và bong bóng thoại?

Question

Tôi đã quản lý để có được một bản đồ google trên trang web của tôi bằng cách sử dụng Javascript api của bản đồ google .. và nó hoạt động tuyệt vời ...

Bất cứ ai có thể cho tôi biết làm thế nào tôi có thể thêm các bong bóng lời nói và đánh dấu ... Ảnh tại đây ... http://code.google.com/apis/maps/

về cơ bản trang web của tôi hiển thị một bản đồ đơn giản nhưng thiếu nó đánh dấu cho nơi đặt trụ là gì và một ô lời thoại nơi mà tôi muốn đặt địa chỉ trụ

Bất kỳ trợ giúp sẽ được thực sự đánh giá cao.

Đây là mã tôi có cho đến nay

if (GBrowserIsCompatible()) { 
    var map = new GMap2(document.getElementById("map")); 
    map.setCenter(new GLatLng(40.466997, -3.705482), 13); 


} 

Answer 1

Một marker có thể được bổ sung bằng cách sử dụng lớp GMarker; Ví dụ, để thêm một điểm để bản đồ, tôi sẽ sử dụng một cái gì đó như thế này:

var point = new GPoint(45.779915302498935, 4.803814888000488); 
var marker = new GMarker(point); 
map.addOverlay(marker); 

(Tất nhiên, bạn sẽ phải thích ứng với các tọa độ để những người thân của văn phòng của bạn, vì vậy nó không điểm đến một lúc nào đó ở Pháp ^^; tôi cho rằng những người bạn được đăng nên làm các trick ;-))

Và đối với một cửa sổ thông tin, bạn có thể sử dụng phương pháp GMarker.openInfoWindowHhtml, trên điểm đánh dấu của bạn.

Tôi đoán một cái gì đó như thế này nên làm như lừa:

if (GBrowserIsCompatible()) { 
    var map = new GMap2(document.getElementById("map")); 
    map.setCenter(new GLatLng(40.466997, -3.705482), 13); 

    var point = new GPoint(-3.705482, 40.466997); 
    var marker = new GMarker(point); // Create the marker 
    map.addOverlay(marker);   // And add it to the map 

    // And open some infowindow, with some HTML text in it 
    marker.openInfoWindowHtml(
     'Hello, <strong>World!</strong>' 
    ); 
} 

Và kết quả sẽ như thế này:

http://extern.pascal-martin.fr/so/question-1933777-1.png

Bây giờ, tùy thuộc vào bạn để xây dựng từ đây ;-)

Answer 2

Dưới đây là một số mã cho thấy cách sử dụng tệp XML để tải nhiều điểm đánh dấu. Ngoài ra, trang web this là tốt nhất cho các ví dụ và hướng dẫn của Google Maps

// A function to create the marker and set up the event window 
function createMarker(point,name,html) { 
    var marker = new GMarker(point); 
    GEvent.addListener(marker, "click", function() { 
     marker.openInfoWindowHtml(html); 
    }); 
    // save the info we need to use later for the side_bar 
    //gmarkers.push(marker); 
    // add a line to the side_bar html 
    //side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>'; 
    return marker; 
} 

// This function picks up the click and opens the corresponding info window 
function myclick(i) { 
    GEvent.trigger(gmarkers[i], "click"); 
} 

$(document).ready(function(){ 
    // When class .map-overlay-right is clicked map is loaded 
    $(".map-overlay-right").click(function() { 
     var map = new GMap2(document.getElementById('map-holder')); 
     $("#map-holder").fadeOut('slow', function(){          
      var gmarkers = []; 
      map.addControl(new GSmallMapControl()); 
      map.addControl(new GMapTypeControl()); 
      // Get XML file that contains multiple markers 
      $.get("http://www.foo.com/xml-feed-google-maps",{},function(xml) { 
       $('marker',xml).each(function(i) { 
            // Parse the XML Markers 
        html = $(this).text(); 
        lat = $(this).attr("lat"); 
        lng = $(this).attr("lng"); 
        label = $(this).attr("label"); 
        var point = new GLatLng(lat,lng); 
        var marker = createMarker(point,label,html); 
        map.addOverlay(marker); 
       }); 
      }); 

     }); 
     $("#map-holder").fadeIn('slow'); 
     var Asia = new GLatLng(19.394068, 90.000000); 
     map.setCenter(Asia, 4); 
    });  
});