Guide
This guide assumes that you are reasonably familiar with creating a basic map using the Google Maps API. If you are a complete beginner then please try some of the online tutorials to familiarise yourself with the API. You can find links to tutorials on the Useful Links page.
Example 1:
Create a basic HtmlControl passing only a string of (X)HTML and accepting the default values for visible, selectable and printable.
map.addControl(new HtmlControl('<p style="font-weight:bold">Hello World!</p>'));
This will create an HtmlControl and add it to your map. The control will be created as visible, the text content of the HtmlControl will not be selectable and if you print out your map the HtmlControl will not be printed. The HtmlControl will be positioned at the top left hand corner of your map, 7 pixels down and 7 pixels across - an HtmlControl's default map position.
You can position the HtmlControl anywhere on your map by passing a GControlPosition as the second argument of the map.addControl() method:
map.addControl(new HtmlControl('<p>Hello World!</p>'), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(20, 10)));
The HtmlControl would now instead be postioned 20 pixels across and 10 pixels down from the top right hand corner of your map.
Example 2:
Create an HtmlControl, make it hidden when created and use javascript to toggle it's visibility.
var myControl=new HtmlControl('<p>Hello World!</p>', { visible:false } );
map.addControl(myControl);
// elsewhere in your javascript you can simply toggle the visibility of the HtmlControl:
myControl.setVisible(!myControl.isVisible);
We have passed a new argument in the HtmlControl's constructor here, changing the default visible state from visible to hidden. The HtmlControl's content is still not selectable and not printable.
Example 3:
For this last example we will create a new HtmlControl, and pass arguments for visible, selectable and printable. We shall also change it's default position.
var i = new HtmlControl('<p>Hello World!</p>', { visible:false, selectable:true, printable:true } );
map.addControl(i, new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(128, 256)));
// elsewhere in your javascript you can then make it visible:
i.setVisible(true);
This HtmlControl will be created hidden. When it's made visible, it's text content will be selectable and if you print out your map the HtmlControl and it's content will also be printed.
More examples
For a working example please visit the Demo Map page. Use your browser's View Source option to see the code used to create the demo map.
HtmlControl: Index
