Google지도 v3에 맞춤 아이콘을 추가하는 방법

Question

아래 코드를 일부 상속했으며 정상적으로 작동합니다. 내 질문은이지도에 맞춤 아이콘을 추가하는 방법입니다. 이전에 하나 추가했지만 코드를 어디에 넣어야하는지 모르겠습니다.

// initialize map 
    var unitedKingdom = new google.maps.LatLng(55.378051, -3.435973); 
    var options = { 
     center: unitedKingdom, 
     disableDefaultUI: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     zoom: 6 
    }; 
    var map = new google.maps.Map(document.getElementById('map'), options); 
    var infowindow = new google.maps.InfoWindow(); 
    var geocoder = new google.maps.Geocoder(); 

    // fetch and iterate over the winners 
    var current = 0; 
    $.getJSON('JSON_FILE.txt', function (winners) { 
     var popup = setInterval(function() { 
      (function (winner) { 
       var newCenter; 
       var location = winner.name.split(', '); // winner.location seems a bit unreliable (sometimes null) 
       geocoder.geocode({ address: location[1], country: 'UK' }, function (results, status) { 
        if (status == google.maps.GeocoderStatus.OK) { 
         newCenter = results[0].geometry.location; 
         map.panTo(newCenter); 
         var contentStr = '<div class="infowindow">' + 
             '<p><strong>' + winner.name + '</strong> just won ' + 
             '<strong>' + winner.displayAmount + '</strong> on ' + 
             '<strong>' + winner.game + '!</strong></p>' + 
             '</div>'; 
         infowindow.setPosition(newCenter); 
         infowindow.setContent(contentStr); 
         infowindow.open(map); 
        } 
       }); 
      })(winners[current]); 
      // increment the current index, or reset it if we're on the last item 
      current = (current < (winners.length-1)) ? (current+1) : 0; 
     }, 3000) 
    }); 

Answer 1

예제를 포함하여 documentation on custom icons을 참조하십시오.

코드를 넣을 위치는 지오 코더의 콜백 함수에 있어야하며, "newCenter"는 마커를 원하는 위치입니다. 코드에서

:

geocoder.geocode({ address: location[1], country: 'UK' }, function (results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        newCenter = results[0].geometry.location; 
        map.panTo(newCenter); 
        var contentStr = '<div class="infowindow">' + 
            '<p><strong>' + winner.name + '</strong> just won ' + 
            '<strong>' + winner.displayAmount + '</strong> on ' + 
            '<strong>' + winner.game + '!</strong></p>' + 
            '</div>'; 
        infowindow.setPosition(newCenter); 
        infowindow.setContent(contentStr); 
        infowindow.open(map); 
       } 
      }); 

은 다음과 같이 정의 마커를 추가

geocoder.geocode({ address: location[1], country: 'UK' }, function (results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        newCenter = results[0].geometry.location; 
        map.panTo(newCenter); 
        var marker = new google.maps.marker({ 
         map: map, 
         position: newCenter, 
         icon: customIcon, 
         shadow: customIconShadow, 
         shape: customIconShape 
        }); 

        var contentStr = '<div class="infowindow">' + 
            '<p><strong>' + winner.name + '</strong> just won ' + 
            '<strong>' + winner.displayAmount + '</strong> on ' + 
            '<strong>' + winner.game + '!</strong></p>' + 
            '</div>'; 
        infowindow.setPosition(newCenter); 
        infowindow.setContent(contentStr); 
        infowindow.open(map); 
       } 
      }); 

하는 customIcon을 정의 customIconShadow 및 customIconShape는 사용자 정의 아이콘이 필요.