Multimap Open API V1.2 Example

Restyled Info Box Example

Before reading this example you should read the Markers and Info Boxes example to learn the basic features.

The Multimap Open API gives developers a large amount of control over their map viewers. Not only can custom markers be used, but info boxes can also be restyled. This page gives an example of a restyled info box and also describes the methods required to restyle an info box.

In the code at the end of this page you will find the HTML for an entire info box. What follows is a description of that HTML and how to style it.

The Multimap info box is made up of a DIV.MMInfoBox which is styled to be one pixel wide and one pixel high. This is then placed on the map at the correct location.

Inside this DIV is a second DIV with class MMplacer. This is absolutely positioned by default and should be styled so that is in the correct place relative to the DIV.MMInfoBox element. DIV.MMplacer exists only to place correctly the HTML that it contains.

For instance, to place DIV.MMplacer (and the HTML it contains) so that its bottom left touches the spot on the map to which it has been connected, you should give it the style:

.MMplacer { left : 0px; bottom : 0px; }

Inside the DIV.MMplacer is a table and another DIV. The DIV is a spare that can be used for whatever purpose you like, most likely to draw the connector between the main body of the info box and the point on the map to which it relates. Alternatively, you could use this technique:

.MMInfoBox .MMconnector { display : none; } 

The table within DIV.MMplacer can be used to style the box surrounding your content. Every cell in the table can be accessed by using the row and cell class. For instance, the top left cell is "TR.MMtop TD.MMleft" and the bottom right cell is "TR.MMbottom TD.MMright"

Please note that you cannot force TD cells to have specific dimensions; they try to shrink to fit the minimum size possible. Every TD has a DIV.MMspacer within it, which can be used to force the width and height.

The map viewer moves, by default, to place an info box correctly within its map. To do this, it needs to know the size of the info box. It calculates this from the size of the DIV.MMplacer, so please ensure that whatever you place within that element actually takes up space (rather than, for instance, floating or being positioned absolutely).

Important Note: Due to the fact that most browsers do not print background colors or images by default, a style-sheet rule has been used to hide info boxes from print-outs. You should not copy this rule unless you know that your users will be able to print out the info boxes correctly.

Important Note: If you pass a class into your info box constructor, the Multimap default styles will not be applied. The base DIV will no longer be DIV.MMInfoBox and instead will be solely the class that you pass in; for example, "mapviewer.createInfoBox( html, 'altinfobox' );" would result in DIV.altinfobox. The easiest way to restyle is to start from a copy of the Multimap default styles, replacing all instances of .MMInfoBox with .altinfobox and continue from there. A link to the default Multimap Open API style sheet can be found below.

What You Should See

If you view this in your browser you should see a Multimap draggable map centered on Saint James Avenue, Boston, Massachusetts, USA, at zoom factor 15. When you click on the first link, the viewer opens a default info box at the center of the map. When you click on the second link the viewer opens a restyled info box on Saint James Avenue; if necessary, it moves the map so that the info box fits.

The Map

The Code

There are four parts to the code below. The first is an example of the JavaScript code you must place in the HEAD section of your web page in order to create the info boxes used in this example. The second gives the HTML code that makes up an info box (and which is usually hidden). The third is the default CSS that is applied to an info box. Finally, the fourth is the CSS code that you should add to the HEAD section of your web page to display the restyled info box shown above.

The header code

<script type="text/javascript" src="http://developer.multimap.com/API/maps/1.2/OA08061815803962482"></script>

The body code

Sorry, JavaScript required...

Sorry, JavaScript required...

The JavaScript code

Sorry, JavaScript required...

The info box code

<div style="position: absolute; left: 250px; top: 210px;" class="altinfobox">
    <div class="MMplacer">
        <table class="MMInfoBoxTable">
            <tbody>
            <tr class="MMtabs" style="display: none;">
                <td class="MMleft"><div class="MMspacer"></div></td>
                <td class="MMcentre MMcenter"><div class="MMspacer"></div></td>
                <td class="MMright"><div class="MMspacer"></div></td>
            </tr>
            <tr class="MMtop">
                <td class="MMleft"><div class="MMspacer"></div></td>
                <td class="MMcenter MMcentre"><div class="MMspacer"></div></td>
                <td class="MMright"><div class="MMspacer"></div></td>
            </tr>
            <tr class="MMmiddle">
                <td class="MMleft"><div class="MMspacer"></div></td>
                <td class="MMcenter MMcentre">
                    <a href="javascript:void(undefined);" class="MMclose">Close</a>
                    <div class="MMspacer">
                        <div>
                            <h2>Restyled Infobox</h2>
                            <p>This info box has been restyled to look different.</p>
                        </div>
                    </div>
                </td>
                <td class="MMright"><div class="MMspacer"></div></td>
            </tr>
            <tr class="MMbottom">
                <td class="MMleft"><div class="MMspacer"></div></td>
                <td class="MMcenter MMcentre"><div class="MMspacer"></div></td>
                <td class="MMright"><div class="MMspacer"></div></td>
            </tr>
            </tbody>
        </table>
        <div class="MMconnector"></div>
    </div>
</div>

The CSS code

Alternative styles for info box

For more information on the subject of Multimap Open API JavaScript code, please read the Multimap Open API documentation at: http://www.multimap.com/share/documentation/openapi/1.2/classes/.

Back to examples.

Further Help

If you require further help with your Multimap Open API implementation, please visit the Multimap Developer Forums.

For Open API news, announcements and other information, please see our blog.

For general account enquiries or further services, please contact the Multimap Sales team: