I’m working on some Google Maps Flex API exercises to familiarize myself with working with the API library.
The first things to do are to sign up for a Google Maps API Key, and download the Google Maps Flex Library SWC (use the one with “Flex” in the filename). I am following the Google Maps API For Flash Docs really closely here as this is the first time I’ve worked with the API. In the example, to follow, my objective is to create a map where I can add an address, have it geocoded with the Google geocode service, and then display that address as a point on the map with a marker. I want to have zoom, drag, and also to be able to click on the marker to get the point information in a marker information window.
After following through the docs, I found that it is really easy to get a basic map to render with very little code. To do this, you can simply declare a new map object inside your main application file using the following mxml:
<maps:Map id="map" mapevent_mapready="onMapReady(event)"
width="100%"
height="100%"
key="[enter API key here]"
/>
Along with the onMapReady method which handles map properties:
//called by the mapevent_mapready event in maps, instantiated in <maps:Maps...
private function onMapReady(e:MapEvent):void{
//enable mouse wheel zoom and add the standard google zoom contorl to map
map.enableScrollWheelZoom();
map.enableContinuousZoom();
map.addControl(new ZoomControl());
}
That is enough to put a global map on your screen, now we need to give the map some information. I want to be able to provide an address and have the Google service geocode it for me. In order to do this, I am going to need the API ClientGeocoder class. The following method creates a new ClientGeocoder, sets up geocode event listeners, and passes the address from a TextInput into a method from the ClientGeocoder class, called geocode(String), that accepts a String argument, which will be the address.
//this method takes care of the address geocoding, handling result events
private function geocode(event:Event):void {
geocoder = new ClientGeocoder();
//geocoder event listeners for success or failure
geocoder.addEventListener( GeocodingEvent.GEOCODING_SUCCESS,geoSuccess);
geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE,geoFail);
//geocode the address, passing in the address from textfield
geocoder.geocode(addy.text);
}
If the geocoder returns success, the following listener method is called. I assign the placemarks property value from the result to a variable and if it has length, I set the map center, the initial map zoom level, the map type, the marker point for the placemark, and add the marker to the map. I also setup a listener for a click event on the marker that will call a method that creates an address information window.
//listener method if the result event returns success
private function geoSuccess(event:GeocodingEvent):void {
//assign the placemarks value from the response
placemarks = event.response.placemarks;
//check and see if response returned any placemarks
if (placemarks.length > 0) {
//set the center of the map to the placemark point, set initial map zoom and type
map.setCenter(placemarks[0].point,15,MapType.NORMAL_MAP_TYPE);
//create a new marker for the placemark
marker = new Marker(placemarks[0].point);
//listen for a click event on the marker
marker.addEventListener(MapMouseEvent.CLICK, addMarker);
//add the marker on map
map.addOverlay(marker);
}
}
Here is the addMarker method called from the geoSuccess method.
//listener method for marker click event
private function addMarker(event:MapMouseEvent):void {
//open the placemark information window
marker.openInfoWindow(new InfoWindowOptions({content: placemarks[0].address}));
}
If the result event returns failure, then I simply launch an Alert, notifying the user that geocoding failed.
Here is the resulting application thus far:
I’m going to be continuing to play with the API. As I learn more and add to this app, I plan on successive follow-up posts which discuss additional functionality.
HTH!
#100blogs challenge Day5 http://bit.ly/4MtAfx
Loading ...
