# How to show cloud popup using java script

**URL:** <https://community.thinkgeo.com/t/how-to-show-cloud-popup-using-java-script/6355>\
**Category:** WebForms\
**Created:** [January 25, 2013, 4:02am UTC](https://community.thinkgeo.com/t/how-to-show-cloud-popup-using-java-script/6355 "2013-01-25T04:02:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rajanikanth1](https://community.thinkgeo.com/letter_avatar_proxy/v4/letter/r/e9bcb4/32.png) [@rajanikanth1](https://community.thinkgeo.com/u/rajanikanth1)\
**Post date:** [January 25, 2013, 4:02am UTC](https://community.thinkgeo.com/t/how-to-show-cloud-popup-using-java-script/6355/1 "2013-01-25T04:02:13Z")

</div>

&nbsp;I&nbsp;have&nbsp;a&nbsp;Grid&nbsp;in&nbsp;that&nbsp;grid&nbsp;i&nbsp;bind&nbsp;all&nbsp;my&nbsp;loactions.when&nbsp;i&nbsp;click&nbsp;on&nbsp;any&nbsp;row&nbsp;of&nbsp;grid&nbsp;i&nbsp;need&nbsp;to&nbsp;show&nbsp;a&nbsp;cloud&nbsp;popup&nbsp;with&nbsp;that&nbsp;grid&nbsp;row&nbsp;deatils&nbsp;using&nbsp;java&nbsp;script.how&nbsp;to&nbsp;show&nbsp;cloud&nbsp;popup&nbsp;using&nbsp;java&nbsp;script.

---

<div class="post-metadata">

**Author:** ![Edgar](https://community.thinkgeo.com/letter_avatar_proxy/v4/letter/e/b487fb/32.png) [@Edgar](https://community.thinkgeo.com/u/Edgar)\
**Post date:** [January 30, 2013, 1:27am UTC](https://community.thinkgeo.com/t/how-to-show-cloud-popup-using-java-script/6355/2 "2013-01-30T01:27:23Z")

</div>

Hi&nbsp;Raj,

Here&nbsp;are&nbsp;two&nbsp;ways&nbsp;you&nbsp;can&nbsp;try,

1.&nbsp;Create&nbsp;a&nbsp;new&nbsp;cloudPopup&nbsp;when&nbsp;you&nbsp;click&nbsp;on&nbsp;any&nbsp;row&nbsp;in&nbsp;grid,

`function showPopup(){            var popup = new OpenLayers.Popup.FramedCloud("popupid",                    new OpenLayers.LonLat(5,78),                    new OpenLayers.Size(200,200),                    "example popup",                    null,                    true);            Map1.GetMapParser().map.addPopup(popup);`

&nbsp;

2.&nbsp;Init&nbsp;all&nbsp;the&nbsp;popups&nbsp;at&nbsp;server&nbsp;side,&nbsp;and&nbsp;show&nbsp;them&nbsp;at&nbsp;client&nbsp;side&nbsp;when&nbsp;you&nbsp;click&nbsp;any&nbsp;row&nbsp;to&nbsp;fire&nbsp;them,

`Server side:                CloudPopup popup = new CloudPopup(feature.Id, new PointShape(6, 70), "popup1");                popup.IsVisible = false;                Map1.Popups.Add(popup);Client side:        function showPopup(id){            var popups = Map1.GetMapParser().map.popups;            for (var i = 0; i < popups.length; i++) {                if(popups<i>.id == id){                    popups<i>.show();                }        }`

Just&nbsp;let&nbsp;you&nbsp;know&nbsp;the&nbsp;second&nbsp;way&nbsp;is&nbsp;common&nbsp;and&nbsp;recommanded,&nbsp;the&nbsp;advantage&nbsp;is&nbsp;we&nbsp;can&nbsp;keep&nbsp;the&nbsp;synchronization&nbsp;between&nbsp;the&nbsp;client&nbsp;and&nbsp;server&nbsp;side,&nbsp;

Hope&nbsp;it&nbsp;helps,

Edgar

---

<div class="post-metadata">

**Author:** ![Adrian2](https://community.thinkgeo.com/letter_avatar_proxy/v4/letter/a/ed655f/32.png) [@Adrian2](https://community.thinkgeo.com/u/Adrian2)\
**Post date:** [August 5, 2015, 10:35am UTC](https://community.thinkgeo.com/t/how-to-show-cloud-popup-using-java-script/6355/3 "2015-08-05T10:35:31Z")

</div>

Hi&nbsp;There:  
  
  
  
We&nbsp;have&nbsp;code&nbsp;to&nbsp;use&nbsp;a&nbsp;Cloud&nbsp;Popup&nbsp;and&nbsp;it&nbsp;works&nbsp;fine&nbsp;in&nbsp;ThinkGeo&nbsp;MVC&nbsp;Version&nbsp;7.0&nbsp;but&nbsp;when&nbsp;we&nbsp;upgrade&nbsp;to&nbsp;Version&nbsp;9&nbsp;and&nbsp;the&nbsp;following&nbsp;line&nbsp;of&nbsp;code&nbsp;stop&nbsp;working:  
  
  
  
&nbsp;var&nbsp;infoPopup&nbsp;=&nbsp;Map1.popups[0];&nbsp;//&nbsp;pre-created&nbsp;popup&nbsp;window  
&nbsp;&nbsp; **&nbsp;&nbsp;&nbsp;&nbsp;infoPopup.lonlat&nbsp;=&nbsp;e.worldXY;**  
  
  
  
Here&nbsp;is&nbsp;the&nbsp;error&nbsp;message:&nbsp;"Uncaught&nbsp;TypeError:&nbsp;Cannot&nbsp;set&nbsp;property&nbsp;‘lonlat’&nbsp;of&nbsp;undefined"  
  
  
  
How&nbsp;to&nbsp;get&nbsp;the&nbsp;lat&nbsp;and&nbsp;lon&nbsp;for&nbsp;the&nbsp;Cloud&nbsp;popup&nbsp;in&nbsp;Version&nbsp;9.  
  
  
  
Thanks,  
  
Adrian

---

<div class="post-metadata">

**Author:** ![Ethan](https://community.thinkgeo.com/user_avatar/community.thinkgeo.com/ethan/32/19964_2.png) [@Ethan](https://community.thinkgeo.com/u/Ethan)\
**Post date:** [August 6, 2015, 1:22am UTC](https://community.thinkgeo.com/t/how-to-show-cloud-popup-using-java-script/6355/4 "2015-08-06T01:22:19Z")

</div>

Hi&nbsp;Adrian,&nbsp;  
&nbsp;&nbsp;  
&nbsp;Please&nbsp;see&nbsp;my&nbsp;reply&nbsp;in&nbsp;your&nbsp;other&nbsp;post:&nbsp;  
&nbsp;&nbsp;  
&nbsp;[thinkgeo.com/forums/MapSuite/tabid/143/aft/11087/Default.aspx](http://thinkgeo.com/forums/MapSuite/tabid/143/aft/11087/Default.aspx)&nbsp;  
&nbsp;&nbsp;  
&nbsp;Regards,&nbsp;  
&nbsp;&nbsp;  
&nbsp;Don