Click here to Skip to main content
15,313,044 members
Articles / Web Development / HTML
Article
Posted 23 May 2008

Stats

44.4K views
490 downloads
28 bookmarked

How to make Google Map Tooltip with Flyout

Rate me:
Please Sign up or sign in to vote.
3.22/5 (5 votes)
23 May 2008CPOL2 min read
This article will show how to use Flyout to make a cool tooltip on a map, just like the one in Google maps.

Image 1

Introduction

This is a follow-up to my first article "Flyout - A great way to save space on your webpage". In the previous article, I have shown how easily the free Flyout component can be integrated into your project. In this article, I would like to show a special feature of Flyout, which is the ability to attach to areas of a mapped image.

Background

In order to attach to an area of an image, you just need to set AttachTo = "imageId[areaId]". Pretty simple.

Hand on the code

Let's say, you have an image with a camera spot mapped:

map.gif

ASP.NET
<img id="theMap" src="map.gif" usemap="#camera" />
<map name="camera">
    <area id="c1" shape="rect" coords="149,164,173,185" />
    <area id="c2" shape="rect" coords="177,265,202,296" />
    <area id="c3" shape="rect" coords="283,169,308,190" />
    <area id="c4" shape="rect" coords="307,312,332,332" />
</map>

You have a pop-up box stylesheet like this:

box.png

HTML
.box
{
    width:357px;
    height:165px;
    background-image:url(box.png);
    background-repeat:no-repeat;
    overflow:hidden;
    padding-left:10px;
    padding-right:100px;
    padding-top:10px;
    position:absolute;
}

To attach Flyout to a camera at Madison, WI, for instance, you set AttachTo = "theMap[c1]":

HTML
<obout:Flyout runat="server" ID="c1_flyout" AttachTo="theMap[c1]" NoneEffect="true" >
    <div class="box">
        <!--<span class="code-comment"> Content of pop up --></span>   
    </div>        
</obout:Flyout>

Now, we have a tooltip on the map like the one in Google maps. It is very fast, isn't it? You may have a look at our result in the How to make Google Map tooltip with Flyout example, posted in our website.

Flyout can attach not only to a rectangular area but also to other area shapes like circle or polygon, you may view details in here.

Conclusion

Although this feature is quite simple, I think it is very special and unique since I have not found any tooltip components in industry providing this ability. It seems to make life easier when you want to show names or information of people in your picture when the mouse hovers. I hope that you find it useful.

As I mentioned in the last Flyout article, the Flyout is totally free for both personal and commercial use. Many people have asked whether we plan to commercialize Flyout in the future. The answer is, No, once it's free, forever it's free. I am very happy to introduce to you a free and great component. At anytime, you can get the latest version of Flyout in the oboutSuite.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ned Thompson
Web Developer
Unknown
I am Ned Thompson, 26 years old. I am working at obout inc as web component developer. I am really good at ASP.NET and Javascript.


Comments and Discussions

 
GeneralThe flyout component Pin
cwp4226-May-08 23:07
Membercwp4226-May-08 23:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.