谷歌地圖此代碼的自定義標記

Question

我們使用以下代碼來顯示自定義谷歌地圖。 我們有一個自定義標記，我可以愉快地爲它製作一個陰影。 我們需要的，而不是從谷歌

這裏捆綁的紅色標記在地圖上顯示我們的定製標記，是我們的代碼：

<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> 

我已經改變了PHP的一部分用於這個問題。

安美居看這個網站的信息：

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

只是不知道在哪裏以及如何正確地他引用（在上面的鏈接）的代碼添加到我們的代碼。 或者如果有更好的方法。

代碼我現在是：

<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> 

我有標記，並取得了陰影，但他們沒有顯示，路徑是正確的只是不知道爲什麼它不是顯示..我有沒有翹起起來。

Answer 1

[Update 2]看起來你並沒有關注Google Maps API的版本。在更新的示例中，您已經將V2和V3 API混合在一起。以下答案與V2 API相關 - 就像您在原始問題中使用的那樣。

按照鏈接頁面中所述構建圖標，您將以表示Icon對象的Icon變量結束。然後，它作爲第二個參數添加到您的new GMarker功能：

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

更新 - 添加例如：

<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>