<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
		>
<channel>
	<title>Comments on: Custom info windows with jQuery and Google Maps</title>
	<atom:link href="http://ajaxian.com/archives/custom-info-windows-with-jquery-and-google-maps/feed" rel="self" type="application/rss+xml" />
	<link>http://ajaxian.com/archives/custom-info-windows-with-jquery-and-google-maps</link>
	<description>Cleaning up the web with Ajax</description>
	<lastBuildDate>Thu, 17 May 2012 07:43:39 +0000</lastBuildDate>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
	<item>
		<title>By: nunyourbiz</title>
		<link>http://ajaxian.com/archives/custom-info-windows-with-jquery-and-google-maps/comment-page-1#comment-285191</link>
		<dc:creator>nunyourbiz</dc:creator>
		<pubDate>Wed, 15 Sep 2010 19:58:42 +0000</pubDate>
		<guid isPermaLink="false">http://ajaxian.com/?p=6316#comment-285191</guid>
		<description>updated with api 3.2





function Infowin_API_3_2(bounds, html) {

		this.prototype = new google.maps.OverlayView();


       this.prototype.bounds_ = bounds;
		this.prototype.html_ = html;
		this.prototype.map_ = map;
		this.prototype.div_ = null;

		this.prototype.setMap(map);

		this.prototype.onAdd = function() {

			// Note: an overlay&#039;s receipt of onAdd() indicates that
			// the map&#039;s panes are now available for attaching
			// the overlay to the map via the DOM.

			// Create the DIV and set some basic attributes.
			var div = document.createElement(&#039;DIV&#039;);
			div.style.borderStyle = &quot;none&quot;;
			div.style.borderWidth = &quot;0px&quot;;
			div.style.position = &quot;absolute&quot;;
			//div.style.width = &quot;150px&quot;;
			//div.style.height = &quot;80px&quot;;
			
			div.className=&quot;customInfo&quot;;
			
			div.innerHTML =this.html_;

			// Set the overlay&#039;s div_ property to this DIV
			this.div_ = div;

			// We add an overlay to a map via one of the map&#039;s panes.
			// We&#039;ll add this overlay to the overlayImage pane.
			var panes = this.getPanes();
			panes.overlayImage.appendChild(div);
			
		}

		this.prototype.draw = function() {

			// Size and position the overlay. We use a southwest and northeast
			// position of the overlay to peg it to the correct position and size.
			// We need to retrieve the projection from this overlay to do this.
			var overlayProjection = this.getProjection();

			// Retrieve the southwest and northeast coordinates of this overlay
			// in latlngs and convert them to pixels coordinates.
			// We&#039;ll use these coordinates to resize the DIV.
			var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
			var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

			// Resize the image&#039;s DIV to fit the indicated dimensions.
			var div = this.div_;
			div.style.left = sw.x + &#039;px&#039;;
			div.style.top = ne.y + &#039;px&#039;;
			//div.style.width = (ne.x - sw.x) + &#039;px&#039;;
			//div.style.height = (sw.y - ne.y) + &#039;px&#039;;
			
		}

		
		this.prototype.onRemove = function() {
			this.div_.parentNode.removeChild(this.div_);
			this.div_ = null;
		}

}</description>
		<content:encoded><![CDATA[<p>updated with api 3.2</p>
<p>function Infowin_API_3_2(bounds, html) {</p>
<p>		this.prototype = new google.maps.OverlayView();</p>
<p>       this.prototype.bounds_ = bounds;<br />
		this.prototype.html_ = html;<br />
		this.prototype.map_ = map;<br />
		this.prototype.div_ = null;</p>
<p>		this.prototype.setMap(map);</p>
<p>		this.prototype.onAdd = function() {</p>
<p>			// Note: an overlay&#8217;s receipt of onAdd() indicates that<br />
			// the map&#8217;s panes are now available for attaching<br />
			// the overlay to the map via the DOM.</p>
<p>			// Create the DIV and set some basic attributes.<br />
			var div = document.createElement(&#8216;DIV&#8217;);<br />
			div.style.borderStyle = &#8220;none&#8221;;<br />
			div.style.borderWidth = &#8220;0px&#8221;;<br />
			div.style.position = &#8220;absolute&#8221;;<br />
			//div.style.width = &#8220;150px&#8221;;<br />
			//div.style.height = &#8220;80px&#8221;;</p>
<p>			div.className=&#8221;customInfo&#8221;;</p>
<p>			div.innerHTML =this.html_;</p>
<p>			// Set the overlay&#8217;s div_ property to this DIV<br />
			this.div_ = div;</p>
<p>			// We add an overlay to a map via one of the map&#8217;s panes.<br />
			// We&#8217;ll add this overlay to the overlayImage pane.<br />
			var panes = this.getPanes();<br />
			panes.overlayImage.appendChild(div);</p>
<p>		}</p>
<p>		this.prototype.draw = function() {</p>
<p>			// Size and position the overlay. We use a southwest and northeast<br />
			// position of the overlay to peg it to the correct position and size.<br />
			// We need to retrieve the projection from this overlay to do this.<br />
			var overlayProjection = this.getProjection();</p>
<p>			// Retrieve the southwest and northeast coordinates of this overlay<br />
			// in latlngs and convert them to pixels coordinates.<br />
			// We&#8217;ll use these coordinates to resize the DIV.<br />
			var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());<br />
			var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());</p>
<p>			// Resize the image&#8217;s DIV to fit the indicated dimensions.<br />
			var div = this.div_;<br />
			div.style.left = sw.x + &#8216;px&#8217;;<br />
			div.style.top = ne.y + &#8216;px&#8217;;<br />
			//div.style.width = (ne.x &#8211; sw.x) + &#8216;px&#8217;;<br />
			//div.style.height = (sw.y &#8211; ne.y) + &#8216;px&#8217;;</p>
<p>		}</p>
<p>		this.prototype.onRemove = function() {<br />
			this.div_.parentNode.removeChild(this.div_);<br />
			this.div_ = null;<br />
		}</p>
<p>}</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Vordreller</title>
		<link>http://ajaxian.com/archives/custom-info-windows-with-jquery-and-google-maps/comment-page-1#comment-271992</link>
		<dc:creator>Vordreller</dc:creator>
		<pubDate>Fri, 13 Mar 2009 12:37:31 +0000</pubDate>
		<guid isPermaLink="false">http://ajaxian.com/?p=6316#comment-271992</guid>
		<description>Neat feature, but kinda useless. I&#039;m not gonna paste an extra 75 lines of code to waste my bandwith for something I can do with a the normal google maps API. Sure it&#039;s not a nice look, but it&#039;s something.

Also, why is &quot;padding: &#039;0 0 0 0&#039;&quot; not turned into &quot;padding: &#039;0&#039;&quot;

?</description>
		<content:encoded><![CDATA[<p>Neat feature, but kinda useless. I&#8217;m not gonna paste an extra 75 lines of code to waste my bandwith for something I can do with a the normal google maps API. Sure it&#8217;s not a nice look, but it&#8217;s something.</p>
<p>Also, why is &#8220;padding: &#8217;0 0 0 0&#8242;&#8221; not turned into &#8220;padding: &#8217;0&#8242;&#8221;</p>
<p>?</p>
]]></content:encoded>
	</item>
</channel>
</rss>

