GoogleMap Marker using Flex
Problem
To make a Google map component in Flex. Also provide a marker capability, such that on every double click the marker is added on Google map. This can be used to develop mesh-up application using googlemap with some other API (like yahoo search)
Solution
On each double click on the map, marker is added to Google map thus creating a overlay of markers on top of the Google map. Please include the SWC file provided here with as an attachment.
Detailed explanation
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="100%" height="100%"
viewSourceURL="srcview/index.html">
<mx:Panel title="Google Maps Flash API Marker Creator Demo"
backgroundColor="#FFFFFF" width="100%" height="100%">
<mx:UIComponent id="mapHolder"
initialize="onHolderCreated(event);"
resize="onHolderResized(event)"
width="100%" height="100%"/>
</mx:Panel>
<mx:Script>
<![CDATA[
import com.google.maps.controls.ZoomControl;
import com.google.maps.InfoWindowOptions;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.LatLng;
import com.google.maps.MapEvent;
import com.google.maps.overlays.Marker;
import com.google.maps.MapMouseEvent;
import com.google.maps.Map;
private var map:Map;
private var testPoint:Marker;
public var latlongholder:Array=new Array;
public function onHolderCreated(event:Event):void
{
this.map = new Map;
this.map.key =
"ABQIAAAAvZMU4-DFRYtw1UlTj_zc6hT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQcT1h-VA8wQL5JBdsM5JWeJpukvw";
//pass your api key here
this.map.addEventListener(MapEvent.MAP_READY,
onMapReady);
mapHolder.addChild(map);
}
public function onHolderResized(event:Event):void
{
this.map.setSize(new Point(mapHolder.width,
mapHolder.height));
}
private function onMapReady(event:Event):void
{
this.map.setCenter(new LatLng(21.15,79.1), 13);
this.map.addEventListener(MapMouseEvent.CLICK,
onMapClick);
map.addControl(new ZoomControl);
}
private function
onMapClick(event:MapMouseEvent):void
{
var marker:Marker = new Marker(event.latLng);
// var latlongholder:Array=event.latLng.
// latlongholder.push(event.latLng.toString())
this.map.addOverlay(marker);
}
]]>
</mx:Script>
</mx:Application>
This is sample output of App.
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
Report abuse
