이 코드에 대한 Google지도 사용자 정의 마커

Question

다음 코드를 사용하여 맞춤 Google지도를 표시합니다. 우리는 행복하게도 그림자를 만들 수있는 맞춤 마커를 가지고 있습니다. 나는이 질문에 대한 PHP 부분을 변경 한

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

: 우리는 대신 구글

다음

에서 번들로 빨간색 마커의지도에 우리의 사용자 정의 마커를 표시해야하는 것은 우리의 코드입니다.

어쨋든는 정보를 원하시면이 사이트 바라 보았다 :

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

[업데이트 2] Google지도 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>