This chapter is about using Google Maps from within Haxe Flash. And it is a step right into practising, using Haxe Flash. In order to start, you should have already installed Flash and have built your own simple samples.
Due to the restriction of the Google API-Key the samples are only usable on the demo server Link to chapter03 of demo server, lionpath.com. In order to use them on your webserver replace the value of the key parameter with your API key.
Google Maps is a service using the Google Maps within your own application. Most of you might already know the
service www.google.com/maps which could be used to find local ressources, routes, etc.
The API allows you to use this functionality in your on applications, according to the license agreement.
Google already offers samples and libraries to launch applications - unfortunately only for Adobes Flex(TM) and not for Haxe.
This chapter should fill the gap and give you all instructions you need to know to get started.
All API details should be ready right from Googles API, while here we focus on getting it running in Haxe.
Link to the Flash API: Google Maps - Flash API
Google offers a SDK which contains documentation and a library. As of writing this the library file was called map_flex_1_6.swc. The format of this file is an ordinary zip archive. What we need is the containing library.swf file. Here are the things you need to have in order to start practising:
Note: I am clarifying whether I am allowed to package the extracted library file on a website, but until I have a go, you have to do the steps by your own. ;-(
Having downloaded the Google SDK, make a new directory and unzip the contents.
Rename the extension of the swc file to zip and unpack this file. All we need is the library.swf file,
which you should rename to googlemaps.swf
The next step is to generate the interface classes, but for the version 1.6. This work has been done and the interface files are in the tutorial source tree. Only when there is a newer version you might need to regenerate them. Anyway, the process of generating interface files is well described on the Haxe site.
That's it, if something is missing or not working as expected, drop a question on the project forum.
We will start with a simple and plain map, which center is set to Hamburg and the scale is set to zoom level 10. Note: Though the map is simple you could use the mouse to drag the center.
class Demo10 extends Map {
static function main() {
var app:Demo10 = new Demo10();
flash.Lib.current.addChild(app);
app.setSize(new flash.geom.Point(490,490));
}
public function new(){
super();
addEventListener(MapEvent.MAP_READY, onMapReady);
}
private function onMapReady(event:MapEvent) {
setCenter(new LatLng(53.559889,10.038757), 14, MapType.NORMAL_MAP_TYPE);
setZoom(10,false);
}
}
Important for further experiments is that we start in subclassing the Map class.
Basic setup function on a Map should also be postponed until the map is ready, which is
when the MapEvent.MAP_READY event is triggered.
Please go on and change some things in order to see how your favorite town/ place will show up!
Now let's add the usal control elements to ease navigation.
private function onMapReady(event:MapEvent) {
setCenter(new LatLng(53.559889,10.038757), 14, MapType.NORMAL_MAP_TYPE);
setZoom(10,false);
addControl(new ZoomControl());
addControl(new PositionControl());
addControl(new MapTypeControl());
}
Only the function onMapReady get three new initialization lines, one for each control. The API allows fine grained setting to place the controls on the map. For further information please take a look in the API documentation.
Now fun is starting, use your left mouse button to drop markers on the map. You can also drag & drop them on the map, they will bump a little bit.
class Demo12 extends Map {
static function main() {
var app:Demo12 = new Demo12();
flash.Lib.current.addChild(app);
app.setSize(new flash.geom.Point(600,500));
}
public function new(){
super();
addEventListener(MapEvent.MAP_READY, onMapReady);
}
private function onMapReady(event:MapEvent) {
setCenter(new LatLng(53.559889,10.038757), 14, MapType.NORMAL_MAP_TYPE);
setZoom(10,false);
addControl(new ZoomControl());
addControl(new PositionControl());
addControl(new MapTypeControl());
addEventListener(MapMouseEvent.CLICK, onMapClick);
}
private function onMapClick(event:MapMouseEvent) {
var marker : Marker = new Marker(event.latLng,new MarkerOptions({draggable: true}));
addOverlay(marker);
}
}
We only needed to add a mouse handler within the onMapReady event. Placing markers is also quite simple, don not forget to check the API what other options are available - there are quite a few!.
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see http://www.gnu.org/licenses.
Copyright (C) 2008 by Siegmund Gorr