google map custom marker for this code

Question

We use the following code to display a custom google map. We have a custom marker, which I can happily also make a shadow for . We need to display our CUSTOM marker on the map, instead of the bundled red marker from google

Here is our code:

<script type="text/javascript"> 

var userLocation = '< ? php echo $address; ? >';

if (GBrowserIsCompatible()) {
   var geocoder = new GClientGeocoder();
   geocoder.getLocations(userLocation, function (locations) {         
      if (locations.Placemark)
      {
         var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
         var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
         var east  = locations.Placemark[0].ExtendedData.LatLonBox.east;
         var west  = locations.Placemark[0].ExtendedData.LatLonBox.west;

         var bounds = new GLatLngBounds(new GLatLng(south, west), 
                                        new GLatLng(north, east));

         var map = new GMap2(document.getElementById("map_canvas"));

         map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
         map.addOverlay(new GMarker(bounds.getCenter()));
      }
   });
}
</script> 

I have altered the php portion for this question.

Anyhoo looked at this site for info:

http://econym.org.uk/gmap/custom.htm

Just not sure where and exactly how to add the code he quotes ( in link above ) to our code. Or if there is a better way.

Code I now have is:

<script type="text/javascript"> 

    var userLocation = '< ? php echo $address; ? >';

    if (GBrowserIsCompatible()) {
       var geocoder = new GClientGeocoder();
       geocoder.getLocations(userLocation, function (locations) {         
          if (locations.Placemark)
          {
             var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
             var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
             var east  = locations.Placemark[0].ExtendedData.LatLonBox.east;
             var west  = locations.Placemark[0].ExtendedData.LatLonBox.west;

             var bounds = new GLatLngBounds(new GLatLng(south, west), 
                                            new GLatLng(north, east));

             var map = new GMap2(document.getElementById("map_canvas"));

             map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
             map.addOverlay(new GMarker(bounds.getCenter()), Icon);

             var image = new google.maps.MarkerImage(
  'images/marker.png',
  new google.maps.Size(33,50),
  new google.maps.Point(0,0),
  new google.maps.Point(17,50)
);

var shadow = new google.maps.MarkerImage(
  'images/shadow.png',
  new google.maps.Size(61,50),
  new google.maps.Point(0,0),
  new google.maps.Point(17,50)
);

var shape = {
  coord: [21,1,21,2,23,3,25,4,26,5,27,6,28,7,29,8,31,9,31,10,31,11,32,12,32,13,32,14,32,15,32,16,32,17,32,18,32,19,32,20,32,21,32,22,32,23,32,24,32,25,32,26,31,27,31,28,31,29,30,30,29,31,29,32,29,33,28,34,28,35,27,36,27,37,26,38,26,39,25,40,25,41,24,42,24,43,23,44,23,45,22,46,21,47,21,48,20,49,12,49,11,48,11,47,10,46,10,45,9,44,8,43,8,42,7,41,7,40,6,39,6,38,5,37,5,36,4,35,4,34,3,33,3,32,3,31,2,30,2,29,1,28,1,27,1,26,0,25,0,24,0,23,0,22,0,21,0,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,1,11,1,10,1,9,4,8,4,7,5,6,6,5,7,4,9,3,11,2,11,1,21,1],
  type: 'poly'
};

var marker = new google.maps.Marker({
  draggable: true,
  raiseOnDrag: false,
  icon: image,
  shadow: shadow,
  shape: shape,
  map: map,
  position: point
});
          }
       });
    }
</script> 

I have the marker and the shadow made, but they are not showing, paths are correct just not sure why it isnt showing.. Have I cocked it up.

Answer 1

[Update 2] It appears you are not paying attention to the version of the Google Maps API. In your updated example, you have mashed together the V2 and V3 API. The following answer relates to the V2 API - as you were using in your original question.

Build the Icon as described in the linked page, you will end up with an Icon variable which represents the Icon object. Then add it as the second parameter to your new GMarker function:

map.addOverlay(new GMarker(bounds.getCenter()), Icon);

update - adding example:

<script type="text/javascript"> 

var userLocation = '< ? php echo $address; ? >';

if (GBrowserIsCompatible()) {
   var geocoder = new GClientGeocoder();
   geocoder.getLocations(userLocation, function (locations) {         
      if (locations.Placemark)
      {
         var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
         var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
         var east  = locations.Placemark[0].ExtendedData.LatLonBox.east;
         var west  = locations.Placemark[0].ExtendedData.LatLonBox.west;

         var bounds = new GLatLngBounds(new GLatLng(south, west), 
                                        new GLatLng(north, east));

         var map = new GMap2(document.getElementById("map_canvas"));

          var Icon = new GIcon();
          Icon.image = "mymarker.png";
          Icon.iconSize = new GSize(20, 34);

         map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
         map.addOverlay(new GMarker(bounds.getCenter()), Icon);
      }
   });
}
</script>