Google Maps Api: ¿Cómo agregar un marcador y una burbuja de diálogo?

Question

He logrado obtener un mapa de google en mi sitio usando Javascript api de google maps ... y funciona muy bien ...

¿Alguien me puede decir cómo puedo agregar la burbuja del habla y el marcador ... En la foto ... http://code.google.com/apis/maps/

Básicamente mi sitio muestra un mapa simple, pero su falta el marcador para la oficina donde está y un bocadillo de diálogo donde quiero colocar la dirección de la oficina

sería muy apreciada Cualquier ayuda.

Aquí está el código que tengo hasta ahora

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


} 

Answer 1

Un marcador se puede añadir mediante la clase GMarker; por ejemplo, para agregar un punto a un mapa, me gustaría utilizar algo como esto:

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

(Por supuesto, tendrá que adaptar las coordenadas a los de su oficina, por lo que no punto a algún punto en Francia ^^; supongo que los que posteaste debe hacer el truco ;-))

Y para una ventana de información, puede utilizar el método GMarker.openInfoWindowHhtml, en su marcador.

supongo que algo como esto debe hacer el truco:

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

Y el resultado es idéntico:

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

Ahora, depende de usted para construir a partir de aquí ;-)

Answer 2

Aquí hay un código que muestra cómo usar un archivo XML para cargar múltiples marcadores. También el sitio this es el mejor que hay para los ejemplos y tutoriales de 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); 
    });  
});