Problem:
Info windows in Google maps are great but how do you pick up specific text events? It is very common to have a ‘learn more’ or ‘click here’ link nested in your text fields. Without direct access to the TextField class in the InfoWindowOptions how do we pick up these events?

Solution:
Well, we could set the customContent variable and pass in a custom DisplayObject but that sounds like a lot of work just to get some simple interaction with the text. Luckily the TextEvent class bubbles by default. This is important since we do not have direct access to the TextField within the info window.

Sample:

Google Maps Text Event

Get Adobe Flash player

(click learn more, close the window and click on the map to re-open)

Code:

private var _map:Map;
private var _infoWindow:InfoWindowOptions;
private var _ready:Boolean = false;

public function GoogleMapsTextEvent()
{
	stage.scaleMode = StageScaleMode.NO_SCALE;
	stage.align = StageAlign.TOP_LEFT;

	_map = new Map();
	_map.key = "YOUR GOOGLE MAPS KEY";
	_map.setSize(new Point(300, 300));
	_map.addEventListener(MapEvent.MAP_READY, onMapReady);
	_map.addEventListener(MapMouseEvent.CLICK, addInfoWindow);
	
	_infoWindow = new InfoWindowOptions();

	this.addChild(_map);
}

private function onMapReady(event:Event):void 
{
	_ready = true;
	_map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
	_map.addEventListener(TextEvent.LINK, testFunction, false, 0, true);
	addInfoWindow();
}

private function addInfoWindow(event:MapMouseEvent = null):void
{
	if(_ready){
		_infoWindow.contentHTML = "Simple... <a href='event:myEvent'>Learn More.</a>";
		_map.openInfoWindow(_map.getCenter(), _infoWindow);
	}
}

private function testFunction(event:TextEvent):void
{
	_infoWindow.contentHTML = "Extended text.";
	_map.openInfoWindow(_map.getCenter(), _infoWindow);
}

Useful Links:
InfoWindowOptions
TextEvent
Custom Google Map Markers

Enjoy!

One thought on “Google Maps: InfoWindowOptions and TextEvents

Comments are closed.