Google Maps API: Bir işaretleyici ve konuşma balonu nasıl eklenir?

Question

Sitemde bir google map google maps .. Javascript api kullanarak elde etmeyi başardı ve harika çalışıyor ...

Konuşma balonu ve işaretleyicisini nasıl ekleyebileceğimi söyleyen var mı? ... http://code.google.com/apis/maps/

Temelde sitemde basit harita görüntüler ama Herhangi bir yardım gerçekten takdir

ofis adresini yerleştirmek istediğiniz yere onun ofisi nerde için işaretleyici ve bir konuşma balonu eksik. İşte

i var kodudur bugüne kadar

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


} 

Answer 1

bir işaretleyici GMarker sınıfını kullanılarak eklenebilir; Örneğin, bir harita bir nokta eklemek için, böyle bir şey kullanırsınız:

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

(Tabii ki, size ofis olanlara koordinatlarını adapte gerekecek, bu yüzden değil mi Fransa'da bir noktada gelin ^^; sana ;-) hile yapmak gerekir yayınlanan olanları)

Ve Bilgi penceresi için, sen İşaretçinizde üzerinde, GMarker.openInfoWindowHhtml yöntemi kullanabilirsiniz varsayalım.

Böyle bir şey hile yapmak gerekir sanırım:

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

Ve sonuç şuna benzer:

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

Şimdi, size kalmış buradan inşa etmek ;-)

Answer 2

İşte bazı kod çoklu işaretçileri yüklemek için XML dosyasının nasıl kullanılacağını gösterir. Ayrıca this sitenin Google Maps örnekler ve öğreticiler

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