Google Maps Api: How to add a marker and speech bubble?

Question

Hi there,

I have managed to get a google map on my site using Javascript api of google maps.. and it works great...

Can anyone tell me how i can add the Speech bubble and marker ... Pictured here... http://code.google.com/apis/maps/

Basically my site displays a simple map but its missing the marker for where office is and a speech bubble where i want to place the office address

Any help would be really appreciated.

Here is the code i have so far

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


}

Answer 1

Here is some code that shows how to use an XML file to load multiple markers. Also this site is the best there is for Google Maps examples and tutorials

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