Google Maps Api：如何添加標記和對話框？

Question

我已經設法在我的網站上使用Google地圖的JavaScript API獲得谷歌地圖..它的效果很好...

任何人都可以告訴我如何添加語音氣泡和標記...圖片... http://code.google.com/apis/maps/

基本上我的網站顯示一個簡單的地圖，但它的失蹤，其中辦公室的標誌和語音泡在那裏我想將辦公地址

任何幫助將非常感激。

下面是代碼我到目前爲止

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


} 

Answer 1

可以使用GMarker類可以添加標記;例如，到一個點添加到地圖，我會用這樣的：

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

（當然，你必須去適應座標到你的辦公室的，所以也沒有點在法國某些時候^^;我想你張貼應該做的伎倆;-)的那些）

而對於一個信息窗口，您可以使用GMarker.openInfoWindowHhtml方法，在你的標記。

我想這樣的事情應該做的伎倆：

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>' 
    ); 
} 

而結果是這樣的：

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

現在，你來從這裏建;-)

Answer 2

這是一些代碼演示如何使用XML文件加載多個標記。另外this網站是最好的谷歌地圖的例子和教程

// 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); 
    });  
});