Setting custom point (GPoint) icons
Updated: May 17, 2007
Views: 10966
Description: In this tutorial we are going to go over techniques for applying custom markers to the GPoint object.
| Download source files |
There are two ways of adding custom markers. You can either add icon path to the point object in the addPoint(point:Object) method or call GPoint.setCustomIcon(path:String). The custom icon can be an image (JPG,GIF,PNG), SWF or a movie clip that is exported for ActionScript (use Linkage Identifier as a icon path). Once an icon is added, you can use iconOffset object to align it's position however you want.
Add custom icon using addPoint(point:Object) method.
gMap.addPoint({lat:48.856583, lng:2.350903, icon:"icons/icon4.png"});
Add custom icon using setCustomIcon(path:String) method.
var point = gMap.addPoint({lat:48.856583, lng:2.350903});
point.setCustomIcon("icons/icon3.png");
point.setCustomIcon("icons/icon3.png");
In the example below we are adding three types of icons:
- external PNG image
- external SWF file
- internal MovieClip
gMap.addPoint({lat:48.856583, lng:2.350903, icon:"icon_mc", iconOffset:{x:-16,y:-16}});
gMap.addPoint({lat:45.463622, lng:9.188175, icon:"icons/icon1.png", iconOffset:{x:-16,y:-16}});
gMap.addPoint({lat:52.523742, lng:13.41190, icon:"icons/icon2.swf", iconOffset:{x:-16,y:-16}});
gMap.addPoint({lat:45.463622, lng:9.188175, icon:"icons/icon1.png", iconOffset:{x:-16,y:-16}});
gMap.addPoint({lat:52.523742, lng:13.41190, icon:"icons/icon2.swf", iconOffset:{x:-16,y:-16}});
| |
That is about it, you can see the complete list of GPoint properties here.
