CODEWITHSUNDEEP
javascriptgoogle-maps
mark smith
mark smith

Reputation: 20907

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

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


}

Upvotes: 6

Views: 14476

Answers (2)

Pascal MARTIN
Pascal MARTIN

Reputation: 401142

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

Upvotes: 7

Shadi Almosri
Shadi Almosri

Reputation: 11989

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

Upvotes: 3

Related Questions