Displaying Infowindows

Tags: Google Maps Infowindow

InfoWindows are handled differently in version 3 of Google's map API than in version 2. In version 3 they are overlays in their own right, which means that it is possible to display several infowindows at the same time. The price for this flexibility is that the displayed infowindows have to be managed separately and explicitly

Where version 2 had methods on overlays to display infowindows, version 3 requires that the infowindow is created as a separate overlay and displayed on the map and destroyed when it is no longer needed. When developing a map control it is necessary to consider the potential memory leaks, so for the moment info windows created from the server, are destroyed when they are closed. Infowindows will survive a postback to the server, but if they are closed, they will be removed from the overlay collection.

To display an infowindow it should be created and added to the overlays collection like any other overlay, like so:

<Reimers:Map runat="server" ID="map" Width="600" Height="400" Zoom="10">
	<Center Latitude="51.477" Longitude="0.0" />
	<Overlays>
		<Reimers:InfoWindow Content="Hello World">
			<Position Latitude="51.47" Longitude="0.01" />
		</Reimers:InfoWindow>
	</Overlays>
</Reimers:Map>

They can also be created in response to an event, like so:

protected void Page_Load(object sender, EventArgs e)
{
	map.OverlayClick += map_OverlayClick;
}

void map_OverlayClick(object sender, OverlayEventArgs e)
{
	var infowindow = new InfoWindow
		{
			Position = e.Overlay.Bounds.Center.ToLatLng(),
			Content = "Hello World"
		};
	e.MapCommand = e.Map.AddOverlay(infowindow, true);
}

Notice how the AddOverlays method uses an extra parameter, which defines that the overlay should be persistent in the overlay collection. The method returns a JavaScript which displays the infowindow, but behind the scenes the overlay collection is also updated. This means that if the page is submitted before the infowindow is closed, it will remain on the map.

Latest Tweets