PopupMarker Examples

To create a popup marker, create a new PopupMarker, and specify the relevant options. The most important options are style and text. Then you can assign it event listeners and add it to the map just as you would with a GMarker object.

var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(35.681382, 139.766084), 1);

var opts = {text : "Hello! I'm a PopupMarker."};

var marker = new PopupMarker(new GLatLng(35.681382, 139.766084), opts);
map.addOverlay(marker);

View example (simple.html).

Chart-Style Marker Example

The default "normal" style for the popup lets you specify text or HTML to put inside some DIVs that are styled with CSS to look like a mini infowindow. The "chart" style uses the Google Charts API bubbles output to dynamically create an image according to options passed in - like background color, text, icon.

To use the chart style, just specify "chart" for the style property in PopupMarkerOptions, and then specify additional options in the chart property:

var chartAPI_Opt = {
                   chartStyle : "d_bubble_icon_texts_big",
                   icon       : "petrol",
                   textColor  : "000000",
                   bgColor    : "FFFF88"
                   }; 
var markerOpt = {
                  draggable  :  true,
                  style      : "chart",
                  chart      : chartAPI_Opt,
                  text       : "Made using Chart API. Please drag me!"
                  };
var marker = new PopupMarker(new GLatLng(35.681382, 139.766084), markerOpt);
map.addOverlay(marker);

You can also set the chart options later, using various methods on PopupMarker:

var markerOpt2 = {"style":"chart"};
var marker2 = new PopupMarker(new GLatLng(-40.756054, -73.986951), markerOpt2);
marker2.setChartStyle("d_bubble_icon_text_big");
marker2.setChartIcon("snack");
marker2.setChartTextColor("000000");
marker2.setChartBgColor("FFBB00");
marker2.setShapeStyle("bb");
marker2.setText("Click me!");
map.addOverlay(marker2);

View example (chartstylemarker.html).

Toggling Popups

You can use the showPopup/hidePopup methods to toggle the visibility of the popup:

GEvent.addListener(marker,"mouseover", function(){
  marker.showPopup();
});
GEvent.addListener(marker,"mouseout", function(){
  marker.hidePopup();
});

View example (draggable.html).