크기가 다른 맞춤 Google지도 마커

Question

다른지도 마커를 사용하여 Google지도에 다른지도 지점을 표시하려고하는데지도 마커의 PNG는 크기가 다릅니다.

다른지도 표시 자의 크기를 조정하는 방법이 너무 명확하지 않습니다. 이 코드를 이미 구현 했으므로이 객체를 다시 써야하는지 아니면 poi-marker의 올바른 이미지 크기를 전달할 수 있는지 알 수는 없습니다 .png

다음은 내가 가지고있는 것입니다. 전반적으로, 제대로 작동하고, 단지 POI - marker.png 이미지 크기를 조정하는 방법을 알고 있어야합니다

<script type="text/javascript"> 
function initialize() { 
var styles = [ 
{ 
"featureType": "poi", 
"elementType": "labels", 
"stylers": [ 
{ "visibility": "off" } 
] 
},{ 

    "featureType": "transit", 
    "stylers": [ 
    { "visibility": "off" } 
    ] 

     },{ 
    } 

    ]; 

    var myLatlng = new google.maps.LatLng(30.452636,-91.107285); 
    var mapOptions = { 
    center: myLatlng, 
    zoom: 13, 
    scrollwheel: false, 
}; 



var locations = [ 
['<div class="dealerinfobox"><span class="dealername"><strong>Richards Honda</strong></span><br />7791 Florida Boulevard Baton Rouge, LA 70806</div><a target="_blank" class="directionslink button small-button" href="https://www.google.com/maps/dir//Richards+Honda/@30.452314,-91.107482,15z/">Get Directions</a>', 30.452636,-91.107285,'/path/to/folder/images/map-marker.png'], 

['<div class="dealerinfobox"><span class="dealername"><strong>Broadmoor/Sherwood Forest</strong></span><br />2 Miles</div>', 30.4455406,-91.0385525,'/path/to/folder/images/poi-marker.png'], 

['<div class="dealerinfobox"><span class="dealername"><strong>College Drive</strong></span><br /></div>', 30.4281267,-91.1363998,'/path/to/folder/images/poi-marker.png'], 

var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions); 


var infowindow = new google.maps.InfoWindow(); 
var marker, i; 

for (i = 0; i < locations.length; i++) { 
marker = new google.maps.Marker({ 
position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
map: map, 
icon: locations[i][3] 
}); 

google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
    infowindow.setContent(locations[i][0]); 
    infowindow.open(map, marker); 
    } 
})(marker, i)); 
} 


map.setOptions({styles: styles}); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

주요지도 마커 (지도-marker.png은) 관심 장소 마커와는 다른 크기 (poi-입니다 marker.png). POI 마커는 30x30이고 poi-marker.png의 크기를 30x30으로 설정하려고합니다.

Answer 1

이 작업을 수행하여 마커의 크기를 조정할 수 있습니다 :

var image = 
{ 
    url: 'images/beachflag.png', 
    // This marker is 20 pixels wide by 32 pixels tall. 
    size: new google.maps.Size(20, 32), 
    // The origin for this image is 0,0. 
    origin: new google.maps.Point(0,0), 
    // The anchor for this image is the base of the flagpole at 0,32. 
    anchor: new google.maps.Point(0, 32) 
    }; 

var marker = new google.maps.Marker(
      { 
       position: new google.maps.LatLng(data.LastLat, data.LastLon), 
       data: data, 
       title: data.Description, 
       icon: image 
      }); 

참고 아이콘 (https://developers.google.com/maps/documentation/javascript/reference#Icon)은 - 당신은 아이콘 이미지, 앵커를 지정하고 그것을 크기를 제공합니다.

여기에 복잡한 아이콘

더 많은 정보 : https://developers.google.com/maps/documentation/javascript/examples/icon-complex

편집 : 귀하의 의견을 바탕으로

이 시도 :

는 POI가에 다음입니다 위치 항목에 CSS 클래스를 추가하여 루프 현재 항목에 해당 클래스가 있는지 확인한 다음 그에 따라 아이콘 크기를 변경하십시오.

for (i = 0; i < locations.length; i++) 
{ 
    var iconImage; 

    // Check if the current item has a poi class 
    if(locations[i].indexOf('yourPOIClass') > -1) 
    {  
     iconImage = 
     { 
      url: locations[i][3], 
      size: new google.maps.Size(30, 30), // set POI size 
      origin: new google.maps.Point(0,0), 
      anchor: new google.maps.Point(0, 32) 
     }; 
    } 
    else 
    { 
     iconImage = 
     { 
      url: locations[i][3], 
      size: new google.maps.Size(50, 50), // set other marker size 
      origin: new google.maps.Point(0,0), 
      anchor: new google.maps.Point(0, 32) 
     }; 
    } 

marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map, 
     icon: iconImage 
     }); 

google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
    infowindow.setContent(locations[i][0]); 
    infowindow.open(map, marker); 
    } 
})(marker, i)); 
}