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