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

Question

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

A marker can be added using the GMarker class ; for instance, to add a point to a map, I would use something like this :

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

(Of course, you'll have to adapt the coordinates to the ones of your office, so it doesn't point to some point in France ^^ ; I suppose the ones you posted should do the trick ;-) )

And for an Information window, you can use the GMarker.openInfoWindowHhtml method, on your marker.

I guess something like this should do the trick :

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

And the result looks like this :

_{(source: pascal-martin.fr)}

Now, up to you to build from here ;-)

Answer 2

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