Google Maps API – Custom markers problem

Google Maps API – Custom markers problem

On 09.17.09, In Flash, by Domenico Citrangulo

Today I was writing a basic Flash application using the Google Maps Flash API. For those who doesn’t know, this is a very useful API for create maps (like Google Maps) inside Flash movies or Flex projects. But I had a problem when I was trying to create a custom Marker (with an image instead that default marker) and was very hard to find a solution at web or documentation, so I’ll give the solution here.

The Documentation of Google Maps Flash API is very good and a good start point. But has a little lack: no code examples for custom Marks. If you want one you’l find just Flex examples. Here’s the sample code for custom Marks in Flex:

//Image Embed
[Embed(source="myimage.png")]
private var myimage:Class;

// Create the marker
var myname = "Tooltip name";
var bm:Bitmap = new myimage() as Bitmap;
var m:Marker = new Marker(new LatLng(list[i].lat, list[i].lon),
new MarkerOptions({tooltip:myname, icon:bm}));

This works well for Flex applications but not in Flash. If you try to use this code in Flash you will get an error like this:

TypeError: Error #1007: Instantiation attempted on a non-constructor.
        at MethodInfo-1735()
        at MethodInfo-1736()
        at flash.events::EventDispatcher/dispatchEventFunction()
        at flash.events::EventDispatcher/dispatchEvent()
        at flash.net::URLLoader/onComplete()

I made several searches in Google and tried quite a few of codes solutions and none of them works: in some cases I got new errors, in others I didn’t get errors but the marker didn’t appear. After some studying I made it with this code:

var request:URLRequest = new URLRequest("red.png");
var imageLoader:Loader = new Loader();
imageLoader.load(request);

var markerOptions:MarkerOptions = new MarkerOptions();
markerOptions.icon = imageLoader;
markerOptions.tooltip = "dom";
var m:Marker = new Marker(new LatLng(-23.6104, -46.6670), markerOptions);
map.addOverlay(m);

Got it? You just need to create a loader for your image and then use a URLRequest object to get the file. It’s so obvious now, but I spent a good time on this. I hope you don’t.