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...
