views:

226

answers:

2

I want to change Images of my markers in this javascript can anybody help me out from this ... thankx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
<html xmlns="http://www.w3.org/1999/xhtml"&gt; 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=abcdefg&amp;sensor=true_or_false" 
            type="text/javascript"></script> 

<script type="text/javascript"> 

function geocoder(){ 

var place =  document.getElementById("textarea").value; 

geocoder = new GClientGeocoder(); 
geocoder.getLatLng(place, function(point) 
{ 
    if (!point) 
 { 
        alert(place + " not found"); 
     } 
else 
{ 
        var info = "<h3>"+place+"</h3>Latitude: "+point.y+"  Longitude:"+point.x; 
        var map = new GMap2(document.getElementById("map_canvas")); 
       map.setCenter(point, 13); 
        map.setUIToDefault();            
      var marker = new GMarker(point);

     map.addOverlay(marker); 
        marker.openInfoWindowHtml(point.toUrlValue(5)); 



} 
}

);
} 
</script> 





</head> 

<body> 


<table width="347" border="1" align="right"> 
  <tr> 
    <td width="168">&nbsp;</td> 
    <td width="163">&nbsp;</td> 
  </tr> 
  <tr> 
    <td height="45"><div align="right">Address : </div></td> 
    <td><form id="form1" name="form1" method="post" action=""> 
      <label> 
      <textarea name="textarea" id="textarea"></textarea> 
      </label> 
    </form> 
    </td> 
  </tr> 
  <tr> 
    <td><form id="form2" name="form2" method="post" action=""> 
      <label> 
        <input name="Button" type="Button" id="Button" value="Submit" onClick="geocoder()" onunload="GUnload()"/> 
        </label> 
    </form> 
    </td> 
    <td>&nbsp;</td> 
  </tr> 
</table> 
 <div id="map_canvas" style="width: 500px; height: 300px"></div> 


</body> 
</html>
+1  A: 

The GMarker constructor takes a GMarkerOptions as the second parameter. You can use that to specify a GIcon to use for the marker.

It may look something like this:

var marker = new GMarker(point, {
    icon: new GIcon(
        G_DEFAULT_ICON, 
        '/images/custom_marker.png')
    });

This uses the default icon as a baseline, and changes just the main image. There are a number of other properties you can set on the icon, depending on whether you need to change the shadow, etc.

You can also upload your image to a site, like the Google Map Custom Marker Maker, which will create the extra images and javascript for the icon.

Finally, check out the Custom Icons for Markers topic on the Google Maps group.

bdukes
+1  A: 

You can specify your marker parameters like so:

var num = 1 //etc..
var icon = new GIcon();
icon.image = "/mapIcons/icon"+num+".png";
icon.iconSize = new GSize(20,32);
icon.shadowSize = new GSize(20, 34);
icon.iconAnchor = new GPoint(11, 15);
icon.infoWindowAnchor = new GPoint(11, 15);
icon.shadow = "";
Diodeus