google map custom icons

This will have all the information you will need.

http://groups.google.com/group/Google-Maps-API/web/examples-tutorials-custom-icons-for-markers

Hi there,

I added some example code, if you need it. The example code assumes you already have a map to which you can add the custom icon.

All you need to change though, is the image URL's and the map variable.

Hope it helps ^_^

//Create a new icon
var baseIcon = new GIcon();
 
//Set the image and the shadow of the icon (The shado is optional,
//so if you don't need it, leave it out)
baseIcon.shadow = "/images/shadow.png";
baseIcon.image = "/images/crosshair.png";
 
//Set the size of the image and the shadow (in pixels, this should be the same size as the images you are using)
baseIcon.shadowSize = new GSize(16, 16);
baseIcon.iconSize = new GSize(16, 16);
 
//Set the anchor point of the new icon (x,y)
baseIcon.iconAnchor = new GPoint(8, 8); // this would be in the middle of the icon
 
//Create new icon options using the option you prepared
//and add additional options as needed
var crossHairOptions = { icon:baseIcon,clickable:false };
 
//Create the custom marker
crossHairMarker = new GMarker(new GLatLng(0,0), crossHairOptions);
 
//Add the custom marker to the map
map.addOverlay(crossHairMarker);

Select allOpen in new window

My issue is how to set for direction start and end icons. So custom icons for start and end. I think your example is for one image at the center of map.

This particular example is an icon in the middle of the map, but the code can be modified to support two icons.

<script>
 
//Create a new icon
var baseStartIcon = new GIcon();
var baseEndIcon = new GIcon();
 
//Set the image and the shadow of the icon (The shado is optional,
//so if you don't need it, leave it out)
baseStartIcon.shadow = "/images/image.png";
baseStartIcon.image = "/images/image.png";
baseEndIcon.shadow = "/images/image.png";
baseEndIcon.image = "/images/image.png";
 
//Set the size of the image and the shadow (in pixels, this should be the same size as the images you are using)
baseStartIcon.shadowSize = new GSize(16, 16);
baseStartIcon.iconSize = new GSize(16, 16);
baseEndIcon.shadowSize = new GSize(16, 16);
baseEndIcon.iconSize = new GSize(16, 16);
 
//Set the anchor point of the new icon (x,y)
baseStartIcon.iconAnchor = new GPoint(8, 16); // this would be at the middle-bottom of the icon
baseEndIcon.iconAnchor = new GPoint(8, 16); // this would be at the middle-bottom of the icon
 
//Create new icon options using the option you prepared
//and add additional options as needed
var startIconOptions = { icon:baseStartIcon,clickable:false };
var endIconOptions = { icon:baseEndIcon,clickable:false };
 
//Create the custom marker
startIcon = new GMarker(new GLatLng(0,0), startIconOptions);//Ajust latitude and longitude for required start position
endIcon = new GMarker(new GLatLng(0,0), endIconOptions);//Ajust latitude and longitude for required end position
 
//Add the custom marker to the map
map.addOverlay(startIcon);
map.addOverlay(endIcon);
 
</script>

Select allOpen in new window

still loading default ones.. A and B not mine:

var map = new google.maps.Map2(document.getElementById('mymap'));
map.addControl(new GLargeMapControl);
map.addControl(new GMapTypeControl());

//Create a new icon
var baseStartIcon = new GIcon();
var baseEndIcon = new GIcon();
 
//Set the image and the shadow of the icon (The shado is optional,
//so if you don't need it, leave it out)
baseStartIcon.shadow = "/images/image1.png";
baseStartIcon.image = "/images/image1.png";
baseEndIcon.shadow = "/images/image2.png";
baseEndIcon.image = "/images/image2.png";
 
//Set the size of the image and the shadow (in pixels, this should be the same size as the images you are using)
baseStartIcon.shadowSize = new GSize(16, 16);
baseStartIcon.iconSize = new GSize(16, 16);
baseEndIcon.shadowSize = new GSize(16, 16);
baseEndIcon.iconSize = new GSize(16, 16);
 
//Set the anchor point of the new icon (x,y)
baseStartIcon.iconAnchor = new GPoint(8, 16); // this would be at the middle-bottom of the icon
baseEndIcon.iconAnchor = new GPoint(8, 16); // this would be at the middle-bottom of the icon
 
G_START_ICON = baseStartIcon;
G_END_ICON = baseEndIcon;

var dir = new GDirections(map, document.getElementById('mymap'));

dir.load( .... );

something to do with version of api?

this is actually not directions (address to address), it is pretty much from city to city which is work.
Thanks for help... I have to give you points for help.

Anybody can help me in this MAP.. ?
I used above script. It's really too good. But i want to put my own dynamic value on click on icon...
Can you please help me ..??