LetsFlex

google maps: InfoWindowOptions.customContent

by jlagunas on Nov.25, 2008, under Google Maps

The following example continues from the previous post google maps geocoding service by using the customContent parameter to display an image instead of using the content parameter to display company information.

note: you will need to download the Google Maps API for Flash SDK Version 1.8a.

 

MXML File

<?xml version="1.0" encoding="utf-8"?>
	<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" layout="absolute" initialize="initializeHandler(event);" viewSourceURL="srcview/index.html">

		<mx:Script>
			<![CDATA[
				import mx.controls.Alert;
				import mx.events.ResizeEvent;
				import mx.rpc.events.ResultEvent;
				import mx.rpc.events.FaultEvent;

				import com.google.maps.InfoWindowOptions;
				import com.google.maps.overlays.Marker;
				import com.google.maps.services.Placemark;
				import com.google.maps.services.GeocodingEvent;
				import com.google.maps.services.GeocodingResponse;
				import com.google.maps.services.ClientGeocoder;
				import com.google.maps.MapMouseEvent;
				import com.google.maps.LatLng;
				import com.google.maps.MapEvent;
				import com.google.maps.Map;

				private var map:Map;
				private var geocoder:ClientGeocoder;
				private var marker:Marker;
				private var xmlRequest:URLRequest;
				private var xmlLoader:URLLoader;
				private var xml:XML;
				private var xmlList:XMLList;
				private var companyName:String;
				private var companyAddress:String;
				private var companyCity:String;
				private var companyState:String;
				private var companyZip:String;
				private var companyLogo:String; // ADDED TO SHOW COMPANY LOGO
				private var titleFormat:TextFormat;
				private var contentFormat:TextFormat;

				private function initializeHandler(event:Event):void
				{
					map = new Map();
					map.key = "ABQIAAAATWQnNGYYF28knwWIESB8zhRLz8UzBuuxzPpAro5QNlTIlTn1thTHQ2SeYGgkJAudO3Ky8iX2UYjyCQ";
					map.addEventListener(MapEvent.MAP_READY, mapReadyHandler);

					mapComponent.addChild(map);
				}

				private function mapReadyHandler(event:MapEvent):void
				{
					xmlRequest = new URLRequest("address.xml");
					xmlLoader = new URLLoader(xmlRequest);
					xmlLoader.addEventListener("complete", xmlLoaderHandler);
				}

				private function xmlLoaderHandler(event:Event):void
				{
					xml = new XML(event.target.data);
					xmlList = xml..marker;

					companyName = xmlList.@name;
					companyAddress = xmlList.@address;
					companyCity = xmlList.@city;
					companyState = xmlList.@state;
					companyZip = xmlList.@zip;
					companyLogo = xmlList.@image; // COMPANY LOGO

					geocoder = new ClientGeocoder();
					geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, geocodingSuccessHandler);
					geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE, geocodingFailureHandler);
					geocoder.geocode(companyAddress + " " + companyCity + ", " + companyState + " " + companyZip);
				}

				private function geocodingSuccessHandler(event:GeocodingEvent):void
				{
					marker = new Marker(GeocodingResponse(event.response).placemarks[0].point);
					marker.addEventListener(MapMouseEvent.CLICK, markerClickHandler);

					map.addOverlay(marker);
					map.setCenter(GeocodingResponse(event.response).placemarks[0].point, 11);
				}

				private function geocodingFailureHandler(event:GeocodingEvent):void
				{
					Alert.show("can not locate: " + event.name);
				}

				private function markerClickHandler(event:MapMouseEvent):void
				{
					titleFormat = new TextFormat();
					titleFormat.font = "Arial";
					titleFormat.size = 14;
					titleFormat.bold = true;

					contentFormat = new TextFormat();
					contentFormat.font = "Arial";
					contentFormat.size = 12;

					var urlRequest:URLRequest = new URLRequest(companyLogo);
					var imageLoader:Loader = new Loader();
					imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(event:Event):void
					{
						var infoWindow:InfoWindowOptions = new InfoWindowOptions();
						infoWindow.title = companyName;
						infoWindow.titleFormat = titleFormat;
						//
						// CURRENTLY THERE IS NO WAY OF ADDING STINGS INTO THE CUSTOMCONTENT PARAMETER
						//
						//infoWindow.content = companyAddress + "n" + companyCity + ", " + companyState + " " + companyZip;
						//infoWindow.contentFormat = contentFormat;
						infoWindow.customContent = imageLoader;
						infoWindow.drawDefaultFrame = true;
						infoWindow.padding = 10;
						infoWindow.width = (imageLoader.width + 10);
						infoWindow.height = (imageLoader.height + 10);

						marker.openInfoWindow(infoWindow);
					});

					imageLoader.load(urlRequest);
				}

				private function mapResizeHandler(event:ResizeEvent):void
				{
					map.setSize(new Point(mapComponent.width, mapComponent.height));
				}
			]]>
		</mx:Script>

		<mx:UIComponent id="mapComponent" width="100%" height="100%" resize="mapResizeHandler(event);" />

	</mx:Application>

XML File

<?xml version="1.0" encoding="UTF-8"?>
	<markers>
	<marker name="ad2, Inc." address="1990 e. grand ave" city="el segundo" state="ca" zip="90245" image="ad2 logo_black.jpg" />
</markers>
:, , , ,
No comments for this entry yet...

Leave a Reply

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...

Archives

All entries, chronologically...