Google지도 V3 - Muliple 마커 - 다른 색상

Question

나는 구글 맵을 채우기 위해 ColdFusion에서 사용하고 - 나는

이 코드 작품을 구글지도 API v3의 사용 일

에 대해 서로 다른 색깔의 마커를 원하지만 그들이 모두 1 개의 마커 색상 - 녹색이 항상 표시됨 - 다른 색상을 표시 할 수 없습니다.

생각하십니까? 모든 입력

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 

<script type="text/javascript"> 

var locations = 
[ 
<cfloop query=due> 
<cfoutput> 
<cfquery name="info" datasource="data"> 
SELECT * FROM data 
WHERE id = #due.id# 
</cfquery> 
<cfif info.gpslat is not "">["#info.id#", #info.gpslat#, #info.gpslong#,  #info.id#],</cfif> 
</cfoutput> 
</cfloop> 
]; 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 14, 
    center: new google.maps.LatLng(51.19, -114.48), 
    mapTypeId: google.maps.MapTypeId.HYBRID 
}); 

var infowindow = new google.maps.InfoWindow(); 

<cfloop query=due> 
<cfquery name="info" datasource="data"> 
SELECT * FROM data 
WHERE id = #due.id# 
</cfquery> 

     var marker, i; 

<cfif info.gpslat is not "">  
    <cfif due.data is 'yes'> 
    var image = 'red.png'; 
    </cfif> 
    <cfif due.data is 'no'> 
    var image = 'green.png'; 
    </cfif> 
</cfif> 
</cfloop> 


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: image 
    }); 

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


</script> 

Answer 1

자바 스크립트와 ColdFusion 코드가 혼합되어 있으므로 촬영 된 마커 이미지가 루프에서 마지막으로 사용할 수 있습니다. CFIF 문에 폐쇄 "필요 ... 작동 할 수 뭔가

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 

<script type="text/javascript"> 

    var locations = 
    [ 
    <cfloop query=due> 
    <cfoutput> 
    <cfquery name="info" datasource="data"> 
    SELECT * FROM data 
    WHERE id = #due.id# 
    </cfquery> 
    <cfif info.gpslat is not "">['#info.id#', #info.gpslat#, #info.gpslong#,#info.id#,<cfif due.data is "yes>'red.png'<cfelse>'green.png'</cfif>],</cfif> 
    </cfoutput> 
    </cfloop> 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 14, 
     center: new google.maps.LatLng(51.19, -114.48), 
     mapTypeId: google.maps.MapTypeId.HYBRID 
    }); 

    var infowindow = new google.maps.InfoWindow(); 

    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][4] 
    }); 

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

코드는 최적화되지 않은 것입니다 ...하지만 그건 네는 고맙습니다 작동

Answer 2

고맙습니다 당신은 마커의 다양한 사용 CSS Sprite techniques를 사용할 수 있습니다

var mImage = new google.maps.MarkerImage("/i/Images/IconsLarge.png", 
    new google.maps.Size(34, 35), 
    new google.maps.Point(0, vPos), <--- set the vertical position to match your sprite offset. 
    new google.maps.Point(10, 34) 
); 
//insert marker 
marker = new google.maps.Marker({ 
    icon: mImage, 
    position: new google.maps.LatLng(latitude, longitude), 
    map: map 
}); 

Answer 3

난 당신이 배열이나 뭔가가 필요 말하고 싶지만. 이 루프 : 나는 의미 가정

<cfloop query=due> 
<cfquery name="info" datasource="data"> 
SELECT * FROM data 
WHERE id = #due.id# 
</cfquery> 

     var marker, i; 

<cfif info.gpslat is not "">  
    <cfif due.data is 'yes'> 
    var image = 'red.png'; 
    </cfif> 
    <cfif due.data is 'no'> 
    var image = 'green.png'; 
    </cfif> 
</cfif> 
</cfloop> 

중 하나를 수행/또는 및지도에 마커의 하나 이상의 종류의 결과는 - 실제로 할 것 .. "이미지"에 대한 하나 개의 변수를 productes :

var image = 'red.png'; 
var image = 'red.png'; 
var image = 'green.png'; 

그러나 각 set 문은 다음 스크립트를 덮어 쓰게됩니다.

대신 빨간색 또는 녹색 중 하나를 호출하는 JS 함수를 만듭니다.

icon: image; 

당신은 지금 할 것 :

icon: getimage(var1, var2); 

곳이 var1과 동일 info.gsplat 및 due.data을 VAR2 및 공간에 당신이 할 곳. 각각의 마커를 순차적으로 작성하기 위해 루프 안쪽에 모든 것이 들어가야합니다.