Google Maps Api: how to add marker and speech bubble?

Question

I managed to get a google map on my site using the Javascript api from google maps .. and it works fine ...

Can someone tell me how I can add a Speech bubble and marker ... Pictured here ... http://code.google.com/apis/maps/

Mostly my site displays a simple map, but there is no marker for the office and speech bubble where I want to place the office address.

Any help would be really appreciated.

Here is the code that I still have

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 example, to add a point to the 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 will have to adapt the coordinates to the coordinates of your office, so this does not indicate at some point in France ^^; I believe that the ones you posted should work ;-))

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

I think 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 it's up to you to build from here ;-)

Answer 2

Here is some code that shows how to use an XML file to load multiple tokens. This site is also best suited for Google 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); }); });