Reimers.dk

.NET, AJAX and Google APIs brought together
Welcome to Reimers.dk Sign in | Join | Help
in Search

How to use ExtInfoWindow with the control

Last post 01-30-2010, 15:03 by greyhound. 5 replies.
Sort Posts: Previous Next
  •  01-15-2010, 17:43 2951

    How to use ExtInfoWindow with the control

    Hello everyone,

    I am trying to integrate ExtInfoWindow into my GoogleMap application which is using the Google Map control, but not lucky. Having an error occured and I could not find out the way to solve it. Now I post my problem here and hope someone can help me to solve it. Jacob, can you help me?

    _ Demo : http://googlemapsapi.blogspot.com/2007/12/extinfowindow-10-ajax-powered-css.html

    _ Source and example : http://gmaps-utility-library.googlecode.com/svn/trunk/extinfowindow/release/docs/examples.html

    I wrote some code into Maploaded event like as following :

    protected void GMap_MapLoaded(object sender, Reimers.Map.BoundsEventArgs e)
        {
            string CommandStr = "var marker = new GMarker(new GLatLng(44, -96));";
            CommandStr += "GEvent.addListener(marker, 'click', function(){";
            CommandStr += "marker.openExtInfoWindow(";
            CommandStr += "reimers.map." + GMap.ClientID + ",";
            CommandStr += " 'simple_example_window',";
            CommandStr += " 'Im some HTML content that will go in the simple examples ExtInfoWindow.',";
            CommandStr += "{beakOffset: 3});});";
            CommandStr += "reimers.map."+GMap.ClientID+".addOverlay(marker);";
            e.MapCommand = CommandStr;
        }

    and did not forget to add the ExtInfoWindow library :

    protected override void OnLoadComplete(EventArgs e)
        {
            base.OnLoadComplete(e);
            HtmlHead header = Page.Header;
            HtmlForm from = Page.Form;
            HtmlGenericControl script = new HtmlGenericControl();
            script.TagName = "script";
            script.Attributes.Add("type", "text/javascript");
            script.Attributes.Add("src", "../extinfowindow.js");
            from.Controls.Add(script);

            script = new HtmlGenericControl();
            script.TagName = "link";
            script.Attributes.Add("type", "text/css");
            script.Attributes.Add("rel", "Stylesheet");
            script.Attributes.Add("media", "screen");
            script.Attributes.Add("href", "redInfoWindow.css");
            header.Controls.Add(script);
        }

    redInfoWindow.css :

    #simple_example_window{
      width: 300px;
    }
    #simple_example_window_contents{
      background-color: #FFF;
      border: 3px solid  #900;
    }
    #simple_example_window_beak{
      width: 28px;
      height: 38px;
      background: url('../images/corners/simple_beak.png') top left no-repeat transparent;
    }
    * html #simple_example_window_beak{
      /* Alpha transparencies hack for IE */
      background-image:none;
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/corners/red_beak.png', sizingMethod='crop');
    }
    #simple_example_window_tl, #simple_example_window_tr, #simple_example_window_bl, #simple_example_window_br,
    #simple_example_window_t,#simple_example_window_l,#simple_example_window_r,#simple_example_window_b{
      height: 0px;
      width: 0px;
    }

    The marker was showed on the map, but when I clicked on the marker an error occuring which told me that "Message: Object doesn't support this property or method" and the InfoWindow was not displayed. Please give me some advice. Thanks in advance.

  •  01-24-2010, 22:47 2970 in reply to 2951

    Re: How to use ExtInfoWindow with the control

    I think the problem may be that you use GMap.ClientID. Try using GMap.ID.

    In any case it would be useful if you could provide a page that shows your example code. If you don't want it public, then send me a private message. 

  •  01-29-2010, 3:53 2974 in reply to 2970

    Re: How to use ExtInfoWindow with the control

    Finally I have your Google Map control worked with many javascript library plug-in from "http://gmaps-utility-library.googlecode.com" . It works really well. Your control is the best I have ever used. Thank you very much Jacob.
  •  01-29-2010, 12:20 2976 in reply to 2974

    Re: How to use ExtInfoWindow with the control

    I've tested this over and over. Keeps giving me the same error even when I use Map.ID

    debugger returning "Object doesnt support this property or method" on the line:

    GEvent.addListener(marker, 'click', function(){ marker.openExtInfoWindow(reimers.map.GMap, "simple_example_window","I'm some HTML content that will go in the simple example's ExtInfoWindow.",{beakOffset: 3});});reimers.map.GMap.addOverlay(marker); 

     I can add the marker ok and the listener event is definitely getting attached to the marker.

    Any ideas?  

  •  01-29-2010, 17:13 2978 in reply to 2976

    Re: How to use ExtInfoWindow with the control

    I am please to help you. Please, send me your email, and I will give you a demo how to integrate ExtInfoWindow with Jacob's Google Map control. My email is ductrung12@yahoo.com.
  •  01-30-2010, 15:03 2979 in reply to 2978

    Re: How to use ExtInfoWindow with the control

    chuxuanhy has very kindly spend his precious time helping me with this. 

    For a working example with code, please see code item:
    http://www.reimers.dk/forums/thread/2981.aspx

    I have tried to comment everything but if anyone thinks improvements can be made to the post then please let me know. 

View as RSS news feed in XML