Javascript 谷歌地图自定义标记此代码

我们使用下面的代码来显示一个定制的google地图。 我们有一个定制的标记，我也可以为它做一个阴影。 我们需要在地图上显示我们的自定义标记，而不是谷歌的捆绑红色标记

这是我们的代码：

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

var userLocation='<？php echo$address；？>'；
if（GBrowserIsCompatible（））{
var geocoder=new GClientGeocoder（）；
geocoder.getLocations（用户位置，函数位置）{
if（位置、位置标记）
{
var north=locations.Placemark[0]。ExtendedData.LatLonBox.north；
var south=locations.Placemark[0]。ExtendedData.LatLonBox.south；
var east=位置。位置标记[0]。ExtendedData.LatLonBox.east；
var west=位置。Placemark[0]。ExtendedData.LatLonBox.west；
var bounds=新GLatLng bounds（新GLatLng（南部、西部），
新格拉特林（北部、东部）；
var map=newgmap2（document.getElementById（“map_canvas”）；
setCenter（bounds.getCenter（），map.getBoundsZoomLevel（bounds））；
addOverlay（新的GMarker（bounds.getCenter（））；
}
});
}

我已经修改了这个问题的php部分

Anyhoo查看了此网站以获取信息：

只是不确定在哪里以及如何将他引用的代码（在上面的链接中）添加到我们的代码中。 或者如果有更好的方法

我现在的代码是：

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

var userLocation='<？php echo$address；？>'；
if（GBrowserIsCompatible（））{
var geocoder=new GClientGeocoder（）；
geocoder.getLocations（用户位置，函数位置）{
if（位置、位置标记）
{
var north=locations.Placemark[0]。ExtendedData.LatLonBox.north；
var south=locations.Placemark[0]。ExtendedData.LatLonBox.south；
var east=位置。位置标记[0]。ExtendedData.LatLonBox.east；
var west=位置。Placemark[0]。ExtendedData.LatLonBox.west；
var bounds=新GLatLng bounds（新GLatLng（南部、西部），
新格拉特林（北部、东部）；
var map=newgmap2（document.getElementById（“map_canvas”）；
setCenter（bounds.getCenter（），map.getBoundsZoomLevel（bounds））；
addOverlay（新的GMarker（bounds.getCenter（）），图标）；
var image=new google.maps.MarkerImage(
“images/marker.png”，
新谷歌地图大小（33,50），
新google.maps.Point（0,0），
新谷歌地图点（17,50）
);
var shadow=new google.maps.MarkerImage(
“images/shadow.png”，
新谷歌地图尺寸（61,50），
新google.maps.Point（0,0），
新谷歌地图点（17,50）
);
变量形状={
合作伙伴：[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],
类型：“poly”
};
var marker=new google.maps.marker({
真的，
理由：错，
图标：图像，
影子：影子，
形状：形状，
地图：地图，
位置：点
});
}
});
}

---

我制作了标记和阴影，但它们没有显示，路径正确，只是不确定为什么没有显示..我把它搞乱了。

[Update 2]您似乎没有注意到Google Maps API的版本。在您更新的示例中，您将V2和V3 API混合在一起。以下答案与V2 API有关，正如您在原始问题中使用的那样

按照链接页面中的描述构建图标，您将得到一个代表图标对象的图标变量。然后将其作为第二个参数添加到您的

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

var userLocation='<？php echo$address；？>'；
if（GBrowserIsCompatible（））{
var geocoder=new GClientGeocoder（）；
geocoder.getLocations（用户位置，函数位置）{
if（位置、位置标记）
{
var north=locations.Placemark[0]。ExtendedData.LatLonBox.north；
var south=locations.Placemark[0]。ExtendedData.LatLonBox.south；
var east=位置。位置标记[0]。ExtendedData.LatLonBox.east；
var west=位置。Placemark[0]。ExtendedData.LatLonBox.west；
var bounds=新GLatLng bounds（新GLatLng（南部、西部），
新格拉特林（北部、东部）；
var map=newgmap2（document.getElementById（“map_canvas”）；
var Icon=new GIcon（）；
Icon.image=“mymarker.png”；
Icon.iconSize=新的GSize（20,34）；
setCenter（bounds.getCenter（），map.getBoundsZoomLevel（bounds））；
addOverlay（新的GMarker（bounds.getCenter（）），图标）；
}
});
}

[Update 2]您似乎没有注意到Google Maps API的版本。在您更新的示例中，您已经将V2和V3 API混合在一起。以下答案与V2 API有关-正如您在原始问题中使用的那样

按照链接页面中的描述构建图标，您将得到一个代表图标对象的图标变量。然后将其作为第二个参数添加到您的

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

var userLocation='<？php echo$address；？>'；
if（GBrowserIsCompatible（））{
var geocoder=new GClientGeocoder（）；
geocoder.getLocations（用户位置，函数位置）{
if（位置、位置标记）
{
var north=locations.Placemark[0]。ExtendedData.LatLonBox.north；