Add controls to GoogleMarker InfoWindowContent programmatically?

Jul 17, 2008 at 5:50 AM
Hi, I'd like to be able to add some standard UI controls to a Marker's balloon programmatically. I realize I can simply write HTML into GoogleMarker.Text, buit I would like to be able to do something like:

GoogleMarker.InfoWindowContent.Controls.Add(new Hyperlink());
or
GoogleMarker.InfoWindowContent.Controls.Add(new Image());

Is this possible?

(Very impressed with the control, by the way, just started using it a couple of days ago.)

Thanks!

- Matt
Coordinator
Jul 17, 2008 at 7:32 AM
Edited Jul 17, 2008 at 7:33 AM
Hi Matt,

Yes, that's possible, but not exactly the way you want it.

If you navigate in the source code to definition of InfoWindowContent  you'll find it is of type ITemplate.
I did it in that way to support adding control to in in the markup like:

<
artem:GoogleMarker Latitude="42.1229" Longitude="24.7879" Title="Click on the marker" Text="BASI">
    <InfoWindowContent>
        <h1>
            Info Window Content</h1>
            <p>
                This is an info window content template.</p>
    </InfoWindowContent>
</artem:GoogleMarker>

In other words, you can not use it like: 
    GoogleMarker.InfoWindowContent.Controls.Add(new Hyperlink());

Instead of that, you have to make your custom class implementing ITemplate, which will do the work for you.
It even could be a nested class inside you page or could place it in App_Code etc.
For the given markup example above here is what I can do it programmatically.

internal class MyTemplate : ITemplate {

 

    public void InstantiateIn(Control container) {

        HtmlGenericControl h1 = new HtmlGenericControl("h1");

        h1.InnerHtml = "Info Window Content";

        container.Controls.Add(h1);

        HtmlGenericControl p = new HtmlGenericControl("p");

        p.InnerHtml = "This is an info window content template";

        container.Controls.Add(p);

    }

}

<!--EndFragment-->
Then in the page or whatover I want to use I can do:
GoogleMarker.InfoWindowContent = new MyTemplate();

That's it.
Because of InfoWindowContent is a template you can not add controls to a Controls collection but you have to implement you own simple template and add controls you want in its InstantiateIn method.
You can figure out you can pass some params to that custom template implementation through constructor or properties.


Hope this help ...


Regards,
Velio
Jul 22, 2008 at 2:57 AM

This worked very well! Thanks so much.

- Matt


velio wrote:
Hi Matt,

Yes, that's possible, but not exactly the way you want it.

If you navigate in the source code to definition of InfoWindowContent  you'll find it is of type ITemplate.
I did it in that way to support adding control to in in the markup like:

<
artem:GoogleMarker Latitude="42.1229" Longitude="24.7879" Title="Click on the marker" Text="BASI">
    <InfoWindowContent>
        <h1>
            Info Window Content</h1>
            <p>
                This is an info window content template.</p>
    </InfoWindowContent>
</artem:GoogleMarker>

In other words, you can not use it like: 
    GoogleMarker.InfoWindowContent.Controls.Add(new Hyperlink());

Instead of that, you have to make your custom class implementing ITemplate, which will do the work for you.
It even could be a nested class inside you page or could place it in App_Code etc.
For the given markup example above here is what I can do it programmatically.

internal class MyTemplate : ITemplate {

 

    public void InstantiateIn(Control container) {

        HtmlGenericControl h1 = new HtmlGenericControl("h1");

        h1.InnerHtml = "Info Window Content";

        container.Controls.Add(h1);

        HtmlGenericControl p = new HtmlGenericControl("p");

        p.InnerHtml = "This is an info window content template";

        container.Controls.Add(p);

    }

}

<!--EndFragment-->
Then in the page or whatover I want to use I can do:
GoogleMarker.InfoWindowContent = new MyTemplate();

That's it.
Because of InfoWindowContent is a template you can not add controls to a Controls collection but you have to implement you own simple template and add controls you want in its InstantiateIn method.
You can figure out you can pass some params to that custom template implementation through constructor or properties.


Hope this help ...


Regards,
Velio


Apr 22, 2009 at 5:59 AM
do you have a sample of how you implemented it? I want to create a table.
Coordinator
Apr 22, 2009 at 8:11 AM
Edited Apr 22, 2009 at 10:58 AM
Hi,

I think the sample code above, should be enough as example.
All you need is to create a class which inherits ITemplate and in the InstantiateIn method to add to the passed container there whatever controls you want, including building and adding a table to the container.

I find using the ITemplate as simple and flexible way, but I see it gives you trouble using it guys.
I consider adding some base abstract class which inherits from a WebControl and implement ITemplate in order to simplify the usage of markers' InfoWindowContent in code-behind.

Regards
May 26, 2009 at 3:27 PM

Ciao,

I just discovered the control, looks great and I'm now trying to port my app using another gmap->.net control to yours.

I need to programatically add markers to a map and each of them has to contain a custom/unique piece of html code (this is also created programatically). So basically I tried : marker.InfoContent = html string; but clearly it didn't work. Searched trough the dsiscussions and found this thread. Unfortunatley you are talking about something I'm not familiar with at all: create a custom class implementing ITemplate.

I followed your instructions and added the above example of MyTemplate but it doesn't work. I'm doing all this in a dll and added the above mentioned code at the beginning of the .cs after the using but when I try marker.InfoContent = new MyTemplate(); it says that it cannot convert MyTemplate into Artem.Web.UI.Controls.GoogleMarker.InfoWindowContent

So my two questions are:

create a custom class implemeting ITemplate is the only way to programatically add a InfoWindow with some custom html (pics, text etc) to a marker?

and if so, any ideas what's wrong with what I do so far?

 

Thanks a lot!

Coordinator
May 26, 2009 at 4:37 PM
Edited May 26, 2009 at 4:46 PM

Ciao,

You have 4 ways of adding an info window content to the marker, using GoogleMap Control 4.0

1) You can add a simple or generated string, which can contain some HTML inside, using the markers' Text property like: 

marker.Text = "<a href='http://googlemap.artembg.com'>Visit online sample website.</a>";

2) You can add the HTML and controls in the markup inside InfoWindowTemplate like:

<artem:GoogleMap ID="GoogleMap1" runat="server" Latitude="42.1229" Longitude="24.7879"

    EnableScrollWheelZoom="true">

    <Markers>

        <artem:GoogleMarker Address="Plovdiv Bulgaria" Text="This is a <b>real</b> simple info window test.">

            <InfoWindowTemplate>

                <a href='http://googlemap.artembg.com'>Visit online sample website.</a>

            </InfoWindowTemplate>

        </artem:GoogleMarker>

    </Markers>

</artem:GoogleMap><!--EndFragment-->

3) You can add controls as adding them to a control collection, using InfoContent like:

HtmlAnchor a = new HtmlAnchor();

   a.HRef = "http://googlemap.artembg.com";

   a.InnerHtml = "Visit online sample website.";

   marker.InfoContent.Controls.Add(a);

 4) You can create you custom implementation of the ITemplate, like the sample above and set the marker's InfoWindowTemplate in code-behind.
    In your case you should use it like:

marker.InfoWindowTemplate = new MyTemplate();

As you can see, there are number of ways to add markers' info window content.
So, it is up to you to choose the one suits your needs best.

Regards

May 26, 2009 at 4:58 PM

Fantastic, thanks a lot!

 

Jul 23, 2009 at 6:34 AM

thanks a lots

Aug 19, 2009 at 12:39 AM
Edited Aug 19, 2009 at 2:12 AM
velio wrote:

Ciao,

You have 4 ways of adding an info window content to the marker, using GoogleMap Control 4.0

1) You can add a simple or generated string, which can contain some HTML inside, using the markers' Text property like: 

marker.Text = "<a href='http://googlemap.artembg.com'>Visit online sample website.</a>";

2) You can add the HTML and controls in the markup inside InfoWindowTemplate like:

<artem:GoogleMap ID="GoogleMap1" runat="server" Latitude="42.1229" Longitude="24.7879"

    EnableScrollWheelZoom="true">

    <Markers>

        <artem:GoogleMarker Address="Plovdiv Bulgaria" Text="This is a <b>real</b> simple info window test.">

            <InfoWindowTemplate>

                <a href='http://googlemap.artembg.com'>Visit online sample website.</a>

            </InfoWindowTemplate>

        </artem:GoogleMarker>

    </Markers>

</artem:GoogleMap><!--EndFragment-->

3) You can add controls as adding them to a control collection, using InfoContent like:

HtmlAnchor a = new HtmlAnchor();

   a.HRef = "http://googlemap.artembg.com";

   a.InnerHtml = "Visit online sample website.";

   marker.InfoContent.Controls.Add(a);

 4) You can create you custom implementation of the ITemplate, like the sample above and set the marker's InfoWindowTemplate in code-behind.
    In your case you should use it like:

marker.InfoWindowTemplate = new MyTemplate();

As you can see, there are number of ways to add markers' info window content.
So, it is up to you to choose the one suits your needs best.

Regards

 I am using the assembly 4.0.3394.26804 and I can add markers with simple text but I cannot  use marker.Text = <html  text>.

I copied from your post:: "<a href='http://googlemap.artembg.com'>Visit online sample website.</a>";"<a href='http://googlemap.artembg.com'>Visit online sample website.</a>"

And all the balloon says is the verbatim copy of the above -- no url link.

I've also tried simpler things like making one word bold with the <b> and </b> tags.  That does not  work either.

What am I doing wrong?

EDIT:  Never mind.  I found I have to do the info content template as you showed in your earlier post.

I did it in the code behind and modified it to take a string in the constructor which is the displayed html.

Thanks for this control.  

I am concerned about the issue in the Issue Tracker about markers failing to be displayed if more than 10 of them were added.  Is that still unresolved ?

Coordinator
Aug 19, 2009 at 6:51 AM

Hi,

Yes, you did nothing wrong.
I'm wrong in that sample about first way of adding text to the markers' info window.
The Text property can be used only with plain text, not to render out any HTML tags - it is actually HTML encoded.

Regards