title: Google Static Map Image not showing on popup
body: <p>I load Google Static Map on popup and set Image URL of image dynamically. Source Code displays correct address but not shown on page at page load. If I hover mouse into the source code of Image then it gets loaded into source Code ( e.i. Firebug in Firefox)and if I reopen the popup, Image loads successfully. Please suggest why it is not loading first time.</p>
  
  <p>Step 1  open My Page                                                                                                </p>
  
  <p>Step 2  Click on map. It is blank                                                                                               </p>
  
  <p>Step 3  If we view this Static map image's  HTMl code in Firebug then </p>
  
  <p>Step 4  on Mouse ove to the Image Source code, Image loads but still nothing on static Image popup
  <a href="http://i.stack.imgur.com/3FqFi.png" rel="nofollow">Click To See Image</a>                                                                                 </p>
  
  <p>Step 5  Close the popup                                                                                             </p>
  
  <p>Step 6  If we again open Map popup, Image loads successfully.<br>
  <a href="http://i.stack.imgur.com/ZcPzk.png" rel="nofollow">Click To See Image</a></p>
  
  <p>Image does not load till We do not hover mouse over the HTML source code of Image in Firebug. Please suggest in this Case.                                                                                              </p>
  
  <p>Code                                                                                                    Source Code :                                                                                               </p>
  
  <pre><code>                       &lt;tr&gt; 
                          &lt;td width=""114"" height=""22""&gt; 
                              &lt;asp:Localize runat=""server"" ID=""locPickUpLocation"" Text=""Pick-up Location:"" meta:resourcekey=""locPickUpLocationResource1""&gt;&lt;/asp:Localize&gt;  
                          &lt;/td&gt; 
                          &lt;td width=""182""&gt; 
                              &lt;b&gt; 
                                  &lt;asp:Literal ID=""ltPick"" runat=""server"" meta:resourcekey=""ltPickResource1""&gt;&lt;/asp:Literal&gt; &lt;span id=""divPickMapLink"" runat=""server"" class=""CarMapBut apf""&gt;&lt;span&gt;&lt;asp:Localize runat=""server"" ID=""picklocMap"" Text=""Map"" meta:resourcekey=""picklocMapResource1""&gt;&lt;/asp:Localize&gt;&lt;/span&gt;&lt;/span&gt; 
                              &lt;/b&gt; 
                          &lt;/td&gt; 
                          &lt;td width=""116"" class=""padlt5""&gt; 
                             &lt;asp:Localize runat=""server"" ID=""locDropOffLocation"" Text=""Drop-off Location:"" meta:resourcekey=""locDropOffLocationResource1""&gt;&lt;/asp:Localize&gt;   
                          &lt;/td&gt; 
                          &lt;td width=""183""&gt; 
                              &lt;b&gt; 
                                  &lt;asp:Literal ID=""ltDrop"" runat=""server"" meta:resourcekey=""ltDropResource1""&gt;&lt;/asp:Literal&gt;  &lt;span id=""divDropMapLink"" runat=""server"" class=""CarMapBut apf""&gt;&lt;span&gt;&lt;asp:Localize runat=""server"" ID=""droplocMap"" Text=""Map"" meta:resourcekey=""droplocMapResource1""&gt;&lt;/asp:Localize&gt;&lt;/span&gt;&lt;/span&gt; 
                              &lt;/b&gt; 
                          &lt;/td&gt; 
                      &lt;/tr&gt; 
  </code></pre>
  
   
  
  <p>Code behind :                                                                                               </p>
  
  <pre><code>            string pickAdd = ltPick.Text.Replace(""&lt;br /&gt;"", """");         
              divPickMapLink.Attributes.Add(""onclick"", ""javascript:DisplayMapByAddress('"" + pickAdd + ""');"");         
              ltDrop.Text = carBooking_.GetDropoffLocationDescription("", "");         
              string dropAdd = ltDrop.Text.Replace(""&lt;br /&gt;"", """");         
              divDropMapLink.Attributes.Add(""onclick"", ""javascript:DisplayMapByAddress('"" + dropAdd + ""');""); 
  </code></pre>
  
  <p>HTML PAGE<br>
                                                                      GoogleMapStatic.htm </p>
  
  <pre><code>&lt;div id=""popup_box""&gt;
  &lt;a id=""popupBoxClose""&gt;Close&lt;/a&gt;
  &lt;div id=""ViewMap"" class=""CarMap""&gt;
  &lt;img id=""GoogleStaticImage"" src=""http://maps.googleapis.com/maps/api/staticmap?sensor=false&amp;key=&lt;%= DTIsland.DTCarIslandSettings.CarGoogleMapKey %&gt;&amp;zoom=13&amp;size=600x420&amp;center=New York&amp;markers=color:green%7Clabel:A%7CNew York"" /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id=""greyBgBkgrnd""&gt;&lt;/div&gt;
  
     &lt;script type=""text/javascript"" charset=""utf-8""&gt;   
          $(document).ready(function () {
  
      $(document).keypress(function (e) {
          if (e.keyCode == 27) { unloadPopupBox(); }
      });
  
      $('#popupBoxClose').click(function () {
          unloadPopupBox();
      });
  });
  
  function unloadPopupBox() { // TO Unload the Popupbox
      $('#popup_box').fadeOut(""slow"");
      $(""#greyBgBkgrnd"").css({ // this is just for style  
          ""opacity"": ""1""
      });
      $('#popup_box').hide();
      CloseGreyBg();
  }
  
  function loadPopupBox() {
  
      // To Load the Popupbox
      $('#popup_box').fadeIn(""slow"");
      $('#popup_box').css({
          ""left"": ""300px"",
          ""top"": ""150px"",
          'zIndex': 400
      });
      $(""#greyBgBkgrnd"").css({ // this is just for style
          ""opacity"": ""0.3""
      });
      DisplayGreyBg();
  }
  
  function DisplayGreyBg() {
      var bWidth = ($('body').width()) + 25;
      if ($.browser.msie &amp;&amp; $.browser.version == 7) {
          var bWidth = $('body').width();
          $('.filterreg:first').css('z-index', '300');
      }
      var bHeight = $('body').height();
      $('#greyBgBkgrnd').css({ 'width': bWidth + 'px', 'height': bHeight + 'px', 'zIndex': 399, 'background': '#666666', 'opacity': '0.5', 'filter': 'alpha(opacity = 50)', 'position': 'absolute', 'top': '0', 'left': '0' });
      $('#greyBgBkgrnd').fadeIn(""slow"");
      $('body').css('overflow', 'hidden');
      //IE6 Bug with SELECT element always showing up on top
      if ($.browser.msie &amp;&amp; $.browser.version &lt; 7) {
          $('select').each(function () {
              $(this).hide();
          });
      }
  }
  
  function CloseGreyBg() {
      $('#greyBgBkgrnd').css({ 'width': '0px', 'height': '0px', 'zIndex': -1 });
      $('#greyBgBkgrnd').fadeOut(""slow"");
  
      if ($.browser.msie &amp;&amp; $.browser.version == 7) {
          $('body').css('overflow-y', 'auto');
          $('.filterreg:first').css('z-index', '99998');
      } else {
          $('body').css('overflow', 'auto');
      }
      //IE6 Bug with SELECT element always showing up on top
      if ($.browser.msie &amp;&amp; $.browser.version &lt; 7) {
          $('select').each(function () {
              $(this).show();
          });
      }
  }
  
  ///// Display map on Popup with long, lat
  function DisplayMapByLatLong(lat_, long_) {
      loadPopupBox();
      // When map object is created it tries to figure out how big the canvas is and if popup is not fully loaded yet it may get wrong values.
      // So 'loadPopupBox()' function is called before showMap and setTimeout is called to wait till popup is proper loaded
      $('#popupBoxClose').show();
      setTimeout("""", 100);
      var imgsrc = ""http://maps.googleapis.com/maps/api/staticmap?sensor=false&amp;key=&lt;%= DTIsland.DTCarIslandSettings.CarGoogleMapKey %&gt;&amp;zoom=13&amp;size=600x420&amp;center="" + lat_ + "","" + long_ + ""&amp;markers=color:green%7Clabel:A%7C"" + lat_ + "","" + long_;
      $(""#GoogleStaticImage"").attr(""src"", imgsrc);
  }
  
  ///// Display map on Popup with address
  function DisplayMapByAddress(address) {   
      loadPopupBox();
      // When map object is created it tries to figure out how big the canvas is and if popup is not fully loaded yet it may get wrong values.
      // So 'loadPopupBox()' function is called before showMap and setTimeout is called to wait till popup is proper loaded
      $('#popupBoxClose').show();
      setTimeout("""", 100);
      var imgsrc = ""http://maps.googleapis.com/maps/api/staticmap?sensor=false&amp;key=&lt;%= DTIsland.DTCarIslandSettings.CarGoogleMapKey %&gt;&amp;zoom=13&amp;size=600x420&amp;center="" + address + ""&amp;markers=color:green%7Clabel:A%7C"" + address;
      $(""#GoogleStaticImage"").attr(""src"", imgsrc);
  
    }
  
  &lt;/script&gt;                                                                                           
  
  
  
  
  
   Problem is with API key for static map. I am using invalid API key.
  </code></pre>