In this post i will show you briefly on how you can change the standard map marker of a Yahoo map component inside Flash, into any custom marker. Basically we can just sent a movieclip to the map marker manager to attach as marker.
Below is the Actionscript code you can use to achieve a custom marker , this is just a movieclip that is attached to the SimpleMarker and can be used to make the map more interactive by example including buttons or other components inside this movieclip …
Custom Marker Clip
Custom Marker
Following the code above, the outcome would be something like this , but than with your custom image as marker
Daan is a Creative-Geek with passion for Adobe Flash , Flex and Air. He loves learning and sharing new techniques! Follow him on
Hi nice tutorial of yours!! I was very happy after seeing your tutorial cuz I need help in putting my own custom marker(example: myhouse.jpeg)in actionscript 3.0. The code that I have here gave me a default marker which is not what I want. This is how it goes:
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.LatLng;
import com.google.maps.MapType;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.Marker;
var map:Map = new Map();
map.key = “Your API Key Here”;
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);
function onMapReady(event:Event):void {
map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
var marker:Marker = new Marker(new LatLng(40.736072, -73.992062));
map.addOverlay(marker);
}
Thanks a million if you know how :>
Hi Potia,
This code will put your own custom marker to your Yahoo Map component.
But you need to create a MovieClip in you library, and give it a instance name off course! This MovieClip contains an image of your own.
In this example i called the instance name of your custom marker: markerClip.
I hope this clears up your issues.
Regards.
Hi,
I implemented google maps on my website, not yahoo maps I was wondering if it is a lot different, and I was wondering if the way you modify the marker’s image using your own MC’s is the same with both or do they differ?
Also, I was wondering if there is a way to integrate the “get directions” in the maps as well… if so, would you be able to help?
Thanks in advance for all the help!
I never tested that with the Google Maps API.
But there are some nice resources available, including custom marker icons.
Take a look: http://code.google.com/intl/nl/apis/maps/documentation/flash/overlays.html#Icons_Overview
And good luck!
WOW this is what I’ve been looking for for a while, thanks Daan! I hope you keep writing more and very interesting tutorials like this one!
Hi again,
I have another question regarding the maps… I’m not sure if this is relevant to this subject but there are no other posts/tutorials regarding maps in this website.
These maps can be published either within the main flash file, or within an Actionscript file, my website currently has it integrated in it, however, my question is, when you put it in the Actionscript file as a package, when you call it inside your main file, how do you call it?
I know you call the function as whatever the Actionscript’s file name is, so for example my Actionscript file/function is called googlemap, so I would go googlemap(); but apparently you have to call a parameter at the same time that you call googlemap.
googlemap(parameter);
so my question is what is that parameter that I have to call?
Thank you once again for your help!
The best way is to create a Singleton Design pattern, that contains the map container.
You will have to create a external AS file, were you create your Yahoo or Google map. Set the different attributes and call the property (the map instance) from the AS file and add it to the main SWF. Normally it will not need parameters if you didn’t assign it to the calling function.
Please check a previous article: http://creative-geeks.com/blog/?p=25
On how to create these Singletons.
Resource site on how to use Google maps with Flash CS3/4: http://code.google.com/intl/nl/apis/maps/documentation/flash/tutorial-flash.html
Hope this fixes your problem, just let me know!
Good luck!
hey thanks for your quick answer,
I’ll check out the Singletons tutorial in a while, I just wanted to stress out that I DO have my AS file already, the second link you gave me shows how to do it inside the main swf file.
When I call my AS file, that’s when it asks me for a parameter.
the following code is my AS file:
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Point;
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.OverviewMapControl;
public class googlemap extends Sprite {
var map:Map = new Map();
public function googlemap() {
map.key = “my API key”;
map.setSize(new Point(stage.stageWidth, (stage.stageHeight-100)));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);
function onMapReady(event:Event):void {
map.setCenter(new LatLng(45.436319770227,12.33638048172), 13, MapType.NORMAL_MAP_TYPE);
map.addControl(new ZoomControl());
map.addControl(new OverviewMapControl());
map.addControl(new MapTypeControl());
}
}
}
}
When I call this AS file from my main swf, I call it by its name googlemap(); however that’s when It tells me I need a parameter inside. So I’ll take a look at the other tutorial…
Thanks a lot for your help!
I bookmarked this link. Thank you for this nice post!
Hi, awesome article.
i try to make 2 markers. so what should i do in here.?
var marker:Marker = new Marker(new LatLng(40.736072, -73.992062));
map.addOverlay(marker);
?
i hope u guys can help me so i can sleep.
I love this blog. I’ve been looking high and low for this! Thank the stars I found it on Googs. Thx again
`.* I am really thankful to this topic because it really gives great information -:,
Oh my goodness! a tremendous article dude. Thanks Nonetheless I’m experiencing challenge with ur rss . Don’t know why Unable to subscribe to it. Is there anyone getting an identical rss problem? Anybody who is aware of kindly respond. Thnkx
wonderful points altogether, you simply gained a new reader. What would you suggest about your post that you made a few days ago? Any positive?
Hi there, I found your site via Google while looking for a related topic, your site came up, it looks great. I’ve bookmarked it in my google bookmarks.