2013-03-06 2 views
1

여기 내 코드는 내 마커를 나타내는 이미지를 선택하고 이미지가 너무 큽니다. 내 이미지의 크기를 너무 작게 조정할 수있는 방법이 있습니다. 패딩, imagesizeicon 등Google지도 아이콘이 너무 큽니다.

function initialize() { 
    var mapOptions = { 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: center 
    }; 

    map = new google.maps.Map(document.getElementById('map_canvas'), 
      mapOptions); 

for (var i=0; i<a.length;i++) 
{ 
if(i == 0) iconImage = "image1.jpg"; 
else if(i == 1) iconImage = "image2.jpg"; 
    marker = new google.maps.Marker({ 
     map:map, 
     draggable:true, 
     animation: google.maps.Animation.DROP, 
     position: a[i], 
icon: iconImage, 
    }); 
+0

하여 마커 아이콘 얼마나 큰 (옆이 HTML 문서에 marker.gif 파일이 필요합니다)? 픽셀 현명? –

+0

256 픽셀, 픽셀이 영향을 줍니까? – user2116287

+0

예 일반적으로 제조사는 32px x 32px 또는 34px x 20px 즉, http://maps.google.com/mapfiles/marker.png –

답변

7

에 대신 간단한 이미지 파일 이름의 아이콘을 지정하는 google.maps.icon 객체를 사용합니다. 여기에서 size을 설정할 수 있습니다.

marker = new google.maps.Marker({ 
    map:map, 
    draggable:true, 
    animation: google.maps.Animation.DROP, 
    position: a[i], 
    icon: { 
     size: new google.maps.Size(width, height), 
     scaledSize: new google.maps.Size(width, height), 
     url: iconImage 
    }, 
}); 

전체 작업 예를

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Google Maps JavaScript API V3 Test</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body, #map_canvas { 
     margin: 0; 
     padding: 0; 
     height: 100%; 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script> 
     var map; 
     function initialize() { 
     var mapOptions = { 
      zoom: 11, 
      center: new google.maps.LatLng(52.3727, 4.8985), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     map = new google.maps.Map(document.getElementById('map_canvas'), 
       mapOptions); 

     var marker = new google.maps.Marker({ 
      map: map, 
      draggable: true, 
      animation: google.maps.Animation.DROP, 
      position: new google.maps.LatLng(52.3727, 4.8985), 
      icon: { 
      size: new google.maps.Size(20, 20), 
      scaledSize: new google.maps.Size(20, 20), 
      url: "marker.gif" 
      } 
     }); 

     } 

     google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 
    <div id="map_canvas"></div> 
    </body> 
</html> 
+0

지도에 표식이 표시되지 않았습니다. – user2116287

+0

@ user2116287 전체 예제를 추가했습니다. 그것을보십시오. – FrVaBe